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.