component-spec — скилл для Claude Code: спецификация компонента
Скилл описывает один компонент дизайн-системы: анатомию, варианты, состояния, доступность и правила использования. Пригодится, когда библиотека растёт и пора зафиксировать API.
npx skills add Owl-Listener/designer-skills --skill component-spec -a claude-codeЧто делает component-spec
Скилл задаёт структуру спецификации из восьми разделов: обзор с описанием и случаями «когда использовать и когда нет», анатомия с разбором обязательных и опциональных элементов, варианты по размеру и стилю, таблица пропсов с типами и значениями по умолчанию, состояния, поведение, доступность и правила использования с примерами «делай так / не делай так».
Пропсы описываются по имени, типу, значению по умолчанию, описанию и обязательности. Состояния перечислены как default, hover, focus, active, disabled, loading, error. В разделе доступности — ARIA-роли, навигация с клавиатуры, работа со скринридером и управление фокусом. Поведение прописывается отдельно от внешнего вида: анимации, отзывчивость, пограничные случаи.
Автор советует писать текст так, чтобы он годился и дизайнеру, и разработчику, и давать пример на каждый вариант и состояние. Скилл покрывает только один компонент. Для многоразового каркаса документации в описании указан documentation-template, для паттерна «проблема — решение» — pattern-library.
Какие задачи решает
- зафиксировать API компонента до начала вёрстки
- перечислить состояния кнопки вместе с поведением при загрузке и ошибке
- описать навигацию с клавиатуры и управление фокусом
- собрать таблицу пропсов с типами и значениями по умолчанию
- развести варианты компонента по размеру и стилю
Примеры запросов агенту
- Опиши спецификацию компонента Button: пропсы, состояния, варианты
- Сделай component spec для поля ввода с ошибкой и загрузкой
- Разложи анатомию карточки на обязательные и опциональные элементы
Как установить component-spec
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill component-spec -a claude-code2Вручную: положить файлы
~/.claude/skills/component-spec/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/component-spec/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill component-spec -a codex2Вручную: положить файлы
.agents/skills/component-spec/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill component-spec -a cursor2Вручную: положить файлы
.cursor/skills/component-spec/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills component-spec2Вручную: положить файлы
.github/skills/component-spec/SKILL.md1Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill component-spec -a gemini-cli2Командой платформы
gemini skills install https://github.com/Owl-Listener/designer-skills --path design-systems/skills/component-specВручную: положить файлы
.devin/skills/component-spec/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill component-spec -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора109
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о component-spec
Как установить component-spec в Claude?
Выполните npx skills add Owl-Listener/designer-skills --skill component-spec -a claude-code. Файл скилла окажется по пути ~/.claude/skills/component-spec/SKILL.md.
Что делает component-spec?
Собирает полную спецификацию одного компонента: анатомию, варианты, пропсы, состояния, поведение, доступность и правила использования.
Чем component-spec отличается от documentation-template?
component-spec описывает один компонент библиотеки. Для многоразового каркаса документации в описании скилла указан documentation-template, а для паттерна «проблема — решение» — pattern-library.
Исходный текст
SKILL.md · MIT
--- name: component-spec description: Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use `pattern-library`. --- # Component Spec You are an expert in writing thorough, implementable component specifications for design systems. ## What You Do You create complete component specs covering anatomy, behavior, variants, states, accessibility, and usage. ## Specification Structure 1. **Overview** — Name, description, when to use / not use 2. **Anatomy** — Visual breakdown, required vs optional elements 3. **Variants** — Size (sm/md/lg), style (primary/secondary/ghost), layout 4. **Props/API** — Name, type, default, description, required status 5. **States** — Default, hover, focus, active, disabled, loading, error 6. **Behavior** — Interactions, animations, responsive behavior, edge cases 7. **Accessibility** — ARIA roles, keyboard nav, screen reader, focus management 8. **Usage Guidelines** — Do/don't examples, content rules, related components ## Best Practices - Write for both designers and developers - Include examples for every variant and state - Specify behavior, not just appearance - Consider all input methods - Document edge cases explicitly
© Owl-Listener · MIT · Owl-Listener/designer-skills
