# scroll-areas

Скилл учит агента избегать лишней вложенной прокрутки в вёрстке и ограничивать скролл одной осью там, где контейнер действительно нужен.

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

## Что делает

Набор правил для работы с переполнением контента в CSS и компонентах интерфейса. По умолчанию скилл требует отдавать приоритет общей прокрутке страницы вместо изолированных внутренних блоков вроде выпадающих панелей или модальных окон. Если контент не помещается, агент предложит разбивку на страницы, раскрывающиеся аккордеоны или вынос данных на отдельный маршрут.

Когда внутренний скролл неизбежен — например, в боковом меню, широкой таблице или логе чата — правило запрещает двухосевую прокрутку через `overflow: auto`. Контейнер должен перемещаться строго по одной оси с явной связкой `overflow-y: auto` и `overflow-x: hidden` или наоборот. Скилл запрещает перехват нативного скролла и скрытие полос через `scrollbar-width: none`, требуя визуально обрезать крайний элемент для подсказки пользователю.

Инструкции скилла активируются по ключевым словам переполнения и шаблонам путей к файлам стилей и компонентов вроде `components/**` или `design-system/**`.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill scroll-areas -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill scroll-areas -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill scroll-areas -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install dembrandt/dembrandt-skills scroll-areas
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill scroll-areas -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/dembrandt/dembrandt-skills --path skills/scroll-areas
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add dembrandt/dembrandt-skills --skill scroll-areas -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/dembrandt/dembrandt-skills/tree/HEAD/skills/scroll-areas/SKILL.md

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

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

## Похожие
- [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 установок

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

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

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