component-spec
Write a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.
npx skills add Owl-Listener/designer-skills --skill component-spec --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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
- What You Do
- Specification Structure
- Best Practices
What does the component-spec skill do?
Write a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill component-spec --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.