Component Spec
- 961 installs
- 1.9k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
component-spec is a Claude Code design-system skill that writes thorough component specifications covering props, states, variants, and accessibility for developers and designers implementing shared UI libraries.
About
component-spec is an owl-listener designer-skills workflow for complete, implementable component specifications in design systems. Each spec includes overview (name, when to use), anatomy with required versus optional elements, variants for size and style, props/API with types and defaults, plus accessibility and usage guidelines. Developers and designers reach for component-spec when a shared button, modal, or input needs a single source of truth before React, Angular, or Figma handoff.
- Generates 8-section component specification template
- Covers anatomy, variants, props, states, behavior, accessibility and usage guidelines
- Produces specs written for both designers and developers
- Explicitly documents edge cases, interactions and all input methods
- Includes do/don't examples and related component references
Component Spec by the numbers
- 961 all-time installs (skills.sh)
- +42 installs in the week ending Jul 29, 2026 (Skillselion tracking)
- Ranked #414 of 1,888 Design & UI/UX skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 31, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill component-specAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 961 |
|---|---|
| repo stars | ★ 1.9k |
| Security audit | 3 / 3 scanners passed |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you write design system component specifications?
Produce thorough, shared component specifications that both designers and developers can implement from without ambiguity.
Who is it for?
Design-system leads documenting UI components for parallel designer and engineer implementation.
Skip if: One-off page mockups without reusable components or backend API schema design.
When should I use this skill?
User asks for component spec, design-system documentation, props API for a UI component, or accessibility requirements for variants.
What you get
Component spec document with anatomy, variants, props API table, interaction states, accessibility requirements, and usage guidelines.
- Component specification markdown
- Props API table
- Accessibility checklist
By the numbers
- Specification structure lists 4 core sections: overview, anatomy, variants, and props/API
Files
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
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.698k164k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.486k29.4k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst382k15.8k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k470
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.284k66.9k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.282k109kHow it compares
Use component-spec for per-component design-system docs; use theming-system when the task is multi-brand token architecture instead of single-component behavior.
FAQ
What sections does component-spec include?
component-spec covers overview, anatomy, variants, props/API, accessibility requirements, and usage guidelines so designers and developers share one implementable contract.
How does component-spec document component variants?
component-spec records size variants such as sm, md, and lg plus style variants like primary, secondary, and ghost with clear behavioral and visual differences.
Is Component Spec safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.