review-uiux

name: review-uiux description: >- UI/UX-ревью web-фронтенда MeTravel: визуальная проверка страниц в браузере (mobile 390px + desktop 1280px), эвристики юзабилити (touch-таргеты, контраст, пустые/loading-состояния, переполнение текста, фокус, a11y-лейблы), консистентность с дизайн-системой; находки исправляются. Триггеры: «UI/UX ревью», «проверь юзабилити», «проверь интерфейс страницы».

Ревью пользовательского интерфейса и опыта. Scope по умолчанию — ключевые страницы (главная /, поиск/список путешествий /travels, детали путешествия, карта /map); «все страницы» — по явному запросу. Аудитория RU/BY — все тексты на русском, без англицизмов в UI.

Порядок страниц (если scope «всё»)

Главная /
Поиск + список путешествий (/travels или (tabs)/travel* — фильтры, поисковая строка, карточки)
Детали путешествия /travels/[slug]
Карта /map
Квесты /quests, деталь квеста
Авторизация: /login, /registration, восстановление пароля
Кабинет: профиль, мои путешествия, избранное
Создание/редактирование путешествия (wizard)
Статика: about, contact, 404

Шаги

Запусти preview (npm run web, preview_start) и проверяй каждую страницу в двух вьюпортах: 390×844 (mobile) и 1280×800 (desktop). Скриншот + snapshot + console_logs на каждую.
Визуальные эвристики (на каждую страницу):
- переполнение/обрезка текста, наложение элементов, горизонтальный скролл на mobile;
- touch-таргеты < 44×44 на mobile (иконки, чипы фильтров, пагинация);
- контраст текста: серый-на-сером, текст поверх изображения без подложки;
- состояния: loading (скелетоны, не прыгающий контент), пустой результат (понятный текст + действие), ошибка (не белый экран и не сырой JSON);
- CLS-видимые прыжки при загрузке; изображения без зарезервированных габаритов;
- консистентность: одинаковые отступы/радиусы/кнопки между страницами, карточки только UnifiedTravelCard;
- формы: видимая валидация на blur/submit, понятные ошибки на русском, кнопка disabled+спиннер во время сабмита, autocomplete-атрибуты;
- навигация: активный таб подсвечен, «назад» работает, заголовок страницы отражает контент.
Интерактивная проверка: клики по основным действиям (поиск, фильтр, карточка, пагинация/инфинит-скролл) — preview_click/fill, после каждого — snapshot: результат соответствует ожиданию, нет зависших спиннеров.
Кодовый аудит — делегируй review-auditor точечно по найденным симптомам (а не вслепую): a11y-роли/лейблы у иконок-кнопок, accessibilityLabel, hardcoded цвета мимо constants/, фиксированные пиксельные ширины, ломающие mobile.
Чини подтверждённое: каждое исправление перепроверяй в preview (скриншот до/после), прогоняй Jest scope + typecheck + lint затронутого.
Отчёт: страница → находка (со скриншотом-доказательством) → severity → фикс → проверка. Severity: P1 — блокирует сценарий пользователя или ломает layout; P2 — заметное трение/несоответствие; P3 — полировка.

Правила

Не репортить «вкусовщину» без эвристики: каждая находка привязана к конкретному правилу (таргет, контраст, состояние, консистентность) и видна на скриншоте.
Дизайн не переделывать — чинить отклонения от существующей дизайн-системы, не изобретать новую.
Mobile-вьюпорт приоритетнее: основная аудитория — мобильная.
Backdrop-blur правило проекта соблюдать (статичный фрост на mobile).
Не трогать SEO-разметку и контент статей — это review-seo/контентные скиллы.
Браузер-проверку делаешь сам — никогда не перекладывать на пользователя (пролистай / нажми hard-refresh / открой консоль / вставь сниппет / скажи что видишь / пришли скрин = оффлоадинг, не верификация). Если дефолтное превью не открывает/не раскладывает цель (headless innerHeight=0, RN-Web скроллит внутренний контейнер, прод-only роут, dev-SSR крашит) — исчерпай альтернативный путь до блокера: локальная prod-сборка + статик с прод-API (Prod Static/Dist Prod), Playwright/e2e, device-verify. verify pending — только перепробовав все пути. См. docs/RULES.md → «Always self-verify».