component-spec

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`.

2,127
installs: 0 up / 0 down, score 0.00
votes: 3,024
repo stars
Updated: 2 months ago
In the catalog since: 1 Oct 2026
From: owl-listener/designer-skills

Get it through your agent npx skills add owl-listener/designer-skills@component-spec

Skill instructions

Rendered from the published SKILL.md, 20 lines.

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

Overview — Name, description, when to use / not use
Anatomy — Visual breakdown, required vs optional elements
Variants — Size (sm/md/lg), style (primary/secondary/ghost), layout
Props/API — Name, type, default, description, required status
States — Default, hover, focus, active, disabled, loading, error
Behavior — Interactions, animations, responsive behavior, edge cases
Accessibility — ARIA roles, keyboard nav, screen reader, focus management
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

Get it through your agent

Call the Graph-of-Skills MCP server's retrieve_skill_bundle tool and it returns this skill's text inside your budget.

{
  "tool": "retrieve_skill_bundle",
  "arguments": {
    "query": "component-spec"
  }
}

New to this? Set up Graph-of-Skills or get a free key. The text on this page comes from its authors: how skills are sourced and what we check. If none fits your task, your agent can write a skill for your own library. To keep a skill from your own library on a machine, see how to install one of your skills.

Share on X Share on LinkedIn Share on Bluesky Share on Hacker News

Share on Reddit

Source

Source repository owl-listener/designer-skills
Listing on skills.sh

From owl-listener/designer-skills via skills.sh

Related skills

documentation-template
Generate a reusable documentation scaffold for components, patterns, or guidelines. Use when standardising how the system is documented. For the content of one component's spec, use `component-spec`.
2,064 installs
pattern-library
Structure a pattern entry — problem context, solution, usage examples, and related patterns. Use when documenting a recurring solution rather than a component. For a single component's API, use `component-spec`.
2,055 installs
web-component-design
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
13,162 installs
ui-components
UI component library patterns for shadcn/ui and Radix Primitives. Use when building accessible component libraries, customizing shadcn components, using Radix unstyled primitives, or creating design system foundations.
1,503 installs
oo-component-documentation
Create or update standardized object-oriented component documentation using a shared template plus mode-specific guidance for new and existing docs.
1,755 installs

More from owl-listener/designer-skills

presentation-deck
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use `case-study`; for the written argument use `design-rationale`.
3,064 installs
typography-scale
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use `readable-measure`; for judging type on an existing screen use `critique-typography` (visual-critique).
2,554 installs
visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
2,501 installs
illustration-style
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use `icon-system` (design-systems).
2,499 installs
color-system
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use `dark-mode-design`; for chart palettes use `data-visualization`; for multi-brand token architecture use `theming-system` (design-systems).
2,461 installs

Content is provided as published by its creators; you are responsible for how you use it.

To request removal, use the contact form.