BMAD-METHOD/bmad-agent/checklists/v0-component-quality-checklist.md

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)