# pattern-library

Скилл оформляет повторяющиеся UX-решения как записи паттернов: от проблемы и решения до примеров, доступности и связанных паттернов.

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

## Что делает

\`pattern-library` помогает документировать повторяющиеся UX-проблемы в формате записи паттерна. В ней фиксируются контекст проблемы, решение, состав и размещение элементов, обязательные и необязательные части, варианты для разных контекстов и адаптивных состояний.

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

Для описания API одного компонента этот скилл не подходит: такая задача отнесена к `component-spec`. Это повод проверить тип документа перед началом работы.

## Установка

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

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install Owl-Listener/designer-skills pattern-library
```

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

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

### Claude.ai

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

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

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

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

## Похожие
- [dotnet-design-pattern-review](https://affpapa.org/nevibecode/skills/dotnet-design-pattern-review.md) — скилл · 11609 установок
- [command-pattern](https://affpapa.org/nevibecode/skills/command-pattern.md) — скилл · 645 установок
- [factory-pattern](https://affpapa.org/nevibecode/skills/factory-pattern.md) — скилл · 634 установки
- [ux-design](https://affpapa.org/nevibecode/skills/donchitos-ux-design.md) — скилл · 443 установки
- [impeccable](https://affpapa.org/nevibecode/skills/impeccable.md) — скилл · 361300 установок
- [uizze-ui](https://affpapa.org/nevibecode/skills/uizze-ui.md) — скилл · 144000 установок

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

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

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