# Component Spec

Specify one component, props, states, variants, accessibility, and usage rules.

- Repository: https://github.com/Owl-Listener/designer-skills (3196 stars)
- Category: Design
- License: MIT
- Last updated: 2026-09-05
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Owl-Listener/designer-skills --skill component-spec -g -a claude-code -y`
Codex: `npx skills add Owl-Listener/designer-skills --skill component-spec -g -a codex -y`
Cursor: `npx skills add Owl-Listener/designer-skills --skill component-spec -g -a cursor -y`
Gemini CLI: `npx skills add Owl-Listener/designer-skills --skill component-spec -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add Owl-Listener/designer-skills`

## 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`.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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