Design Review

Design Review

Perform a comprehensive design system review of the frontend changes.

Review Scope

Analyze files in:

• frontend/src/components/ - React components
• frontend/src/index.css - Component CSS definitions
• templates/ - OAuth HTML templates (if modified)

Review Checklist

1. Component Usage Compliance

Search for anti-patterns in changed files:

# Find raw button elements (should use <Button>)
grep -r "<button" frontend/src/components/ --include="*.tsx" | grep -v "// allowed"

# Find raw div cards (should use <Card>)
grep -rE "className=\"[^\"]*border[^\"]*rounded" frontend/src/components/ --include="*.tsx"

# Find custom spinners (should use pierre-spinner)
grep -r "animate-spin" frontend/src/components/ --include="*.tsx"

# Find raw hex colors (should use design tokens)
grep -rE "bg-\[#|text-\[#|border-\[#" frontend/src/components/ --include="*.tsx"

# Find non-pierre colors
grep -rE "(bg|text|border)-(red|green|blue|yellow|purple|gray)-[0-9]" frontend/src/components/ --include="*.tsx" | grep -v "pierre-"

2. CSS Completeness

Verify all component variants have CSS definitions:

• Check Badge.tsx variants against .badge-* classes in index.css
• Check Button.tsx variants against .btn-* classes in index.css

3. Accessibility Audit

• Verify focus states use .focus-ring utility
• Check for missing ARIA labels on icon buttons
• Verify color contrast meets WCAG 2.1 AA (4.5:1)
• Ensure touch targets are at least 44x44px

4. Visual Consistency

• Verify consistent spacing from Tailwind scale
• Check typography follows design system
• Verify gradients use gradient-pierre or pillar gradients
• Check loading states use pierre-spinner

Output Format

=== Pierre Design System Review ===

📁 Files Analyzed: [count]

== Component Compliance ==
✅/❌ Button usage: [details]
✅/❌ Card usage: [details]
✅/❌ Badge usage: [details]
✅/❌ Loading states: [details]
✅/❌ Color tokens: [details]

== Accessibility ==
✅/❌ Focus states: [details]
✅/❌ ARIA labels: [details]
✅/❌ Contrast ratios: [details]

== CSS Completeness ==
✅/❌ All variants defined: [details]

== Issues Found ==
1. [file:line] - [issue description]
2. [file:line] - [issue description]

== Recommendations ==
- [specific improvement with code example]

== Verdict ==
[PASS / NEEDS WORK - X issues to address]

After Review

If issues are found, provide specific code fixes following the patterns in .claude/skills/frontend-design/SKILL.md.

Run this review after any frontend changes before committing.