Component api design
Skill Dragoon0x/everything-design-taste/skills/component-api-design
Designing component APIs, prop interfaces, and developer experience for design systems.From its SKILL.md
npx -y skills add Dragoon0x/everything-design-taste --skill component-api-designAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 9 stars9 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
SKILL.md
1.2 KB, 224 tokens by cl100k_base, as published. Nobody here has run it
Component API Design
Principles
- Consistent naming: Same prop name means same thing across components
- Sensible defaults: Most common use case needs zero props
- Composition over config: Prefer children/slots over massive prop objects
- Type safety: TypeScript interfaces for all props
- Documentation: Every prop has a description and example
Naming Conventions
| Prop | Type | Convention |
|---|---|---|
| variant | string union | 'primary','secondary','ghost' |
| size | string union | 'sm','md','lg' |
| disabled | boolean | true/false |
| onAction | function | on + PascalCase event |
| className | string | Custom CSS classes |
| children | ReactNode | Component content |
| asChild | boolean | Render as child element |
Anti-Patterns
- Boolean props that control unrelated things
- Props that conflict with each other
- More than 10-12 props (component does too much)
- String props where a union type would be safer
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.