Summary
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-codeInstalls into .claude/skills of the current project.
Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →
Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →
On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →
An agent that runs the SEO playbooks that move rankings and ships PRs you control.
Get founding access →Files
SKILL.md
Select a file.
Featured
Connect Claude to +800M contacts, +150M companies. Find & Enrich leads in chat.
Try For Free →Agent, run crypto. Access onchain data & trade routes via 1inch.
Install now →On Capafy, your Skill runs online 24/7 as an agent product, and you get paid every time someone uses it.
Start earning →An agent that runs the SEO playbooks that move rankings and ships PRs you control.
Get founding access →First SeenJun 11, 2026
