references/quick-checklist.md
A supporting file of the frontend-design-review skill.
Quick Checklist
Before approving any UI work:
Design System Compliance
- Component verified in your Figma Design System
- Component implementation checked in your Component Library
- Figma Dev Mode specs followed (spacing, tokens, typography)
- Design tokens used (no hardcoded hex colors or pixel values)
- Token imports verified in code
- All variants/states implemented as designed in Figma
- Spacing measurements match Figma Dev Mode exactly
- Deviations documented with design approval
Aesthetic Quality (especially for new designs)
- Clear conceptual direction (not generic overused fonts and cliched schemes)
- Distinctive typography (avoid overused fonts)
- Cohesive color palette with CSS variables
- Intentional motion (staggered reveals, hover states)
- Visual interest through composition (asymmetry, overlap, grid-breaking)
- Atmosphere through backgrounds (gradients, textures, patterns)
- Implementation complexity matches vision
Frictionless
- Core task completable efficiently (≤3 interactions)
- Single clear primary action per view
Quality Craft
- Uses design system components (verified in Figma)
- Design tokens used (no hardcoded values)
- Distinctive aesthetic (not generic overused fonts/cliched schemes)
- Accessible (Grade C minimum, Grade B ideal)
- Keyboard navigation complete
- Tested in light/dark/high contrast modes
Trustworthy
- AI-generated content has disclaimer
- Error messages are actionable