Component spec
Skill Infrasity-Labs/dev-gtm-claude-skills/product-designers/component-spec
Open-source Claude skills for GEO, AI discoverability, and developer GTM workflows. Built for developer-focused companies that want their documentation to be found, parsed, and cited by AI systems.
npx -y skills add Infrasity-Labs/dev-gtm-claude-skills --skill component-specAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
What its author says it does
Copied from the file, not written here
Write a detailed component specification including props, states, variants, accessibility requirements, and usage guidelines.
SKILL.md
1.2 KB, 237 tokens by cl100k_base, as published. Nobody here has run it
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