серп 2026 – вер 2026
Epsilon Lab
206 компонентів для сайту Epsilon, вивірені за Stripe й захищені автоматичними перевірками
- Сайти й застосунки
- Бібліотека компонентів
- Тривалість
- 1 місяць
- Компанія
- Epsilon Solutions
- Роль
- Власник; встановлення планки якості й керівництво агентами
Огляд
Окремий застосунок Next.js із 206 компонентами в 23 категоріях, основа, з якої будується сайт Epsilon. Він відтворює виміряні геометрію, типографіку й анімацію Stripe в кольорах Epsilon, а автоматичні перевірки якості тримають його настільки суворим, що агенти можуть будувати з нього сторінки без відхилень.
Інструменти
- Next.js
- React
- TypeScript
- Vitest
- Playwright
- axe-core
- Claude Code
Виміряно, а не на око
Сайту потрібна була база компонентів, якість якої вимірюється, а не оцінюється на око: точні відступи й типографіка, доступ із клавіатури, контраст, зменшений рух і правильне відображення грузинського тексту. Вона також мала бути достатньо суворою, щоб AI-агенти могли будувати з неї сторінки без відхилень.
Геометрія Stripe, колір Epsilon
Значення взято з CSS і коду дашборду, які Stripe справді випустив, а не оцінено приблизно. Контракт простий: геометрія та взаємодія — від Stripe, колір і контент — від Epsilon. Два файли токенів є єдиними джерелами кольору, і це забезпечує CSS-перевірка. Нові компоненти, як-от меню, комбобокс, вибір дати й таблиця даних, дотримуються клавіатурних патернів WAI-APG.
Перевірки й агенти
Одна команда запускає CSS-перевірки, перевірку типів, лінтинг, набір Vitest, продакшн-збірку й smoke-прохід на помилки консолі, мережі, гідратації та axe. У кампанії доопрацювання кожен із 206 компонентів отримав власного агента Claude Code, після якого працювали агенти-верифікатори, усе під моїм керівництвом. Пілотний шаблон застосунку в стилі ClickUp на 12 маршрутів аудитували, доки повний прохід нічого не знайшов.
Результат
Кампанія доопрацювання виправила 730 дефектів, а набір тестів зріс до 5 358 специфікацій. Допустима кількість зауважень axe щодо колірного контрасту впала зі 127 до 17, усі 1 420 елементів досяжні з клавіатури, пасток — 0, анімація в стані спокою знизилася з 180–240 до приблизно 0,2 кадру на секунду, а обрізання грузинських нижніх виносних елементів скоротилося зі 141 пікселя до 0.