# responsive-design

Направляет агента верстать интерфейсы по принципу mobile-first с флюидными сетками, CSS Grid и Flexbox. Помогает адаптировать типографику и раскладки под любые экраны.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 511 установок · ★ 62
- Автор: manutej
- Лицензия: не указана · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/responsive-design/SKILL.md
- Обновлён: 2026-06-13
- HTML: https://affpapa.org/nevibecode/skills/manutej-responsive-design

## Что делает

Скилл задаёт правила мобильной вёрстки с восходящими точками останова через `@media (min-width: ...)`. Ассистент перестаёт нагромождать стили под десктоп с последующей перебивкой через `max-width`, а начинает с базовой разметки от 320px и расширяет её по мере роста экрана.

Внутри собраны шаблоны для Flexbox и CSS Grid. Разметка задействует именованные области гридов и одномерные цепочки блоков. Инструкции охватывают перестроение навигации и отслеживание типа указателя через медиавыражения `hover` и `pointer`.

Использование `clamp()` и CSS Grid требует современного браузерного окружения. Для устаревших движков ассистенту придётся явно запрашивать резервные стили.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/responsive-design/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/responsive-design/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/responsive-design/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/responsive-design/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install manutej/luxor-claude-marketplace responsive-design
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/responsive-design/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/responsive-design
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/responsive-design/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add manutej/luxor-claude-marketplace --skill responsive-design -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/manutej/luxor-claude-marketplace/tree/HEAD/plugins/luxor-frontend-essentials/skills/responsive-design/SKILL.md

## Когда брать
- Сверстать адаптивную шапку с перестроением навигации на смартфонах
- Настроить плавное масштабирование шрифтов и отступов через `clamp()`
- Разложить двухмерную сетку страницы через именованные области CSS Grid
- Задать стили взаимодействия отдельно для мыши и сенсорных экранов

## Примеры запросов агенту
- Перепиши блок навигации на флексбоксах, чтобы меню перестраивалось на смартфонах
- Сделай адаптивную галерею товаров на CSS Grid с колонками от 280px
- Настрой плавный размер заголовков и внешних полей контейнера через функцию clamp

## Похожие
- [Frontend Responsive Design Standards](https://affpapa.org/nevibecode/skills/frontend-responsive-design-standards.md) — скилл · 1200 установок
- [responsive-web-design](https://affpapa.org/nevibecode/skills/responsive-web-design.md) — скилл · 1100 установок
- [responsive-craft](https://affpapa.org/nevibecode/skills/responsive-craft.md) — скилл · 738 установок
- [responsive-design-system](https://affpapa.org/nevibecode/skills/responsive-design-system.md) — скилл · 343 установки
- [responsive-layout-builder](https://affpapa.org/nevibecode/skills/responsive-layout-builder.md) — скилл · 354 установки
- [tailwindcss-mobile-first](https://affpapa.org/nevibecode/skills/tailwindcss-mobile-first.md) — скилл · 2100 установок

## Другие версии с тем же именем
- [responsive-design · wshobson](https://affpapa.org/nevibecode/skills/responsive-design.md) — 20956 установок
- [responsive-design · owl-listener](https://affpapa.org/nevibecode/skills/owl-listener-responsive-design.md) — 2300 установок
- [responsive-design · mindrally](https://affpapa.org/nevibecode/skills/mindrally-responsive-design.md) — 830 установок
- [responsive-design · akillness](https://affpapa.org/nevibecode/skills/akillness-responsive-design.md) — 478 установок

Из того же набора: [manutej/luxor-claude-marketplace](https://affpapa.org/nevibecode/by/manutej/luxor-claude-marketplace.md) — 65 карточек

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md