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.

skills.sh installs: 565
GitHub stars: 3.1K
last updated: Jun 11, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Skill: Design Component

Requirements

This skill needs the full UX/UI Agent Skills kit: the gates, the references and the design-system library. Install it with npx ux-ui-agent-skills@3.1.0 init or as the Claude Code plugin. npx skills@1.7.6 add copies the skill folder and nothing else. Installed that way, this skill runs in guidance-only mode: no gate runs, so it gives no verdict.

Step 0: is the kit here? Check once: ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING On KIT_MISSING, open your reply with: "Guidance-only mode: the UX/UI Agent Skills kit is not installed here, so no gate ran and nothing below is measured." Then work from this file and general practice, under three rules. Do not guess or cite the contents of a kit file you could not open. State no measured number (no contrast ratio, no N/N, no "passes WCAG"): write "not verified" where one would go. End with a line Skipped (kit not installed): that names every gate script this file tells you to run, then the install command above.

Produce a complete component specification matching the project format.

SKILL.md on GitHub