Design Review Async Io Pierre Mcp Server

---
name: design-review
description: Review UI components for design system compliance, accessibility, and visual consistency
user-invocable: true
---

# 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:

```bash
# 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.