What is the component-spec skill?
The component-spec skill is a short instruction file in the design-systems plugin of Owl-Listener's designer-skills pack. It makes your agent specify a single library component in eight parts: overview, anatomy, variants, props, states, behavior, accessibility and usage guidelines, written so designers and developers can both build from it.
The component-spec skill lives in the design-systems plugin of Owl-Listener's designer-skills pack. The SKILL.md casts the agent as an expert in thorough, implementable component specifications, and asks for one finished spec per component covering anatomy, behavior, variants, states, accessibility and usage.
Its description draws two boundaries. It is for defining one library component. For a reusable documentation scaffold the description points to documentation-template, and for a problem and solution pattern it points to pattern-library.
The eight sections of a component spec
- Overview: name, description, and when to use or not use the component.
- Anatomy: a visual breakdown, with required and optional elements.
- Variants: size such as sm, md and lg, style such as primary, secondary and ghost, and layout.
- Props and API: name, type, default, description and whether it is required.
- States: default, hover, focus, active, disabled, loading and error.
- Behavior: interactions, animations, responsive behavior and edge cases.
- Accessibility: ARIA roles, keyboard navigation, screen reader and focus management.
- Usage guidelines: do and don't examples, content rules and related components.
What changes in the agent's output
- The spec is written for two readers at once, designers and developers.
- Every variant and state gets an example instead of a general description.
- The spec covers behavior as well as appearance, so edge cases are written down.
- All input methods are considered, not only the mouse.
Who the component-spec skill is for
Best for
- Design system teams defining a button, input, menu or any single library component.
- Handoff where a developer needs props, states and keyboard behavior in one place.
- Defining a library component so its states and keyboard behavior are written down once.
Not for
- Writing a documentation template that many components share.
- Generating the component's code. The skill produces a spec, and the agent builds from it afterwards.
Use it with UiChemy
A finished spec gives a Figma component clear states and variants to match. UiChemy Figma to WordPress converts that design, and Composer then edits the result as real HTML, CSS and JS inside Elementor or Gutenberg. Click Get Started on uichemy.com. Related page: tailwind-design-system.
How to install Component Spec Skill: Write Implementable Component Specs
/plugin marketplace add Owl-Listener/designer-skillsAdd the marketplace
Enter the command above in the agent. It points the agent at the repository, and no plugin installs at this stage. The README's walkthrough is written for Claude Code.
Pick the plugin
Run
/plugin install <name>@designer-skillswith design-systems as the name, or use the Discover tab under /plugin. component-spec is one of the plugin's eleven skills.Gemini CLI route
The README gives a clone to a temporary folder, then a copy of the repository's .gemini/extensions contents into your project's .gemini/extensions folder.
Name one component
Ask for a spec of a single component, such as a button or a select, and say which design system it belongs to.
Check that it loaded
Ask for a spec of one component. The output should run through overview, anatomy, variants, props, states, behavior, accessibility and usage guidelines in that order.
Key features
- Overview firstEach spec opens with the component name, a description and clear guidance on when to use it and when not to.
- Anatomy breakdownThe agent lays out a visual breakdown and marks which elements are required and which are optional.
- Variant matrixSize, style and layout variants are listed, with sm, md and lg sizes and primary, secondary and ghost styles given as the pattern.
- Props tableThe API section lists each prop's name, type, default, description and required status.
- Seven statesDefault, hover, focus, active, disabled, loading and error are each specified, not left to the implementer.
- Behavior rulesInteractions, animations, responsive behavior and edge cases are written out, so appearance is not the only thing specified.
- Accessibility sectionARIA roles, keyboard navigation, screen reader behavior and focus management are part of every spec.
- Usage guidelinesDo and don't examples, content rules and related components close the spec.
- Examples for every caseThe skill's best practices ask for an example for every variant and state, and for documented edge cases.
Frequently asked questions
What is the component-spec skill?
It is a skill in the design-systems plugin of Owl-Listener's designer-skills pack. It instructs an AI agent to write a complete specification for one library component, covering anatomy, variants, props, states, behavior, accessibility and usage rules. The output is meant to be readable by designers and implementable by developers.
How do I install component-spec?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install <name>@designer-skills with design-systems as the name, or tick the plugin on the Discover tab of /plugin. Gemini CLI has its own steps in the README, which copy the repository's .gemini/extensions contents into your project.
What sections does a component spec contain?
Eight, in order: overview, anatomy, variants, props or API, states, behavior, accessibility and usage guidelines. The states list names default, hover, focus, active, disabled, loading and error. The usage section holds do and don't examples, content rules and related components.
Which AI coding agents can use component-spec?
The pack's README is written for Claude Code and Gemini CLI, and says each plugin also works as a Gemini CLI extension. It does not list other agents. The skill itself is plain instructions, so another agent that reads skill folders may work, but the README does not say so.
When should I use component-spec instead of documentation-template?
Use component-spec when you are defining one library component. The skill description says to use documentation-template for a reusable documentation scaffold and pattern-library for a problem and solution pattern. Component-spec produces the content for a single component rather than a template.
Does component-spec generate code for the component?
No. The skill describes what to specify, and the best practices ask for behavior, edge cases and examples for every variant and state. You can hand the finished spec back to the agent and ask it to build the component. Related page: shadcn.
Can component-spec describe an existing component?
The skill is written for defining a library component, and the README does not say how it treats one that already exists. If you try it, give the agent the component's current code or a description, and ask for the eight sections. Review the accessibility and edge case sections carefully against what the component really does.
What license does the component-spec skill use?
The designer-skills repository is MIT licensed according to GitHub. Its README describes 111 design practice skills across nine plugins, and the component-spec folder is part of that set. Related page: design system patterns.