SKILL.md
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