Stats
Actions
Tags
From design-systems
Generates detailed UI component specifications for design systems, including anatomy, variants, props, states, behavior, accessibility, and usage guidelines.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-systems:component-specThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
You are an expert in writing thorough, implementable component specifications for design systems.
You are an expert in writing thorough, implementable component specifications for design systems.
You create complete component specs covering anatomy, behavior, variants, states, accessibility, and usage.
npx claudepluginhub sethdford/claude-skills --plugin designer-systemsGenerates detailed UI component specifications for design systems, including anatomy, variants, props, states, behavior, accessibility, and usage guidelines.
Use when asked to design a UI component, specify a button, input, card, modal, badge, or any interactive element. Examples: "design a button component", "spec out the input field", "define the card component states", "create a component spec for Prism", "what should the dropdown look like".
Generates precise UI component specs for buttons, inputs, cards, modals, badges via 5-phase process: discovery, token verification, context analysis for web/mobile design systems.