designer-skills/design-systems/commands/create-component.md

18 lines
979 B
Markdown

---
description: Scaffold a full component specification from a name or description.
argument-hint: "[component name, e.g., 'date picker' or 'notification banner']"
---
# /create-component
Generate a comprehensive component specification.
## Steps
1. **Research** — Understand purpose and common implementations.
2. **Anatomy** — Break down parts using `component-spec` skill.
3. **Variants** — Define size, style, layout variants.
4. **States** — Map interactive states using `component-spec` skill.
5. **Tokens** — Identify consumed tokens using `design-token` skill.
6. **Accessibility** — Specify ARIA, keyboard, screen reader using `accessibility-audit` skill.
7. **Naming** — Follow conventions using `naming-convention` skill.
8. **Documentation** — Structure using `documentation-template` skill.
## Output
Complete spec: overview, anatomy, props/API, variants, states, accessibility, usage guidelines, tokens.
Consider following up with `/audit-system`.