mobile-responsiveness — скилл для Claude Code: обзор и установка
Скилл помогает создавать адаптивные интерфейсы по принципу mobile-first, настраивать брейкпоинты, жесты смахивания и мобильное меню.
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a claude-codeЧто делает mobile-responsiveness
Скилл даёт готовые паттерны адаптивной вёрстки для веб-приложений. В него входят базовые контрольные точки для чистого CSS и классов Tailwind, расчёт плавающей типографики через функцию clamp(), а также учёт безопасных зон экрана safe-area-inset для устройств с вырезами.
Для интерфейсной логики скилл предлагает React-компоненты мобильной навигации со шторкой, хук useMediaQuery и обработку жестов свайпа через нативные события onTouchStart и onTouchEnd. Это избавляет от лишних внешних библиотек жестов, но требует ручной передачи колбэков для смахивания.
Все шаблоны сразу ориентированы на экраны смартфонов: стили пишутся без медиазапросов по умолчанию, а десктопные размеры подключаются через правила с min-width.
Какие задачи решает
- настроить базовую мобильную вёрстку с контрольными точками в Tailwind и CSS
- добавить адаптивное меню-гамбургер со шторкой и фоновой подложкой
- реализовать распознавание жестов свайпа на чистом React без сторонних библиотек
- адаптировать отступы интерфейса под экранные вырезы смартфонов
Примеры запросов агенту
- Сделай адаптивное меню для мобильных устройств с подложкой и кнопкой-гамбургером
- Настрой плавный размер шрифта для заголовков через функцию clamp
- Добавь обработку свайпов влево и вправо для карточки на React
Как установить mobile-responsiveness
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a claude-code2Вручную: положить файлы
~/.claude/skills/mobile-responsiveness/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mobile-responsiveness/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a codex2Вручную: положить файлы
.agents/skills/mobile-responsiveness/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a cursor2Вручную: положить файлы
.cursor/skills/mobile-responsiveness/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install hoodini/ai-agents-skills mobile-responsiveness2Вручную: положить файлы
.github/skills/mobile-responsiveness/SKILL.md1Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a gemini-cli2Командой платформы
gemini skills install https://github.com/hoodini/ai-agents-skills --path skills/mobile-responsivenessВручную: положить файлы
.devin/skills/mobile-responsiveness/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о mobile-responsiveness
Как установить mobile-responsiveness в Claude Code?
Выполните в терминале команду npx skills add hoodini/ai-agents-skills --skill mobile-responsiveness -a claude-code.
Что делает скилл mobile-responsiveness?
Он снабжает ИИ-агента сниппетами для mobile-first разработки: брейкпоинтами для CSS и Tailwind, хуком useMediaQuery, навигационным меню и компонентом свайпа.
Как скилл учитывает вырезы и полосу навигации на смартфонах?
Скилл использует метатег с параметром viewport-fit=cover и подставляет отступы через переменные env(safe-area-inset-*) в CSS.
