Design Component

When you need a component spec that actually ships, not a half-baked sketch. This walks through anatomy, variants, the full eight-state table (default, hover, focus, active, disabled, loading, error, selected), token mapping, and ARIA patterns before a single line of code. The source material is opinionated: it includes contrast/accessibility gate scripts you must run, a verified custom checkbox pattern to avoid the "looks different in every file" bug, responsive checks at 280px, and a blunt reminder that passing automated gates doesn't mean your UI looks right. You still have to render it, screenshot it, and fix the geometry. Pair this with design-code when you're ready to generate framework implementations. Useful if your design system has actual standards and you're tired of re-documenting the same button three different ways.

Install to Claude Code

npx -y skills add plugin87/ux-ui-agent-skills --skill design-component --agent claude-code