Component Spec Writer

Use this skill before generating component code. Agents produce better components when the interface, states, and constraints are defined first.

Process

1. Define the component purpose and where it appears.
2. Classify it as primitive, composed feature component, layout component, or page-level pattern.
3. Define variants, sizes, visual states, interaction states, and data states.
4. Define props/inputs, including controlled vs uncontrolled behavior if relevant.
5. Define slots and composition rules.
6. Define accessibility behavior: semantics, keyboard interaction, focus management, ARIA only when needed, target size, reduced motion.
7. Define responsive behavior and token usage expectations.
8. Write acceptance criteria for implementation and review.

Output format

## Component specification: [Name]