Component api design
Skill Dragoon0x/everything-design-taste/skills/component-api-design
A taste system for AI agents. 288 skills, 80 agents, 12 rules, and 8 hooks that turn generic AI output into work with genuine design quality. Anti-slop detection, typography craft, color systems, brand voice, product strategy, and 50+ specialized reviewers across UI, industry, platform, and content domains.
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
- 6 stars6 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.
What its author says it does
Copied from the file, not written here
Designing component APIs, prop interfaces, and developer experience for design systems.
SKILL.md
1.2 KB, 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