Скил frontend-ui — чеклист, который HTTP 200 не заменит
Как Datarim выявляет повторяющиеся UI-баги, которые проходят синтаксические проверки — ловушки специфичности тёмного режима, сломанные мобильные вьюпорты, расхождение i18n-ключей, проблемы доступности и устаревшие счётчики компонентов — через структурированный чеклист из девяти разделов.
Страница, возвращающая HTTP 200 с валидным HTML, может рендериться со сломанным тёмным режимом, переполненным текстом на экране 375px, отсутствующими Open Graph-тегами или хардкодными строками на неправильном языке. Скил frontend-ui — структурированный чеклист для любой задачи, затрагивающей HTML, CSS, шаблоны или визуальные компоненты. Он выявляет повторяющийся класс UI-багов, которые пропускают юнит- и HTTP-проверки.
Скил загружается для любого /dr-do, модифицирующего файлы .html, шаблоны .php, .css, .vue или .tsx, затрагивающие UI, а также для задач типа «Website Development» или «Frontend». Он же служит референсом комплаенса перед закрытием UI-задач через /dr-compliance.
Специфичность тёмного режима — тихая поломка
Самая частая CSS-ошибка в темизации — селектор :not(.dark). Он совпадает с любым элементом-предком, не имеющим класса dark — включая <body>, <section> и все остальные контейнеры. Поскольку эти предки являются также предками целевого компонента, селектор всегда срабатывает независимо от состояния темы, и в тёмный режим проникают светлые цвета из-за порядка каскада.
Правильный паттерн: светлые стили — по умолчанию, без префикса класса; тёмные переопределения — через .dark .component. Чеклист проверяет, что Tailwind настроен с darkMode: 'class', что в CSS-файлах нет селекторов :not(.dark), и что начальный класс dark на теге <html> берётся из localStorage.
Визуальная и вьюпорт-верификация
Чеклист требует скриншоты тёмного и светлого режимов, а также проверку вьюпортов: 320px и 375px (нет горизонтального скролла, текст читаемый), 768px (layout адаптируется), 1280px и более (контейнеры с max-width работают). Для мультиязычных сайтов раздел i18n проверяет совпадение ключей во всех языковых файлах, работу переключателя языка с любой страницы, соблюдение URL-префиксов /en/ и /ru/ на всех внутренних ссылках, а также то, что лейаут справляется с примерно 20–30% дополнительной длиной русского текста по сравнению с английским.
На этапе /dr-qa автоматический проход Playwright запускается против локального dev-окружения при изменении любого из визуальных разделов. Проход захватывает скриншоты и сохраняет результаты в datarim/qa/playwright-{ID}/. Визуальная оценка соответствия скриншота замыслу остаётся за оператором — автоматический проход фиксирует доказательства, а не выносит эстетические суждения.
Счётчики компонентов как источник истины
Скил содержит правило о генерации счётчиков компонентов фреймворка — агентов, скилов, команд — для контента или документации. Такие счётчики должны получаться живым запросом к файловой системе в момент написания, а не из памяти сессии. Предшествующий инцидент привёл к странице с надписью «15 агентов / 18 скилов», тогда как реальные значения были 16 и 22, и 6 сценариев использования вместо 13. Все три ошибки возникли из кешированных данных, а не из вызова ls ... | wc -l.
Производительность, доступность и SEO
Оставшиеся разделы охватывают доступность (контраст цвета WCAG AA, доступные метки кнопок, видимые состояния фокуса, поддержка reduced-motion), гигиену производительности (нет неограниченных CSS-анимаций, ленивая загрузка изображений, font-display swap, отложенные скрипты) и SEO с превью для соцсетей (уникальные заголовки страниц, мета-описания, Open Graph и Twitter Card теги, canonical-URL, hreflang в sitemap для мультиязычных сайтов). Каждый раздел — краткий и конкретный чеклист, а не стайл-гайд.
Подробнее о пайплайне Datarim — в посте что такое Datarim, а о другом классе тихих ложноположительных прохождений — в посте о скиле health-controller-stub-detector.