Как пользоваться
Пройдите список перед тем, как отдать интерфейс в ревью. Рядом с каждым
пунктом указан урок, где разбирается нужный приём.
Раскладка и адаптивность
| Проверка | Урок |
|---|
| На 320px нет горизонтальной прокрутки | 11 |
| Проверены ширины 320, 375, 768, 1024, 1440 | 11 |
| Сетки перестраиваются, а не сжимаются до нечитаемого | 09 |
Ширины ограничены max-w-*, а не заданы жёстко | 04 |
Длинный текст обрезается (truncate + min-w-0) | 05, 08 |
Иконки и аватары не сжимаются (shrink-0) | 08 |
Широкие таблицы обёрнуты в overflow-x-auto | 10 |
Промежутки заданы gap, а не отступами у детей | 04 |
| Компоненты, используемые в разных местах, реагируют на контейнер | 11 |
Доступность
| Проверка | Урок |
|---|
| Вся страница проходится клавишей Tab | 12 |
| Фокус виден на каждом интерактивном элементе | 07, 12 |
| Порядок фокуса совпадает с визуальным | 12 |
Кнопки-иконки имеют aria-label | 18 |
Подписи связаны с полями (htmlFor / id) | 20 |
Ошибки помечены aria-invalid и связаны с текстом | 20 |
| Диалоги имеют заголовок | 21 |
| Состояние передано не только цветом | 06, 12 |
| Контраст текста не ниже 4.5:1 | 06 |
Анимации отключаются при prefers-reduced-motion | 14 |
Скрытые элементы скрыты правильно (sr-only, а не hidden) | 12 |
Тема и цвет
| Проверка | Урок |
|---|
| Каждый экран проверен в тёмной теме | 13 |
| Нет жёстких цветов там, где нужны токены | 13, 19 |
| Тени в тёмной теме заменены рамками или кольцами | 07, 13 |
| Нет вспышки светлой темы при загрузке | 13 |
| На экране не больше четырёх имён оттенков | 06 |
| Приглушённый текст остаётся читаемым | 06, 19 |
Код
| Проверка | Урок |
|---|
| Нет классов, собранных из строк в JavaScript | 03 |
| Повторяющиеся наборы классов вынесены в компоненты | 15 |
Компоненты принимают className через cn() | 15 |
| Значения берутся из шкалы, произвольных — минимум | 04 |
| Нет конфликтующих утилит на одном элементе | 01 |
Классы отсортированы (prettier-plugin-tailwindcss) | 15 |
Нет !important без веской причины | 18 |
Слои z-index в пределах шкалы 10–50 | 10 |
Поведение и состояния
| Проверка | Урок |
|---|
| Есть состояние загрузки (скелетон нужной геометрии) | 14, 22 |
| Есть пустое состояние с объяснением и действием | 22 |
| Есть состояние ошибки с возможностью повторить | 22 |
| Кнопки отправки блокируются во время запроса | 20 |
| Опасные действия требуют подтверждения | 21 |
| Анимации не длиннее 300 мс | 14 |
Ничего важного не спрятано только за hover | 12 |
Числа выровнены и используют tabular-nums | 05 |
Сборка
| Проверка | Комментарий |
|---|
npm run build проходит без ошибок | — |
| Размер CSS соответствует ожиданиям | резкий рост — признак произвольных значений |
| Классы из шаблонов бэкенда попали в сборку | проверить @source |
| В продакшене нет браузерной сборки Tailwind | только для прототипов |