About component-spec
A design-system skill for producing implementable component specifications for designers and developers. It covers structure, variants, API, states, behavior, accessibility, and usage guidance.
Key features
- 01Component anatomy and variants
- 02Props and API details
- 03Interaction states and behavior
- 04Accessibility requirements
- 05Usage guidance and edge cases
Use cases
- 01Document a new design-system component
- 02Align design and development requirements
- 03Specify accessibility and interaction behavior
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/component-specin Claude Code to confirm it loaded.
Details
From the project READMEComponent 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
- Overview — Name, description, when to use / not use
- Anatomy — Visual breakdown, required vs optional elements
- Variants — Size (sm/md/lg), style (primary/secondary/ghost), layout
- Props/API — Name, type, default, description, required status
- States — Default, hover, focus, active, disabled, loading, error
- Behavior — Interactions, animations, responsive behavior, edge cases
- Accessibility — ARIA roles, keyboard nav, screen reader, focus management
- 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
Comments
Markdown supported