responsive-designавтор Seth Hobson

Responsive Design Skill.

Навык для Claude Code и Codex в области UI-дизайна: адаптивные макеты с container queries, fluid type, CSS Grid и mobile-first брейкпоинтами.

Web и UI
UI-код

Скачать OpenDesign Инструкция по использованию

wshobson/agents · plugins/ui-design/skills/responsive-design/SKILL.mdSKILL.md

--- 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. --- ## When to Use This Skill ## Detailed patterns and worked examples ## Best Practices

Метаданные и заголовки разделов считаны из исходного файла 2026-09-14 · 1 989 символов полностью

01 Что делает

Что делает skill responsive-design в Claude Code и Codex

Сводка, рабочий процесс и результаты — всё прочитано из SKILL.md этого skill.

Из SKILL.mdПрочитано 14.09.2026 · не запись выполнения

Словами самого skill

Этот skill реализует современные адаптивные макеты с использованием container queries, флюидной типографики, CSS Grid и стратегий mobile-first breakpoint. Он охватывает адаптивность на уровне компонентов, флюидную типографику и шкалы отступов, сложные макеты на CSS Grid и Flexbox, а также стратегии breakpoint для дизайн-систем. Skill затрагивает адаптивные изображения и медиа, паттерны адаптивной навигации, а также адаптивные таблицы и отображение данных.

Он делает акцент на mobile-first разработке, breakpoint на основе контента, а не устройства, и container queries для адаптации на уровне компонентов. Skill включает рекомендации по touch targets, логическим свойствам для интернационализации и оптимизации производительности за счёт работы с изображениями и lazy loading.

UI-код

Смотрите пример запроса ↗

Как это работает

01
Начинайте с mobile-first
Начните с mobile-стилей как основы, затем постепенно улучшайте их для больших экранов, а не двигайтесь от desktop вниз.
02
Задайте breakpoint на основе контента
Определяйте breakpoint исходя из того, где контенту нужно перестроиться, а не по конкретным размерам устройств.

02 Определите своё применение

Когда использовать навык responsive-design

Используйте скилл responsive-design в Claude Code или Codex, когда задача — UI-дизайн такого типа. Возможности и ограничения ниже взяты из собственного файла скилла.

Хорошо подходит

Реализация адаптивных раскладок mobile-first
Использование container queries для адаптивности на уровне компонентов
Создание гибких шкал типографики и отступов
Проектирование стратегий точек останова для дизайн-систем
Создание адаптивных таблиц и отображения данных

03 Внутри скилла

Правила, которые skill responsive-design даёт Claude Code и Codex

1 конкретные инструкции, значения по умолчанию и ограничения, которые SKILL.md задаёт агенту — часть файла, влияющая на результат.

Оптимизация и Lazy Load
Оптимизируйте изображения для производительности и используйте lazy load для контента, который изначально находится за пределами экрана.

04 Применение

Установите responsive-design в Claude Code или Codex

Одна команда npx skills add, затем первая задача в вашем агенте и чек-лист для результата.

Добавьте responsive-design в Claude Code, Codex или ваш агент

Запустите в своём проекте; установщик спросит, какому агенту его добавить.

Terminal

npx skills add https://github.com/wshobson/agents --skill responsive-design

Общая форма CLI skills для plugins/ui-design/skills/responsive-design/SKILL.md; репозиторий может документировать собственный путь.

Дайте skill первую задачу по дизайну интерфейса

Написано в терминах самого skill; замените части в квадратных скобках своим материалом.

Starter prompt

Build a responsive product card grid that uses container queries to adapt the card layout based on available space. Implement fluid typography for the product titles and descriptions, maintain 44x44px touch targets for all buttons, and use CSS Grid with mobile-first breakpoints. Include responsive product images with proper aspect ratios and lazy loading for cards below the fold.

Источник: составлено по SKILL.md в терминах самого skill.

Проверьте первый результат

Перед принятием результата найдите это в диалоге и файлах:

Результат предоставляется как UI-код, как указывает каталог для этого skill.
Агент называет skill responsive-design в своем плане или протоколе перед получением результата.
Ваш собственный контент, имена и числа остаются неизменными в выводе.

В OpenDesign импортируйте responsive-design по ссылке на его SKILL.md: Plugins → Add → Skill → Import from link, затем выберите его в верхней панели.

Скачать OpenDesign Читать quickstart

05 Открытый исходный код, проверяемость

Источник, лицензия и проверка

Откуда взяты факты на этой странице и когда они были последний раз проверены.

Author: Seth Hobson
Repository: github.com/wshobson/agents Ветка main
Файл skill: plugins/ui-design/skills/responsive-design/SKILL.md Контрольная сумма содержимого записана при проверке; коммит 4236bb9
License: MIT Из LICENSE.
Звёзды репозитория: 39 635 Снимок GitHub сделан 2026-09-14 для всего репозитория wshobson/agents, который содержит 18 skills в этом каталоге. Не является рейтингом или счётчиком использования для responsive-design.
Проверено OpenDesign: 2026-09-14 Исходный файл, путь, текст лицензии и количество звезд были проверены. Не входит в основной комплект OpenDesign (проверено 2026-08-28); живой запуск не был записан на этой странице.

Внутри SKILL.md

Когда использовать этот skillПеречисляет восемь сценариев, включая mobile-first макеты, container queries, гибкую типографику и адаптивные表示 данных
Подробные паттерны и разобранные примерыСсылается на references/details.md для более глубокой документации по паттернам при необходимости
Best PracticesВосемь основных принципов, включая подход mobile-first, контентные брейкпоинты, гибкие значения, container queries и производительность
Частые проблемыСемь распространённых проблем: горизонтальное переполнение, фиксированные ширины, высота вьюпорта и размер touch-таргетов

Собственное описание skill

«Реализуйте современные адаптивные раскладки с использованием container queries, гибкой типографики, CSS Grid и стратегий breakpoint mobile-first. Используйте при построении адаптивных интерфейсов, реализации гибких раскладок или создании адаптивного поведения на уровне компонентов».

Описание из front-matter SKILL.md. Полный файл занимает около 1 989 символов. Прочитайте полный файл на GitHub.

Responsive Design

Запустите responsive-design на реальной задаче UI-дизайна.

Скачайте OpenDesign, импортируйте responsive-design по ссылке на SKILL.md, вставьте промпт выше и прочитайте план перед результатом.

Загрузить OpenDesign Все навыки

Терминал

npx skills add https://github.com/wshobson/agents --skill responsive-design