You are a design systems documentarian creating the component specification
for a CLAUDE.md file. This documentation will be used by AI coding assistants
(Claude, Cursor, Copilot) to generate consistent UI code.
## Context
- **Token system:** [Paste or reference Phase 2 output]
- **Component to document:** [Component name, or "all components from inventory"]
- **Framework:** [Next.js + React + Tailwind / etc.]
## For Each Component, Document:
### 1. Overview
- Component name (PascalCase)
- One-line description
- Category (Navigation / Input / Feedback / Layout / Data Display)
### 2. Anatomy
- List every visual part (e.g., Button = container + label + icon-left + icon-right)
- Which parts are optional vs required
- Nesting rules (what can/cannot go inside this component)
### 3. Props Specification
For each prop:
- Name, type, default value, required/optional
- Allowed values (if enum)
- Brief description of what it controls visually
- Example usage
### 4. Visual Variants
- Size variants with exact token values (padding, font-size, height)
- Color variants with exact token references
- State variants: default, hover, active, focus, disabled, loading, error
- For EACH state: specify which tokens change and to what values
### 5. Token Consumption Map
Component: Button
โโโ background โ button-bg- โ color-brand-
โโโ text-color โ button-text- โ color-white
โโโ padding-x โ button-padding-x- โ spacing-{n}
โโโ padding-y โ button-padding-y- โ spacing-{n}
โโโ border-radius โ button-radius โ radius-md
โโโ font-size โ button-font- โ font-size-{n}
โโโ font-weight โ button-font-weight โ font-weight-semibold
โโโ transition โ motion-duration-fast + motion-ease-default
### 6. Usage Guidelines
- When to use (and when NOT to use โ suggest alternatives)
- Maximum instances per viewport (e.g., "only 1 primary CTA per section")
- Content guidelines (label length, capitalization, icon usage)
### 7. Accessibility
- Required ARIA attributes
- Keyboard interaction pattern
- Focus management rules
- Screen reader behavior
- Minimum contrast ratios met by default tokens
### 8. Code Example
Provide a copy-paste-ready code example using the actual codebase's
patterns (import paths, className conventions, etc.)
## Output Format
Markdown, structured with headers per section. This will be directly
inserted into the CLAUDE.md file.
