# Mobile Frontend > 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. - Skill: `bestdeejay-design/mobile-frontend` (Agent Skill, multi-file: 6 files) - Install (CLI): `npx skillmds@latest add bestdeejay-design/mobile-frontend` - Raw SKILL.md: https://api.skillmd.com/api/skills/bestdeejay-design/mobile-frontend/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: bestdeejay-design (https://skillmd.com/u/bestdeejay-design) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/bestdeejay-design/mobile-frontend --- # 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`. Кратко: 1. **Tap-target ≥ 44×44px** для любой интерактивной цели (кнопка, ссылка-иконка, пункт меню). Меньше — не прощается. 2. **Нет горизонтального скролла** (`overflow-x` на `/` недопустим как постоянное состояние; ловите элемент-нарушитель через `scrollWidth > clientWidth`). 3. **Якоря под фиксированной шапкой**: `:target` и `scroll-margin-top` равны высоте sticky-хедера + отступ (обычно `scroll-margin-top: calc(var(--header-h) + 16px)`). 4. **Safe-area**: `viewport-fit=cover` + `env(safe-area-inset-*)` для нижней панели (home indicator) и чёлки. Меню/CTA не должны упираться в индикатор. 5. **Шрифты**: `font-display: swap`, мобильная тип-шкала на `clamp()`, базовый размер ≥ 16px для body (чтобы не зумíло при фокусе поля в iOS). 6. **Токены, а не магия**: все цвета/отступы/радиусы — через CSS-переменные, вне токенов — только `transparent`/`currentColor`. 7. **Контраст WCAG AA**: 4.5:1 текст, 3:1 крупный/UI. Проверяется люменесцентно, не «на глаз». 8. **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: все `/