Фронтенд UI
Чеклист Frontend UI — CSS-специфичность, тёмная/светлая темы, визуальное тестирование, мобильная отзывчивость, i18n-паритет. Применять при правке HTML/CSS.
Обзор
Frontend UI — чеклист качества, загружаемый при любой задаче с изменением HTML, CSS, шаблонов или визуальных компонентов. Он ловит повторяющиеся UI-баги, которые проходят HTTP-проверки, но ломают визуал: протечки светлой темы в тёмную, сломанные мобильные раскладки, отсутствующие метки доступности.
CSS Dark/Light Mode
Светлая тема — по умолчанию, класс .dark — переопределение. Навык запрещает селекторы :not(.dark) — распространённый анти-паттерн, из-за которого светлые цвета протекают в тёмную тему.
Визуальная проверка
HTTP 200 + валидный HTML недостаточны для UI-задач. Обязательны скриншоты в обеих темах, мобильный вьюпорт (320px, 375px), планшет (768px), десктоп (1280px+) и мгновенное переключение темы без мерцания.
Области проверки
- i18n UI паритет — идентичные ключи переводов, работающий переключатель языков, поддержка URL-префиксов, обработка разницы длины текстов
- Мобильная отзывчивость — гамбургер-навигация, тап-цели 44x44px, нет переполнения контента, масштабируемые изображения
- Базовая доступность — контраст WCAG AA, доступные метки кнопок, видимые состояния фокуса, поддержка reduced-motion
- Гигиена производительности — ленивая загрузка изображений, font-display swap, отложенные скрипты
- SEO и социальные превью — уникальные title и description, теги Open Graph и Twitter Card, канонические URL
Источник истины для подсчётов компонентов
Перед генерацией списков компонентов фреймворка (агенты, навыки, команды) для контента или документации всегда запрашивайте файловую систему — никогда не полагайтесь на кешированные числа. Устаревшие подсчёты приводили к ошибкам на продакшн-сайтах.
Когда используется
Применяется при /dr-do для задач с изменением .html, .php, .css файлов. Агент tester включает этот чеклист в режиме Web UI тестирования, агент reviewer проверяет при /dr-qa.