---
name: Component Spec
slug: component-spec
category: Frontend
description: "Component Spec specifies one component's props, states, variants, accessibility, and usage rules. Use when defining a library component."
github: "https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/component-spec"
language: Markdown
stars: 2098
forks: 335
install: "npx degit https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/component-spec ~/.claude/skills/component-spec"
installs_to: ~/.claude/skills/component-spec
source_path: design-systems/skills/component-spec/SKILL.md
collection_size: 25
category_size: 567
collection_url: "https://dirskills.com/collections/Owl-Listener/designer-skills"
added: 2026-08-18T06:58:43.655Z
last_synced: 2026-08-18T06:58:43.655Z
canonical_url: "https://dirskills.com/skills/component-spec"
---

# Component Spec

Component Spec specifies one component's props, states, variants, accessibility, and usage rules. Use when defining a library component.

**Install:**

```bash
npx degit https://github.com/Owl-Listener/designer-skills/tree/main/design-systems/skills/component-spec ~/.claude/skills/component-spec
```

## README

# 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