responsive-design — скилл для Claude Code: адаптивная вёрстка
Помогает строить адаптивные интерфейсы с mobile-first стилями, container queries и fluid-значениями. Нужен для компонентов и страниц, которые меняются вместе с доступным местом.
/plugin marketplace add wshobson/agents
/plugin install ui-design@claude-code-workflowsЧто делает responsive-design
Скилл направляет агента при создании адаптивной вёрстки: предлагает начинать с мобильных стилей, выбирать брейкпоинты по содержимому и использовать относительные величины для текста и отступов. Он охватывает CSS Grid, Flexbox, responsive images, навигацию, таблицы и медиа.
Для поведения отдельного компонента скилл предлагает container queries, а подробные паттерны лежат в references/details.md. Он также учитывает горизонтальный overflow, фиксированную ширину, проблемы 100vh на мобильных браузерах, растянутые изображения и размер touch targets 44x44px. Его стоит ставить командам, которые регулярно правят CSS под разные экраны; для разовой статичной страницы это лишняя инструкция.
Какие задачи решает
- собрать mobile-first раскладку страницы
- настроить container queries для компонента
- убрать горизонтальный overflow
- подобрать брейкпоинты по содержимому
- сделать типографику и отступы плавными
Примеры запросов агенту
- «Сделай эту страницу mobile-first и проверь горизонтальный overflow.»
- «Перестрой карточку на container queries, чтобы она менялась от ширины контейнера.»
- «Используй CSS Grid для адаптивной таблицы и не растягивай изображения.»
Как установить responsive-design
1Через маркетплейс плагинов
/plugin marketplace add wshobson/agents/plugin install ui-design@claude-code-workflows2Через Skills CLI (Vercel)
npx skills add wshobson/agents --skill responsive-design -a claude-code3Вручную: положить файлы
~/.claude/skills/responsive-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/responsive-design/
1Через Skills CLI (Vercel)
npx skills add wshobson/agents --skill responsive-design -a codex2Вручную: положить файлы
.agents/skills/responsive-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add wshobson/agents --skill responsive-design -a cursor2Вручную: положить файлы
.cursor/skills/responsive-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install wshobson/agents responsive-design2Вручную: положить файлы
.github/skills/responsive-design/SKILL.mdКомандой платформы
gemini skills install https://github.com/wshobson/agents --path plugins/ui-design/skills/responsive-designВручную: положить файлы
.devin/skills/responsive-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Похожие
Вопросы о responsive-design
Как установить responsive-design в Claude Code?
Выполните npx skills add wshobson/agents --skill responsive-design -a claude-code. Файл скилла будет доступен по пути ~/.claude/skills/responsive-design/SKILL.md.
Что делает responsive-design?
Скилл помогает агенту проектировать адаптивные интерфейсы через mobile-first подход, container queries, fluid typography, CSS Grid и Flexbox. Он также покрывает типичные ошибки мобильной вёрстки.
Как responsive-design советует выбирать брейкпоинты?
Брейкпоинты предлагается задавать по содержимому, а не по моделям устройств. Для адаптации отдельных компонентов используются container queries.
Исходный текст
SKILL.md · MIT
--- name: responsive-design description: Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior. --- # Responsive Design Master modern responsive design techniques to create interfaces that adapt seamlessly across all screen sizes and device contexts. ## When to Use This Skill - Implementing mobile-first responsive layouts - Using container queries for component-based responsiveness - Creating fluid typography and spacing scales - Building complex layouts with CSS Grid and Flexbox - Designing breakpoint strategies for design systems - Implementing responsive images and media - Creating adaptive navigation patterns - Building responsive tables and data displays ## Detailed patterns and worked examples Detailed pattern documentation lives in `references/details.md`. Read that file when the navigation tier above is insufficient. ## Best Practices 1. **Mobile-First**: Start with mobile styles, enhance for larger screens 2. **Content Breakpoints**: Set breakpoints based on content, not devices 3. **Fluid Over Fixed**: Use fluid values for typography and spacing 4. **Container Queries**: Use for component-level responsiveness 5. **Test Real Devices**: Simulators don't catch all issues 6. **Performance**: Optimize images, lazy load off-screen content 7. **Touch Targets**: Maintain 44x44px minimum on mobile 8. **Logical Properties**: Use inline/block for internationalization ## Common Issues - **Horizontal Overflow**: Content breaking out of viewport - **Fixed Widths**: Using px instead of relative units - **Viewport Height**: 100vh issues on mobile browsers - **Font Size**: Text too small on mobile - **Touch Targets**: Buttons too small to tap accurately - **Aspect Ratio**: Images squishing or stretching - **Z-Index Stacking**: Overlays breaking on different screens
© Seth Hobson · MIT · wshobson/agents
