# law-of-continuity

Скилл про закон непрерывности: выравнивание, стрелки и линии задают путь, по которому глаз идёт по интерфейсу. Пригодится при вёрстке форм, каруселей и таймлайнов.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1100 установок · ★ 3103
- Автор: Owl-Listener
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/Owl-Listener/designer-skills/tree/HEAD/ui-design/skills/law-of-continuity/SKILL.md
- Обновлён: 2026-09-05
- HTML: https://affpapa.org/nevibecode/skills/law-of-continuity

## Что делает

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

Внутри — один файл `SKILL.md` с разбором принципа и разделов по применению: выравнивание, направляющие указатели, таймлайны, аффордансы прокрутки и свайпа, разделение групп через разрыв непрерывности. Есть блок про связь с визуальной иерархией: отступ уводит элемент на другую ось, и подчинённость становится видна без типографики. В конце — список практик, включая проверку выравнивания на каждом брейкпоинте: сдвиг в один пиксель рвёт воспринимаемый путь, даже если его не замечают сознательно.

Скилл рассчитан на задачи секвенирования. Для группировки элементов, а не выстраивания порядка, автор отсылает к `law-of-proximity` — держите это в голове, если нужна именно близость, а не линия. Ставится в Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill law-of-continuity -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill law-of-continuity -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill law-of-continuity -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Owl-Listener/designer-skills law-of-continuity
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill law-of-continuity -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/law-of-continuity
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add Owl-Listener/designer-skills --skill law-of-continuity -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/Owl-Listener/designer-skills/tree/HEAD/ui-design/skills/law-of-continuity/SKILL.md

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

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

## Похожие
- [hierarchy](https://affpapa.org/nevibecode/skills/hierarchy.md) — скилл · 606 установок
- [visual-emphasis-and-hierarchy](https://affpapa.org/nevibecode/skills/visual-emphasis-and-hierarchy.md) — скилл · 874 установки
- [hallmark](https://affpapa.org/nevibecode/skills/hallmark.md) — скилл · 70800 установок
- [mies](https://affpapa.org/nevibecode/skills/mies.md) — скилл · 9600 установок
- [frontend-design](https://affpapa.org/nevibecode/skills/cline-frontend-design.md) — скилл · 7300 установок
- [antislop-ui](https://affpapa.org/nevibecode/skills/antislop-ui.md) — скилл · 6400 установок

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

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