# responsiveness-check

Гоняет страницу по ширинам вьюпорта в одной браузерной сессии, снимает скриншоты и показывает, где ломается раскладка.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1800 установок · ★ 1075
- Автор: jezweb
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/jezweb/claude-skills/tree/HEAD/plugins/dev-tools/skills/responsiveness-check/SKILL.md
- Обновлён: 2026-10-09
- HTML: https://affpapa.org/nevibecode/skills/responsiveness-check

## Что делает

Скилл открывает URL в браузере и меняет ширину окна по точкам 320, 375, 768, 1024, 1280, 1440, 1920 и 2560 px, оставляя сессию одну. На каждой ширине снимается скриншот верхней части страницы, а при большой длине — и то, что ниже. Потом соседние ширины сравниваются между собой.

Смысл в переходах. Скилл помечает, где число колонок меняется, где полное меню превращается в гамбургер, где появляется или исчезает боковая панель. К каждой находке прилагается диапазон ширин, так что видно, какую точку в CSS править. Отдельно проверяются горизонтальный перелив содержимого, обрезка текста, масштаб картинок, цели нажатия меньше 44 px и видимость главной кнопки без прокрутки.

Есть режимы: обычная проверка на 8 ширинах, прогон каждые 160 px от 320 до 2560 и разбор заданного диапазона с шагом 80 px. Для прогона и для нескольких URL сразу скилл попросит подтвердить. Ему нужен браузерный инструмент: playwright-cli, Playwright MCP или Chrome MCP. Без одного из них скилл просто сообщит об этом. Доступность (ARIA, семантика, контраст) он не трогает — для этого в наборе есть ux-audit.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add jezweb/claude-skills --skill responsiveness-check -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add jezweb/claude-skills --skill responsiveness-check -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add jezweb/claude-skills --skill responsiveness-check -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install jezweb/claude-skills responsiveness-check
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add jezweb/claude-skills --skill responsiveness-check -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/jezweb/claude-skills --path plugins/dev-tools/skills/responsiveness-check
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add jezweb/claude-skills --skill responsiveness-check -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/jezweb/claude-skills/tree/HEAD/plugins/dev-tools/skills/responsiveness-check/SKILL.md

## Когда брать
- найти точную ширину, на которой ломается сетка
- поймать горизонтальный перелив на узком экране
- проверить, что меню переключается в гамбургер без поломанного состояния
- убедиться, что кнопка действия видна без прокрутки на каждой ширине
- собрать отчёт по вёрстке сразу для нескольких страниц

## Примеры запросов агенту
- Проверь отзывчивость вёрстки на https://example.com, начиная с 320 px
- Сделай прогон по всем брейкпоинтам и скажи, где именно ломается раскладка
- Проверь диапазон между 768 и 1024 px и покажи скриншоты

## Похожие
- [frontend-design](https://affpapa.org/nevibecode/skills/frontend-design.md) — скилл · 1025790 установок
- [design-taste-frontend](https://affpapa.org/nevibecode/skills/design-taste-frontend.md) — скилл · 678700 установок
- [prototype](https://affpapa.org/nevibecode/skills/prototype.md) — скилл · 986201 установка
- [hyperframes](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes.md) — скилл · 1200000 установок
- [hyperframes-cli](https://affpapa.org/nevibecode/skills/heygen-com-hyperframes-cli.md) — скилл · 1300000 установок
- [webapp-testing](https://affpapa.org/nevibecode/skills/webapp-testing.md) — скилл · 186758 установок

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

_Часть страницы не вошла по размеру — она есть в HTML-версии._

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