Skip to content
alyn
Owl-Listener

Component Spec skill

Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use `pattern-library`.

$npx skills add Owl-Listener/designer-skills --skill component-spec
View this skill on GitHubOwl-Listener/designer-skills/design-systems/skills/component-spec/SKILL.md
Pack stars
3,314
Pack installs
237k
Alyn Score
60/99
Updated
2 months ago
License
MIT
– views – installs via Alyn

Owl-Listener

Component Spec

Coding Design

Install Component Spec

Pick your agent. Every command is ready to paste.

$npx skills add Owl-Listener/designer-skills --skill component-spec

The open skills CLI detects your agents (Claude Code, Cursor, Codex and 70+ more) and installs to the right folder. Add -g to install globally.

01

Install it

Run the command above, or upload the folder in Claude.

02

Ask naturally

Describe the task. Your agent loads component-spec when the request matches its description.

03

Name it if needed

If it does not trigger, say “use the component-spec skill”. In Codex, type $component-spec.

The skill itself

SKILL.md

FolderGitHub

Component Spec

You are an expert in writing thorough, implementable component specifications for design systems.

What You Do

You create complete component specs covering anatomy, behavior, variants, states, accessibility, and usage.

Specification Structure

  1. Overview — Name, description, when to use / not use
  2. Anatomy — Visual breakdown, required vs optional elements
  3. Variants — Size (sm/md/lg), style (primary/secondary/ghost), layout
  4. Props/API — Name, type, default, description, required status
  5. States — Default, hover, focus, active, disabled, loading, error
  6. Behavior — Interactions, animations, responsive behavior, edge cases
  7. Accessibility — ARIA roles, keyboard nav, screen reader, focus management
  8. Usage Guidelines — Do/don't examples, content rules, related components

Best Practices

  • Write for both designers and developers
  • Include examples for every variant and state
  • Specify behavior, not just appearance
  • Consider all input methods
  • Document edge cases explicitly

Tips for Component Spec

  • • Start a fresh session after installing so your agent picks up the new skill.
  • • It is part of a pack with 30 skills. Install only the ones you need with --skill to keep triggers precise.
  • • If two skills overlap, mention the one you want by name.

Questions about Component Spec

What does the Component Spec skill do?

Specify one component — props, states, variants, accessibility, and usage rules. Use when defining a library component. For the reusable doc scaffold use `documentation-template`; for a problem-solution pattern use `pattern-library`.

How do I install Component Spec?

Run "npx skills add Owl-Listener/designer-skills --skill component-spec" in your project. The skills CLI installs it for Claude Code, Cursor, Codex and 70+ other agents. In Claude on the web, upload the skill folder as a ZIP under Customize > Skills.

Does Component Spec work in Cursor and Codex?

Yes. Component Spec uses the open SKILL.md format, so it works in Claude Code, Claude, Cursor, OpenAI Codex, Gemini CLI, GitHub Copilot and other agents that support agent skills.

Is Component Spec free?

Component Spec is open source on GitHub under the MIT license. It is free to install; check the license before commercial use.

Who made Component Spec?

Component Spec is published by Owl-Listener in the Owl-Listener/designer-skills repository, together with 29 other skills.

Similar skills. From other creators.