Component Spec
SkillAI & modelsWrite a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the Component Spec skill
What this skill tells your AI
The instructions your AI receives, as published by infrasity-labs/dev-gtm-claude-skills in .claude/skills/component-spec/SKILL.md and read by ahel’s review.
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
Signals
- GitHub stars
- 124
- Forks
- 10
- Last commit
- Jun 2026
Advanced
- Catalog kind
- skill
- Gateway key
component-spec- Source
- github.com/infrasity-labs/dev-gtm-claude-skills