Writes complete design-system component specifications covering anatomy, variants, props, states, behavior, accessibility and usage.
- What it does
- Guides an agent through producing a full component specification for a design system library. It defines an eight-part structure: overview, anatomy, variants, props/API, states, behavior, accessibility and usage guidelines. It also lists best practices such as writing for both designers and developers, giving examples for every variant and state, and documenting edge cases explicitly. The output is a written specification document rather than code or a visual artifact.
- When to use it
- Use it when defining or documenting a single reusable library component and a structured, implementable spec is needed. It suits design-system work where props, states, variants and accessibility must be spelled out for both designers and developers.
- Requirements
- No tools, packages, runtimes or credentials are required; it is instructions only and ships no scripts.
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
- 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
