| name | mobile-frontend |
| description | Composite skill for quality mobile-first frontend — codified rules (spacing, type scale, anchors, safe-area, tap-targets), build, and multi-level verification with per-element menu/nav debugging. |
| license | MIT |
| metadata | {"version":"1.0.1"} |
| when_to_use | Build or audit quality mobile-first frontend: spacing, tap-targets, safe-area, nav/menu debugging, mobile Lighthouse. Triggers: 'mobile-first', 'адаптив под телефон', 'проверь мобилку', 'mobile QA', 'гамбургер не работает', 'mobile lighthouse 100'. Example: 'Make this page work great on phones.' |
mobile-frontend
Композитный скилл для качественной мобильной вёрстки и фронтенда: от правил
(отступы, шрифты, якоря, токены) через сборку к многоуровневой проверке с
отладкой каждого элемента — включая меню и навигацию — и финальному аудиту перед
сдачей. Это «дирижёр»: он держит единый воркфлоу и перенаправляет узкие задачи
соседним скиллам (frontend-design-taste, frontend-perfection, /visual-qa,
/frontend), а сам владеет мобильными правилами и чек-листом отладки навигации.
Когда использовать
- «сделай мобильную версию», «mobile-first вёрстка», «адаптив под телефон»
- «проверь мобилку», «аудит мобильной вёрстки», «mobile QA»
- «меню/гамбургер не работает на телефоне», «якоря упираются в шапку»
- «доведи мобильный фронт до идеала», «mobile lighthouse 100»
Не подменяйте этим скиллом
- Чистая эстетика/палитра без мобильного контекста →
frontend-design-taste
- Глубокий a11y-аудит (ARIA, контраст, фокус-ловушки, скринридер) →
frontend-a11y
- Глубокий perf-аудит (заголовки, вес бандла, CWV, resource-hints) →
frontend-performance
- E2E/визуальные/контрактные тесты →
frontend-testing
- Быстрый Lighthouse/контраст/токены/OG на десктопе →
frontend-perfection
- Один конкретный баг в меню → см.
references/debug-menu-nav.md, но воркфлоу
всё равно прогоняйте по уровням.
Необходимые мобильные правила (база)
Все числа — в references/tokens.md. Кратко:
- Tap-target ≥ 44×44px для любой интерактивной цели (кнопка, ссылка-иконка,
пункт меню). Меньше — не прощается.
- Нет горизонтального скролла (
overflow-x на <html>/<body> недопустим как
постоянное состояние; ловите элемент-нарушитель через scrollWidth > clientWidth).
- Якоря под фиксированной шапкой:
:target и scroll-margin-top равны
высоте sticky-хедера + отступ (обычно scroll-margin-top: calc(var(--header-h) + 16px)).
- Safe-area:
viewport-fit=cover + env(safe-area-inset-*) для нижней панели
(home indicator) и чёлки. Меню/CTA не должны упираться в индикатор.
- Шрифты:
font-display: swap, мобильная тип-шкала на clamp(),
базовый размер ≥ 16px для body (чтобы не зумíло при фокусе поля в iOS).
- Токены, а не магия: все цвета/отступы/радиусы — через CSS-переменные,
вне токенов — только
transparent/currentColor.
- Контраст WCAG AA: 4.5:1 текст, 3:1 крупный/UI. Проверяется люменесцентно,
не «на глаз».
- prefers-reduced-motion: анимации меню/переходов защищены
@media (prefers-reduced-motion: reduce).
Многоуровневый воркфлоу
Каждый уровень — отдельная фаза со своим критерием прохода. Не переходите дальше,
пока уровень не «зелёный».
Уровень 0 — Foundations (правила и токены)
- Заведите
:root с токенами из references/tokens.md (spacing 4/8-сетка,
type-scale, breakpoints, --header-h, safe-area).
- Проверьте
viewport мета: width=device-width, initial-scale=1, viewport-fit=cover.
- Убедитесь, что якорные секции имеют
id и scroll-margin-top.
Уровень 1 — Build (сборка)
- Mobile-first: базовые стили = мобильные, расширения — через
min-width.
- Картинки:
width:100%, height:auto, loading="lazy", decoding="async",
желательно srcset/sizes.
- Нет фиксированных ширин в
px у блоков контента; контейнер — max-width + padding.
- Интерактив → минимум 44px по меньшей стороне.
Уровень 2 — Visual QA (Playwright/Chromium)
Прогоняйте реальные вьюпорты: 320, 360, 390, 414, 768. Для каждого:
- скриншот + проверка
document.documentElement.scrollWidth <= window.innerWidth
(нет горизонтального скролла);
- замер tap-target: все
<a>/<button> ≥ 44px (скрипт в references/mobile-checklist.md);
- шрифты загрузились (нет FOIT-прыжка —
document.fonts.ready);
- safe-area: нижний CTA/меню не перекрывается индикатором (
env(safe-area-inset-bottom));
- якоря: клик по
#id → getBoundingClientRect().top >= headerBottom - 1.
Эстетику и «не шаблонный вид» сверяйте через frontend-design-taste и /visual-qa.
Контраст/порядок заголовков — через frontend-perfection.
Уровень 3 — Nav & Menu audit (отладка навигации)
Самый частый источник багов. Полный проигрыш — в references/debug-menu-nav.md.
Минимум:
- гамбургер:
aria-expanded синхронен с видимостью; открытие/закрытие по тапу;
- пункт меню ведёт на цель и закрывает меню;
- фокус-ловушка в открытом меню (Tab не уходит наружу),
Esc закрывает;
- якорные/глубокие ссылки скроллятся под шапку корректно;
- клавиатурная навигация: видимый
:focus-visible, логичный Tab-порядок;
- z-index: меню выше контента и шапки, но ниже модалок/тостов.
Уровень 4 — Perf (mobile Lighthouse)
Через frontend-perfection (scripts/audit.js, режим mobile):
- CLS < 0.1, LCP < 2.5s, INP < 200ms на мобильном профиле;
- нет блокирующего JS/CSS, шрифты не держат CLS.
Уровень 5 — Fix & re-verify loop
- Исправляйте находки строго по уровням (2→3→4), не «все сразу».
- После правок перепроверяйте затронутые уровни, пока не станет зелёным.
- Финал: подпись (sign-off) — см. критерии ниже.
Маршрутизация к соседям
| Подзадача | Скилл/команда |
|---|
| Палитра, шрифты, «вкус», анти-шаблон | frontend-design-taste |
| Lighthouse, контраст, токены, OG, Security/Privacy/i18n | frontend-perfection |
| Глубокий a11y (ARIA, фокус, скринридер, axe) | frontend-a11y |
| Глубокий perf (заголовки, бандл, CWV, hints) | frontend-performance |
| E2E / визуальная регрессия / контракт API | frontend-testing |
| Скриншот-сверка UI после сборки | /visual-qa |
| Общая оркестрация фронт-задачи | /frontend |
| Баг меню/навигации в одном месте | references/debug-menu-nav.md |
Критерии сдачи (sign-off)
- ✅ Вьюпорты 320–768: нет горизонтального скролла, контент в зоне safe-area.
- ✅ Все интерактивы ≥ 44px; контраст AA пройден люменесцентно.
- ✅ Меню: открытие/закрытие,
aria-expanded, фокус-ловушка, Esc, закрытие по пункту.
- ✅ Якоря приземляются под шапку (scroll-margin-top).
- ✅ Mobile Lighthouse: CLS/LCP/INP в норме.
- ✅ Эстетика не «шаблонная» (пройден гейт
frontend-design-taste).
Если хотя бы один пункт красный — уровень не пройден, возвращаемся к правкам.
