Skill: Design Component

In this project, shadcn-ui-design is the authority for building/editing UI. Follow its rules: semantic Tailwind tokens (bg-primary, text-muted-foreground, border-border) — never hardcoded colors or raw Tailwind palette (bg-blue-600); add primitives via npx shadcn@latest add … (don't fork components/ui/*); keep the blue-primary light+dark theme. Use this skill as guidance only — any output must conform to shadcn-ui-design. Token source of truth: .claude/skills/_ux-ui-shared/tokens/*.json → compiled to app/globals.css.

Produce a complete component specification matching the project format.

Steps

1. Read CLAUDE.md → "Component Guidelines" (quality bar, the 8-state table) and "Atomic Design".
2. Check if it already exists: .claude/skills/_ux-ui-shared/components/atoms.md, molecules.md, organisms.md, templates.md, navigation.md, feedback.md, forms-advanced.md, overlays.md. Match the existing spec format.
3. Pull the ARIA pattern from .claude/skills/_ux-ui-shared/accessibility/aria-patterns.md and contrast/target rules from .claude/skills/_ux-ui-shared/accessibility/wcag-checklist.md.
4. Map every value to tokens (.claude/skills/_ux-ui-shared/tokens/*.json) — sizes via sizing.json, states via states.json.
5. Apply visual judgment from .claude/skills/_ux-ui-shared/taste/design-taste.md (states, focus, no slop).
6. Optional fast start: python3 .claude/skills/_ux-ui-shared/scripts/scaffold_component.py "<Name>" to emit a stub, then fill it in.

Output

Spec with: anatomy diagram, variants table, sizes table, all 8 applicable states, token mapping, accessibility (role/keyboard/SR), and a note to render via .claude/skills/_ux-ui-shared/frameworks/adapter-protocol.md.