Frontend Responsive Design Standards — скилл для Claude Code
Скилл задаёт агенту правила mobile-first вёрстки: брейкпоинты, относительные единицы, тач-цели и приоритет контента на мобильных.
npx skills add am-will/codex-skills --skill frontend-responsive-design-standards -a claude-code
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a claude-codeЧто делает Frontend Responsive Design Standards
Скилл описывает, как агенту писать адаптивные интерфейсы. Внутри — набор правил и примеров кода: сначала мобильный макет, потом расширение под большие экраны. Агент получает чёткие ориентиры по медиазапросам, флексбоксу и гриду, относительным единицам вместо фиксированных пикселей.
Отдельно прописаны тач-цели: кнопки не меньше 44x44px, отступы между интерактивными элементами, минимальная высота полей ввода. Есть раздел про типографику — базовый размер 16px, межстрочный интервал, длина строки через max-width: 65ch. Примеры даны и на чистом CSS, и на классах Tailwind, так что агент подстроится под стек проекта.
Скилл требует сначала проверить брейкпоинты, которые уже есть в кодовой базе, и не вводить произвольные значения вроде 850px. Это стоит держать в голове: если в проекте своя сетка, агент будет опираться на неё, а не на типовые шкалы Tailwind или Bootstrap.
Какие задачи решает
- переписать десктопный макет на mobile-first
- подобрать брейкпоинты под существующую сетку проекта
- увеличить кнопки и поля ввода до размеров, удобных для пальца
- заменить фиксированные пиксели на rem и проценты
- вынести основной контент вперёд, а второстепенный свернуть на мобильном
Примеры запросов агенту
- свёрстай карточку товара mobile-first, начни с одной колонки
- проверь тач-цели в форме подписки и поправь, если меньше 44px
- переведи типографику заголовков на clamp вместо фиксированных размеров
Как установить Frontend Responsive Design Standards
1Через Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-design-standards -a claude-codenpx skills add am-will/codex-skills --skill frontend-responsive-ui -a claude-code2Вручную: положить файлы
~/.claude/skills/frontend-responsive-ui/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/frontend-responsive-ui/
1Через Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a codex2Вручную: положить файлы
.agents/skills/frontend-responsive-ui/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a cursor2Вручную: положить файлы
.cursor/skills/frontend-responsive-ui/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install am-will/codex-skills frontend-responsive-ui2Вручную: положить файлы
.github/skills/frontend-responsive-ui/SKILL.md1Через Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a gemini-cli2Командой платформы
gemini skills install https://github.com/am-will/codex-skills --path skills/frontend-responsive-uiВручную: положить файлы
.devin/skills/frontend-responsive-ui/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add am-will/codex-skills --skill frontend-responsive-ui -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора10
Похожие
Рядом в теме «Фронтенд и UI»
Всё по теме «Фронтенд и UI» →Вопросы о Frontend Responsive Design Standards
Как установить Frontend Responsive Design Standards в Claude?
Через CLI скиллов: npx skills add am-will/codex-skills --skill frontend-responsive-design-standards -a claude-code. После установки файл скилла лежит в ~/.claude/skills/frontend-responsive-ui/SKILL.md.
Что делает этот скилл?
Задаёт агенту стандарты адаптивной вёрстки: mobile-first порядок стилей, единые брейкпоинты, относительные единицы, тач-цели от 44px и читаемая типографика.
Скилл подойдёт, если в проекте Tailwind?
Да, в примерах есть классы Tailwind и шкала его брейкпоинтов от sm до 2xl. Но скилл требует свериться с определениями брейкпоинтов, которые уже есть в проекте.
