菜单
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.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/bestdeejay-design/agent-skills --skill mobile-frontend命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Инженерия историй: создание мироизменяющих презентаций. Не генератор слайдов — а система превращения идей в истории, которые вдохновляют действовать. Сочетает нарративную инженерию, визуальный язык и перформанс-дизайн.
End-to-end presentations from a topic — outline -> JSON spec -> 16:9 HTML slides (with mandatory Playwright verification) and real .pptx (full 14-type design system), plus strategy presets, PDF export, and deck-quality audits. One command per stage.
Конвертер PNG в векторный SVG. Скрипт raster_to_svg.py читает PNG (файл или stdin) и отдаёт SVG: при установленном vtracer-cli используется он (качественная цветная трассировка), иначе встроенный нативный трассировщик на чистом Python 3 stdlib (свой декодер PNG через zlib, без pip-зависимостей). Два режима: contour (квантование median-cut, контурная трассировка, квадратичные Bezier, fill-rule evenodd, дырки) и mosaic (сетка примитивов rect/circle/triangle/diamond с детерминированным миксом по --seed). SVG всегда валидируется (round-trip через XML-парсер) перед записью, вывод детерминирован. Триггеры: 'png в svg', 'картинка в svg', 'растровое в векторное', 'векторизация', 'конвертнуть в svg', 'trace image', 'convert png to svg', 'vectorize', 'изображение в вектор', 'трассировка изображения'.
正在显示 SKILL.md
| 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.' |
Композитный скилл для качественной мобильной вёрстки и фронтенда: от правил
(отступы, шрифты, якоря, токены) через сборку к многоуровневой проверке с
отладкой каждого элемента — включая меню и навигацию — и финальному аудиту перед
сдачей. Это «дирижёр»: он держит единый воркфлоу и перенаправляет узкие задачи
соседним скиллам (frontend-design-taste, frontend-perfection, /visual-qa,
/frontend), а сам владеет мобильными правилами и чек-листом отладки навигации.
frontend-design-tastefrontend-a11yfrontend-performancefrontend-testingfrontend-perfectionreferences/debug-menu-nav.md, но воркфлоу
всё равно прогоняйте по уровням.Все числа — в references/tokens.md. Кратко:
overflow-x на <html>/<body> недопустим как
постоянное состояние; ловите элемент-нарушитель через scrollWidth > clientWidth).:target и scroll-margin-top равны
высоте sticky-хедера + отступ (обычно scroll-margin-top: calc(var(--header-h) + 16px)).viewport-fit=cover + env(safe-area-inset-*) для нижней панели
(home indicator) и чёлки. Меню/CTA не должны упираться в индикатор.font-display: swap, мобильная тип-шкала на clamp(),
базовый размер ≥ 16px для body (чтобы не зумíло при фокусе поля в iOS).transparent/currentColor.@media (prefers-reduced-motion: reduce).Каждый уровень — отдельная фаза со своим критерием прохода. Не переходите дальше, пока уровень не «зелёный».
: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.min-width.width:100%, height:auto, loading="lazy", decoding="async",
желательно srcset/sizes.px у блоков контента; контейнер — max-width + padding.Прогоняйте реальные вьюпорты: 320, 360, 390, 414, 768. Для каждого:
document.documentElement.scrollWidth <= window.innerWidth
(нет горизонтального скролла);<a>/<button> ≥ 44px (скрипт в references/mobile-checklist.md);document.fonts.ready);env(safe-area-inset-bottom));#id → getBoundingClientRect().top >= headerBottom - 1.Эстетику и «не шаблонный вид» сверяйте через
frontend-design-tasteи/visual-qa. Контраст/порядок заголовков — черезfrontend-perfection.
Самый частый источник багов. Полный проигрыш — в references/debug-menu-nav.md.
Минимум:
aria-expanded синхронен с видимостью; открытие/закрытие по тапу;Esc закрывает;:focus-visible, логичный Tab-порядок;Через frontend-perfection (scripts/audit.js, режим mobile):
| Подзадача | Скилл/команда |
|---|---|
| Палитра, шрифты, «вкус», анти-шаблон | 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 |
aria-expanded, фокус-ловушка, Esc, закрытие по пункту.frontend-design-taste).Если хотя бы один пункт красный — уровень не пройден, возвращаемся к правкам.