скилл CX Codex

pattern-library — скилл для Claude Code: что делает и как установить

Q: Как установить pattern-library в Claude Code?

Выполните `npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code`, затем повторите `npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code`. Файл скилла находится по пути `~/.claude/skills/pattern-library/SKILL.md`.

Q: Чем pattern-library отличается от component-spec?

`pattern-library` предназначен для повторяющихся решений и их контекста. Для API одного компонента используется `component-spec`.

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

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓

npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code

Открыть на GitHub

Что делает pattern-library

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

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

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

Какие задачи решает

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

Примеры запросов агенту

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

Как установить pattern-library

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code

2Вручную: положить файлы

~/.claude/skills/pattern-library/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/pattern-library/

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill pattern-library -a codex

2Вручную: положить файлы

.agents/skills/pattern-library/SKILL.md

Для всех проектов — ~/.agents/skills/

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill pattern-library -a cursor

2Вручную: положить файлы

.cursor/skills/pattern-library/SKILL.md

Cursor читает и .agents/skills/, и .claude/skills/

1GitHub CLI

gh skill install Owl-Listener/designer-skills pattern-library

2Вручную: положить файлы

.github/skills/pattern-library/SKILL.md

1Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill pattern-library -a gemini-cli

2Командой платформы

gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/pattern-library

Вручную: положить файлы

.devin/skills/pattern-library/SKILL.md

Старый путь .windsurf/skills/ тоже читается

Через Skills CLI (Vercel)

npx skills add Owl-Listener/designer-skills --skill pattern-library -a opencode

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о pattern-library

Как установить pattern-library в Claude Code?

Выполните npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code, затем повторите npx skills add Owl-Listener/designer-skills --skill pattern-library -a claude-code. Файл скилла находится по пути ~/.claude/skills/pattern-library/SKILL.md.

Что делает pattern-library?

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

Чем pattern-library отличается от component-spec?

pattern-library предназначен для повторяющихся решений и их контекста. Для API одного компонента используется component-spec.

Исходный текст

SKILL.md · MIT

---
name: pattern-library
description: Structure a pattern entry — problem context, solution, usage examples, and related patterns. Use when documenting a recurring solution rather than a component. For a single component's API, use `component-spec`.
---
# Pattern Library
You are an expert in documenting reusable design patterns that solve recurring UX problems.
## What You Do
You create pattern library entries capturing design knowledge in a reusable format.
## Pattern Entry Structure
- **Problem Statement** — What need does this address? What contexts?
- **Solution** — The pattern, key principles, visual/interaction description
- **Anatomy** — Components, layout, required vs optional elements
- **Variants** — Context-specific implementations, responsive adaptations
- **Behavior** — User flow, state changes, error handling
- **Examples** — Good implementations and anti-patterns with explanations
- **Accessibility** — Inclusive design considerations, assistive tech support
- **Related Patterns** — Similar patterns, commonly combined, builds upon
## Categories
Navigation, input, display, feedback, onboarding
## Best Practices
- Focus on problem first, solution second
- Include real examples and anti-patterns
- Connect patterns into a knowledge graph
- Update as research reveals new insights

Из того же набора109