responsive-design · manutej — скилл для Claude Code: что делает и как установить
Направляет агента верстать интерфейсы по принципу mobile-first с флюидными сетками, CSS Grid и Flexbox. Помогает адаптировать типографику и раскладки под любые экраны.
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-codeЧто делает responsive-design
Скилл задаёт правила мобильной вёрстки с восходящими точками останова через @media (min-width: ...). Ассистент перестаёт нагромождать стили под десктоп с последующей перебивкой через max-width, а начинает с базовой разметки от 320px и расширяет её по мере роста экрана.
Внутри собраны шаблоны для Flexbox и CSS Grid. Разметка задействует именованные области гридов и одномерные цепочки блоков. Инструкции охватывают перестроение навигации и отслеживание типа указателя через медиавыражения hover и pointer.
Использование clamp() и CSS Grid требует современного браузерного окружения. Для устаревших движков ассистенту придётся явно запрашивать резервные стили.
Какие задачи решает
- Сверстать адаптивную шапку с перестроением навигации на смартфонах
- Настроить плавное масштабирование шрифтов и отступов через
clamp() - Разложить двухмерную сетку страницы через именованные области CSS Grid
- Задать стили взаимодействия отдельно для мыши и сенсорных экранов
Примеры запросов агенту
- Перепиши блок навигации на флексбоксах, чтобы меню перестраивалось на смартфонах
- Сделай адаптивную галерею товаров на CSS Grid с колонками от 280px
- Настрой плавный размер заголовков и внешних полей контейнера через функцию clamp
Как установить responsive-design
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code2Вручную: положить файлы
~/.claude/skills/responsive-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/responsive-design/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a codex2Вручную: положить файлы
.agents/skills/responsive-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a cursor2Вручную: положить файлы
.cursor/skills/responsive-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace responsive-design2Вручную: положить файлы
.github/skills/responsive-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/responsive-designВручную: положить файлы
.devin/skills/responsive-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о responsive-design
Как установить responsive-design в Claude Code?
Выполните команду npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code. Также можно разместить файл вручную по пути ~/.claude/skills/responsive-design/SKILL.md.
Что делает скилл responsive-design?
Он обучает ИИ-ассистента создавать интерфейсы от мобильного вида к десктопному, применяя современные возможности CSS вроде Grid, Flexbox и относительных единиц.
Какую стратегию брейкпоинтов использует скилл?
Скилл опирается на мобильные базовые стили без медиазапросов и последующие условия @media (min-width: ...), привязывая точки перехода к контенту или типовым ширинам от 480px до 1536px.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — responsive-design от других авторов.
