What is the design-component skill?
The design-component skill is a SKILL.md in the plugin87/ux-ui-agent-skills kit. It has the agent produce a spec-level design for a button, input, tabs, toast or modal: anatomy, variants, sizes, eight states, token mapping and accessibility. It reads the kit's token and ARIA files and runs contrast and axe gates.
The design-component skill lives in the plugin87/ux-ui-agent-skills repository, a kit of design tokens, rules, scripts and runnable skills. Its job is narrow: design a UI component to a spec before or alongside the code.
The SKILL.md names the components it expects, including button, input, tabs, toast, combobox, date picker and modal. For framework code, it hands off to a sibling skill called design-code instead.
What the spec contains
- An anatomy diagram and a variants table.
- A sizes table drawn from the kit's sizing tokens.
- Every applicable state of the eight: default, hover, focus, active, disabled, loading, error and selected.
- A token mapping, so each value points at a token rather than a hardcoded number.
- Accessibility notes covering role, keyboard behavior and screen reader behavior.
How it keeps the spec honest
The skill asks for a states harness, one HTML file rendering each variant in each state. It then expects the agent to run the contrast, axe and render scripts and report their real output, in light and in dark.
Passing gates are not treated as proof. The skill tells the agent to screenshot the harness and look at it, because a checkbox that never toggles or an off-center glyph can pass every contrast check.
Who the design-component skill is for
Best for
- Teams documenting a component library who want one repeatable spec format, matched to the existing atoms, molecules and organisms files.
- Agent users who keep getting components with a nice resting state and broken hover, focus or loading behavior.
- Anyone who needs contrast, ARIA and overflow checks run rather than assumed.
Not for
- Installing only the skill folder. Its first step checks for the kit's tokens folder and stops with a message if the kit is missing.
- Whole pages or dashboards. For layout review of a built page, see ui-design-review.
- Choosing a visual direction or brand. The skill applies the kit's own taste rules, which you would have to override.
Use it with UiChemy
A component spec stays in the design layer. If your finished components live in Figma, UiChemy Figma to WordPress turns the frames into editable pages. Read atomic design basics first, then click Get Started on uichemy.com.
How to install Design Component Skill: Component Specs with Eight States
/plugin marketplace add plugin87/ux-ui-agent-skillsAdd the marketplace
In Claude Code, run
/plugin marketplace add plugin87/ux-ui-agent-skills.Install the plugin
Run
/plugin install ux-ui-agent-skills@ux-ui-agent-skills. The README says this gives you 25 skills and a design-critic agent, and design-component is among the ones the model reaches for on its own.Keep the kit with the skill
The skill reads tokens, accessibility notes and scripts from the kit. SKILL.md points to
npx ux-ui-agent-skills initor the plugin install if only the skill folder was installed.Start a new session if needed
The README says to start a new session if the skills do not show up straight away. Then ask for a component, for example a notification with all states and accessibility.
Check that it loaded
Ask for a spec of a button or toast. The agent should print anatomy, variants, sizes and the applicable states, then run the gate scripts on a harness. If it reports the kit as missing, install the full plugin.
Key features
- Kit check as step zeroBefore anything else the skill lists the kit's tokens folder. If it is missing, the skill says so, points to the init command or plugin install, and stops instead of guessing at files it cannot open.
- Six step spec workflowRead the component quality bar, check whether the component already exists, pull the ARIA pattern, map values to tokens, apply the kit's taste rules, and optionally scaffold a stub with a Python script.
- Eight state tableEvery applicable state is specified, with loading marked aria-busy, error marked aria-invalid, and selected marked aria-pressed or aria-selected.
- Existing spec formats reusedThe agent checks the kit's atoms, molecules, organisms, templates, navigation, feedback, forms-advanced and overlays files, so a new spec matches the house format.
- States harness and scripted gatesverify_states, axe_audit and measure_render check contrast and ARIA across every variant and state. Overlays also run verify_focustrap. Each must pass in light and dark.
- Render and lookThe skill lists what gates miss: toggles that do not toggle, glyphs that are off center, and a checkmark and dash with mismatched stroke weights. It asks for screenshots with transitions disabled.
- Responsive checkA verify_responsive script loads each harness at 280, 320 and 414 pixels and fails on horizontal overflow. The skill lists four common causes and their fixes.
- Tokenized motionDurations and easings are tokens. A panel that opens must animate its height, with a grid-template-rows transition, and honor prefers-reduced-motion.
- Layout and icon rulesUse auto-fit rather than auto-fill for card grids, avoid empty dashboards, and reference verbatim lucide icons from a sprite instead of hand-drawing paths.
Frequently asked questions
What is the design-component skill?
It is a skill in the plugin87/ux-ui-agent-skills repository. It guides an AI coding agent to design a UI component at the spec level, with anatomy, variants, sizes, eight states, token mapping and accessibility, and to verify the result with scripted contrast and axe checks.
How do I install design-component?
Run /plugin marketplace add plugin87/ux-ui-agent-skills and then /plugin install ux-ui-agent-skills@ux-ui-agent-skills. The skill needs the rest of the kit because it reads tokens and scripts from it, so installing the skill folder alone leaves it stopping at its first check.
Does design-component write framework code?
No. The SKILL.md says that for generating framework code you should use design-code. This skill ends with a spec and a note to render it through the kit's adapter protocol, so code generation is a separate step.
What are the eight states?
Default, hover, focus, active, disabled, loading, error and selected. The skill marks loading with aria-busy, error with aria-invalid, and selected with aria-pressed or aria-selected. It asks for every variant in every applicable state to be rendered in one harness and checked.
Which AI coding agents can use the design-component skill?
The README is written for Claude Code, with a plugin install and an MCP route for other clients, and it describes the kit as a pure instruction and knowledge layer. The repository does not list other agents by name, so check an agent's skill support before relying on it.
What does it need installed to run the gates?
The skill calls node scripts and a Python scaffold script from the kit, plus Playwright with system Chrome for screenshots. Those come with the kit's scripts folder, so the full plugin or init install matters more than the single skill folder.
How does it differ from design-tokens and design-review?
Tokens defines the values, component design uses them in a spec, and review scores a finished screen. See ui-design-review for audits, and use atomic design fundamentals when you need help deciding what counts as an atom or a molecule.