← All skills

Design component

Design a UI component spec to the house quality bar , anatomy, variants, sizes, the 8 states, token mapping, and accessibility.

Design systemsThientan SoparatMIT

Install

npx degit plugin87/ux-ui-agent-skills/.claude/skills/design-component .claude/skills/design-component

Run it in your project root, then ask your agent for what you want. More detail

What it does

Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.

Straight from the skill's own SKILL.md. This is what your agent reads.