mobile-frontend

Solid

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.

AI & Automation 5 stars 0 forks Updated today MIT

Install

View on GitHub

Quality Score: 83/100

Stars 20%
26
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# 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** для любой интерактивной цели (кнопка, ссылка-иконка, пункт ...

Details

Author
bestdeejay-design
Repository
bestdeejay-design/agent-skills
Created
1 months ago
Last Updated
today
Language
Python
License
MIT

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

mobile

Mobile adaptation with hardened rules from real production iterations. Uniform scale factor, preserve composition, no JS→scroll-snap swap, iOS ?v=N cache-bust, text nowrap in collapsed cards. Ends with a headless-browser safety check (text overflow, safe paddings, no horizontal scroll, tap-target sizes) across 320/375/390/414/480/768. Runs only when priority=desktop-first.

2 Updated 3 weeks ago
dkadts
Web & Frontend Solid

frontend-design

Создание высококачественных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл. НЕ используй для нативных мобильных приложений (iOS/Swift/SwiftUI, Android) — для iOS бери скилл ios-development; этот скилл только про веб-UI (браузер).

138 Updated 1 months ago
AnastasiyaW
Web & Frontend Solid

frontend-design

Создание высококач��ственных, визуально выдающихся фронтенд-интерфейсов. Используй ВСЕГДА когда пользователь просит создать веб-страницу, компонент, лендинг, дашборд, UI-кит, форму, карточки, навигацию, анимации, или любой другой веб-интерфейс. Скилл покрывает: HTML/CSS/JS компоненты, React/Vue/Svelte, Tailwind CSS, адаптивный и мобильный дизайн, визуальные стили (glassmorphism, neomorphism, material, flat, градиенты, тёмная тема), интерактивность (drag-and-drop, анимации, hover-эффекты, transitions), верстку (Flexbox, Grid, Container Queries), производительность, доступность (WCAG/ARIA), дизайн-системы и токены. Если пользователь хочет что-то "красивое", "современное", "стильное" в вебе — обязательно используй этот скилл. НЕ используй для нативных мобильных приложений (iOS/Swift/SwiftUI, Android) — для iOS бери скилл ios-development; этот скилл только про веб-UI (браузер).

137 Updated 1 months ago
AnastasiyaW