79 lines
2.6 KiB
Markdown
79 lines
2.6 KiB
Markdown
# v0 Component Quality Checklist
|
|
|
|
## Design Consistency
|
|
- [ ] Follows established design system patterns
|
|
- [ ] Color palette matches brand guidelines
|
|
- [ ] Typography scales appropriately
|
|
- [ ] Spacing follows design tokens
|
|
- [ ] Icons are consistent with design system
|
|
- [ ] Visual hierarchy is clear and intentional
|
|
- [ ] Component variants are visually consistent
|
|
- [ ] Animations and transitions are consistent with design system
|
|
|
|
## Code Quality
|
|
- [ ] Component is properly typed (TypeScript)
|
|
- [ ] Props are well-documented
|
|
- [ ] Component handles edge cases gracefully
|
|
- [ ] Performance optimized (memo, callbacks, etc.)
|
|
- [ ] No console errors or warnings
|
|
- [ ] No unused variables or imports
|
|
- [ ] Code follows project conventions
|
|
- [ ] Component is properly tested
|
|
|
|
## Accessibility
|
|
- [ ] Semantic HTML structure
|
|
- [ ] Proper ARIA labels and roles
|
|
- [ ] Keyboard navigation support
|
|
- [ ] Focus management implemented
|
|
- [ ] Screen reader compatibility
|
|
- [ ] Color contrast meets WCAG standards
|
|
- [ ] Text is resizable
|
|
- [ ] Interactive elements have appropriate hit areas
|
|
- [ ] Motion can be reduced/disabled if necessary
|
|
|
|
## Responsive Design
|
|
- [ ] Mobile-first approach
|
|
- [ ] Breakpoint behavior tested
|
|
- [ ] Touch-friendly interaction areas
|
|
- [ ] Content reflows appropriately
|
|
- [ ] No horizontal overflow on small screens
|
|
- [ ] Images scale appropriately
|
|
- [ ] Text remains readable at all sizes
|
|
- [ ] Interactive elements remain usable at all sizes
|
|
|
|
## State Management
|
|
- [ ] All component states are properly handled
|
|
- [ ] Loading states are implemented
|
|
- [ ] Error states are implemented
|
|
- [ ] Empty states are implemented
|
|
- [ ] State transitions are smooth
|
|
- [ ] State is preserved when appropriate
|
|
- [ ] State changes are visually indicated
|
|
|
|
## Performance
|
|
- [ ] Renders efficiently
|
|
- [ ] Avoids unnecessary re-renders
|
|
- [ ] Optimized for initial load time
|
|
- [ ] Lazy loads resources when appropriate
|
|
- [ ] Uses appropriate image formats and sizes
|
|
- [ ] Animations are performant
|
|
- [ ] Large lists are virtualized if necessary
|
|
|
|
## Integration
|
|
- [ ] Imports/exports properly configured
|
|
- [ ] Dependencies clearly documented
|
|
- [ ] Integration examples provided
|
|
- [ ] Storybook story created (if applicable)
|
|
- [ ] Works with existing components
|
|
- [ ] Follows project folder structure
|
|
- [ ] Properly bundled and tree-shakeable
|
|
|
|
## Documentation
|
|
- [ ] Props documented with types and descriptions
|
|
- [ ] Usage examples provided
|
|
- [ ] Edge cases and limitations documented
|
|
- [ ] Accessibility features documented
|
|
- [ ] Visual examples of all states and variants
|
|
- [ ] Installation and import instructions
|
|
- [ ] Changelog maintained (if applicable)
|