About component-spec
component-spec is a skill for designers and developers creating implementable design-system component specifications. It covers structure, behavior, accessibility, and usage guidance.
Key features
- 01Component anatomy and variants
- 02Props and API documentation
- 03Interaction and state specifications
- 04Accessibility and usage guidelines
- 05Examples and edge-case coverage
Use cases
- 01Documenting a new design-system component
- 02Aligning designers and developers on behavior
- 03Specifying component accessibility and states
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