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).
Если хотя бы один пункт красный — уровень не пройден, возвращаемся к правкам.
1---2name: mobile-frontend3description: 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.4license: MIT5---67# mobile-frontend89Композитный скилл для качественной **мобильной вёрстки и фронтенда**: от правил10(отступы, шрифты, якоря, токены) через сборку к многоуровневой проверке с11отладкой каждого элемента — включая меню и навигацию — и финальному аудиту перед12сдачей. Это «дирижёр»: он держит единый воркфлоу и перенаправляет узкие задачи13соседним скиллам (`frontend-design-taste`, `frontend-perfection`, `/visual-qa`,14`/frontend`), а сам владеет мобильными правилами и чек-листом отладки навигации.1516## Когда использовать1718- «сделай мобильную версию», «mobile-first вёрстка», «адаптив под телефон»19- «проверь мобилку», «аудит мобильной вёрстки», «mobile QA»20- «меню/гамбургер не работает на телефоне», «якоря упираются в шапку»21- «доведи мобильный фронт до идеала», «mobile lighthouse 100»2223## Не подменяйте этим скиллом2425- Чистая эстетика/палитра без мобильного контекста → `frontend-design-taste`26- Глубокий a11y-аудит (ARIA, контраст, фокус-ловушки, скринридер) → `frontend-a11y`27- Глубокий perf-аудит (заголовки, вес бандла, CWV, resource-hints) → `frontend-performance`28- E2E/визуальные/контрактные тесты → `frontend-testing`29- Быстрый Lighthouse/контраст/токены/OG на десктопе → `frontend-perfection`30- Один конкретный баг в меню → см. `references/debug-menu-nav.md`, но воркфлоу31 всё равно прогоняйте по уровням.3233---3435## Необходимые мобильные правила (база)3637Все числа — в `references/tokens.md`. Кратко:38391. **Tap-target ≥ 44×44px** для любой интерактивной цели (кнопка, ссылка-иконка,40 пункт меню). Меньше — не прощается.412. **Нет горизонтального скролла** (`overflow-x` на `<html>/<body>` недопустим как42 постоянное состояние; ловите элемент-нарушитель через `scrollWidth > clientWidth`).433. **Якоря под фиксированной шапкой**: `:target` и `scroll-margin-top` равны44 высоте sticky-хедера + отступ (обычно `scroll-margin-top: calc(var(--header-h) + 16px)`).454. **Safe-area**: `viewport-fit=cover` + `env(safe-area-inset-*)` для нижней панели46 (home indicator) и чёлки. Меню/CTA не должны упираться в индикатор.475. **Шрифты**: `font-display: swap`, мобильная тип-шкала на `clamp()`,48 базовый размер ≥ 16px для body (чтобы не зумíло при фокусе поля в iOS).496. **Токены, а не магия**: все цвета/отступы/радиусы — через CSS-переменные,50 вне токенов — только `transparent`/`currentColor`.517. **Контраст WCAG AA**: 4.5:1 текст, 3:1 крупный/UI. Проверяется люменесцентно,52 не «на глаз».538. **prefers-reduced-motion**: анимации меню/переходов защищены54 `@media (prefers-reduced-motion: reduce)`.5556---5758## Многоуровневый воркфлоу5960Каждый уровень — отдельная фаза со своим критерием прохода. Не переходите дальше,61пока уровень не «зелёный».6263### Уровень 0 — Foundations (правила и токены)64- Заведите `:root` с токенами из `references/tokens.md` (spacing 4/8-сетка,65 type-scale, breakpoints, `--header-h`, safe-area).66- Проверьте `viewport` мета: `width=device-width, initial-scale=1, viewport-fit=cover`.67- Убедитесь, что якорные секции имеют `id` и `scroll-margin-top`.6869### Уровень 1 — Build (сборка)70- Mobile-first: базовые стили = мобильные, расширения — через `min-width`.71- Картинки: `width:100%`, `height:auto`, `loading="lazy"`, `decoding="async"`,72 желательно `srcset`/`sizes`.73- Нет фиксированных ширин в `px` у блоков контента; контейнер — `max-width` + `padding`.74- Интерактив → минимум 44px по меньшей стороне.7576### Уровень 2 — Visual QA (Playwright/Chromium)77Прогоняйте реальные вьюпорты: **320, 360, 390, 414, 768**. Для каждого:78- скриншот + проверка `document.documentElement.scrollWidth <= window.innerWidth`79 (нет горизонтального скролла);80- замер tap-target: все `<a>/<button>` ≥ 44px (скрипт в `references/mobile-checklist.md`);81- шрифты загрузились (нет FOIT-прыжка — `document.fonts.ready`);82- safe-area: нижний CTA/меню не перекрывается индикатором (`env(safe-area-inset-bottom)`);83- якоря: клик по `#id` → `getBoundingClientRect().top >= headerBottom - 1`.8485> Эстетику и «не шаблонный вид» сверяйте через `frontend-design-taste` и `/visual-qa`.86> Контраст/порядок заголовков — через `frontend-perfection`.8788### Уровень 3 — Nav & Menu audit (отладка навигации)89Самый частый источник багов. Полный проигрыш — в `references/debug-menu-nav.md`.90Минимум:91- гамбургер: `aria-expanded` синхронен с видимостью; открытие/закрытие по тапу;92- пункт меню ведёт на цель **и закрывает меню**;93- фокус-ловушка в открытом меню (Tab не уходит наружу), `Esc` закрывает;94- якорные/глубокие ссылки скроллятся под шапку корректно;95- клавиатурная навигация: видимый `:focus-visible`, логичный `Tab`-порядок;96- z-index: меню выше контента и шапки, но ниже модалок/тостов.9798### Уровень 4 — Perf (mobile Lighthouse)99Через `frontend-perfection` (`scripts/audit.js`, режим mobile):100- CLS < 0.1, LCP < 2.5s, INP < 200ms на мобильном профиле;101- нет блокирующего JS/CSS, шрифты не держат CLS.102103### Уровень 5 — Fix & re-verify loop104- Исправляйте находки строго по уровням (2→3→4), не «все сразу».105- После правок **перепроверяйте затронутые уровни**, пока не станет зелёным.106- Финал: подпись (sign-off) — см. критерии ниже.107108---109110## Маршрутизация к соседям111112| Подзадача | Скилл/команда |113|---|---|114| Палитра, шрифты, «вкус», анти-шаблон | `frontend-design-taste` |115| Lighthouse, контраст, токены, OG, Security/Privacy/i18n | `frontend-perfection` |116| Глубокий a11y (ARIA, фокус, скринридер, axe) | `frontend-a11y` |117| Глубокий perf (заголовки, бандл, CWV, hints) | `frontend-performance` |118| E2E / визуальная регрессия / контракт API | `frontend-testing` |119| Скриншот-сверка UI после сборки | `/visual-qa` |120| Общая оркестрация фронт-задачи | `/frontend` |121| Баг меню/навигации в одном месте | `references/debug-menu-nav.md` |122123## Критерии сдачи (sign-off)124125- ✅ Вьюпорты 320–768: нет горизонтального скролла, контент в зоне safe-area.126- ✅ Все интерактивы ≥ 44px; контраст AA пройден люменесцентно.127- ✅ Меню: открытие/закрытие, `aria-expanded`, фокус-ловушка, `Esc`, закрытие по пункту.128- ✅ Якоря приземляются под шапку (scroll-margin-top).129- ✅ Mobile Lighthouse: CLS/LCP/INP в норме.130- ✅ Эстетика не «шаблонная» (пройден гейт `frontend-design-taste`).131132Если хотя бы один пункт красный — уровень не пройден, возвращаемся к правкам.
bestdeejay-design