Claude Skill MartBrowse skillsQuick linesLearn by videoTerminal guideWhat is a Skill?
 
← Back to list

Design Component Spec Builder

Writes house-quality UI component specs — anatomy, variants, the 8 states, token mapping, and gated accessibility checks.

Design & UIAdvanced★ 877⑂ 91AI score 9/10Last updated: Aug 26, 2026

What it does

  • Produces a full component spec: anatomy diagram, variants table, sizes table, and all 8 states (default, hover, focus, active, disabled, loading, error, selected).
  • Maps every value to design tokens (tokens/*.json, sizing.json, states.json) and pulls the right ARIA pattern, keyboard model, and screen-reader naming.
  • Forces a real states harness plus gate runs: verify_states.mjs (contrast), axe_audit.mjs (ARIA/name/role), measure_render.mjs, verify_responsive.mjs, and verify_focustrap.mjs for overlays — in both light and dark.
  • Requires visual inspection via Playwright + system Chrome screenshots: does the control actually toggle, are glyphs centered, are stroke weights consistent across files.
  • Bundles hard-won rules for responsive (no sideways scroll at 280/320/414px), tokenized motion and smooth-height accordions, auto-fit card grids, and verbatim lucide icon sprites.

Who it's for

  • Design-system owners and frontend engineers standardizing component documentation.
  • Teams that must hit WCAG contrast/target rules and stay theme-stable in dark mode.
  • Anyone tired of UI that passes automated checks but is visibly or functionally broken.

Example uses

  1. "Spec out a combobox" → variants/sizes/8-state tables with ARIA combobox pattern and token mapping.
  2. "Our checkbox looks thin in forms but heavy in the data table" → applies the verified single-pattern custom checkbox and byte-identical reuse rule.
  3. "Ship a modal spec" → harness plus focus-trap, axe, and contrast gate output before it's called done.

· · · Install guide · · ·

Try it now, no install

Paste this into Claude to use the skill without installing anything.

Read the instructions in this file and follow them to help me:
https://raw.githubusercontent.com/plugin87/ux-ui-agent-skills/HEAD/.claude/skills/design-component/SKILL.md

What I want: (describe your task here)

If Claude can't open the link, open it yourself and paste the contents instead.

↓ If it works for you, download the ZIP below and install it. Then it runs on its own — no pasting each time.

Install in the Claude app (no terminal)
  1. Download the ZIP with the button below.
  2. In Claude, open Settings → Capabilities and turn on 'Code execution and file creation'. (one time)
  3. Go to Customize → Skills → + → 'Upload a skill' and upload the ZIP.
↓ Download ZIP
Install in Claude Code

Let Claude do it — paste this into Claude Code

Install the skill I found on Claude Skill Mart.
Copy the .claude/skills/design-component folder from the GitHub repo plugin87/ux-ui-agent-skills into my ~/.claude/skills/design-component/.
When it's done, tell me in one line what this skill can do.

Install with a command instead

git clone https://github.com/plugin87/ux-ui-agent-skills.git && mkdir -p ~/.claude/skills && cp -r ux-ui-agent-skills/.claude/skills/design-component ~/.claude/skills/

⚠ This is a third-party skill. Check the source repository before installing.

  1. Open a terminal.
  2. Clone the repo: git clone https://github.com/plugin87/ux-ui-agent-skills.git
  3. Create the skills folder: mkdir -p ~/.claude/skills
  4. Copy the skill: cp -r ux-ui-agent-skills/.claude/skills/design-component ~/.claude/skills/
  5. The skill references sibling rules/, tokens/, scripts/, and examples/ directories — keep the cloned repo inside your project or copy those folders too.
  6. To run the verification gates, install Node.js, Chrome, and npm i -D playwright @axe-core/playwright.
  7. Restart Claude Code and ask something like "design a button component spec" to trigger it.
View source on GitHub ↗