mobile-design · manutej — скилл для Claude Code: мобильный UX и жесты
Скилл для мобильного интерфейса: тач-цели, жесты, зоны большого пальца, безопасные области и адаптив под маленькие экраны.
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a claude-codeЧто делает mobile-design
Скилл подключается, когда вы верстаете мобильный интерфейс или адаптируете существующий. Внутри — правила мобильного UX: размеры тач-целей, отступы между ними, зоны досягаемости большим пальцем, поведение навигации. Плюс работа с вьюпортом и safe area под вырез и домашний индикатор.
Материал разложен по темам: мобильный подход против десктопного, тач-взаимодействия, брейкпоинты, мета-тег вьюпорта. Примеры кода даны на CSS, HTML и React Native, так что скилл пригодится и в вебе, и в нативных приложениях на iOS и Android. Есть разбор одиночного тапа с визуальным откликом и предупреждение про двойной тап и зум на iOS — это повод проверить свои кнопки, если они меньше 48 пикселей.
Скилл ставится из маркетплейса manutej/luxor-claude-marketplace через npx skills add, для GitHub Copilot есть отдельная команда gh skill install. Ничего дополнительного устанавливать не нужно: это набор инструкций в SKILL.md, который читает агент.
Какие задачи решает
- подобрать размер кнопок и отступы под палец
- разложить главное действие в зоне досягаемости одной рукой
- убрать случайный зум по двойному тапу на iOS
- учесть вырез и домашний индикатор через safe area
- переписать десктопную вёрстку под мобильный подход
Примеры запросов агенту
- Проверь мою форму по правилам mobile-design: хватает ли тач-целей и отступов
- Перепиши этот CSS на mobile-first, как советует скилл mobile-design
- Добавь safe area для шапки и футера по mobile-design
Как установить mobile-design
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a claude-code2Вручную: положить файлы
~/.claude/skills/mobile-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/mobile-design/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a codex2Вручную: положить файлы
.agents/skills/mobile-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a cursor2Вручную: положить файлы
.cursor/skills/mobile-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace mobile-design2Вручную: положить файлы
.github/skills/mobile-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/mobile-designВручную: положить файлы
.devin/skills/mobile-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора31
Другие версии mobile-design
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о mobile-design
Как установить mobile-design в Claude?
Выполните npx skills add manutej/luxor-claude-marketplace --skill mobile-design -a claude-code. Скилл появится в ~/.claude/skills/mobile-design/SKILL.md.
Что делает скилл mobile-design?
Даёт агенту правила мобильного интерфейса: тач-цели, жесты, зоны большого пальца, навигация, вьюпорт и safe area. Агент применяет их, когда вы правите мобильную вёрстку или нативное приложение.
Для каких платформ подходит mobile-design?
Ставится в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Примеры внутри покрывают веб, PWA и React Native.
