Review UI

Review the following files for **{DOMAIN}** compliance:

**Files to review:**
{FILE_LIST}

**Reference standard:**
.claude/skills/ui-design-fundamentals/{REFERENCE_FILE}

**Review criteria from {DOMAIN}:**
{CRITERIA_SUMMARY}

**Your task:**
1. Read each file and identify {DOMAIN}-related patterns
2. Compare against the reference standard
3. List issues found with:
   - Severity (Critical/Warning/Suggestion)
   - Location (file:line or component name)
   - Issue description
   - Recommended fix
4. Note any exemplary patterns worth preserving

**Output format:**
## {DOMAIN} Review

### Critical Issues
- ...

### Warnings
- ...

### Suggestions
- ...

### Exemplary Patterns
- ...

/review-ui <scope>
       │
       ▼
┌──────────────────────┐
│  1. Identify files   │
│     to review        │
└──────────────────────┘
       │
       ▼
┌──────────────────────────────────────────────────────────────┐
│  2. Dispatch parallel bulletproof-frontend-developer agents  │
├──────────────────────────────────────────────────────────────┤
│  Task 1: Grid & Spacing review                               │
│  Task 2: Typography review                                   │
│  Task 3: Colors review                                       │
│  Task 4: Buttons review                                      │
│  Task 5: Forms review                                        │
│  Task 6: Cards review                                        │
│  Task 7: Navigation review                                   │
│  Task 8: Hero Sections review (if applicable)                │
│  Task 9: Modals/Dropdowns review (if applicable)             │
│  Task 10: Search review (if applicable)                      │
│  Task 11: Shadows & Depth review                             │
│  Task 12: Pricing review (if applicable)                     │
│  Task 13: Style Consistency review                           │
└──────────────────────────────────────────────────────────────┘
       │
       ▼
┌──────────────────────┐
│  3. Collect results  │
│     from all agents  │
└──────────────────────┘
       │
       ▼
┌──────────────────────┐
│  4. Compile unified  │
│     review report    │
└──────────────────────┘

## UI Review Summary: {SCOPE}

**Files Reviewed:** X files
**Review Domains:** X domains (Y applicable, Z not applicable)
**Total Issues:** X (Y critical, Z warnings, W suggestions)

### Critical Issues (Fix Immediately)
1. [Colors] Contrast ratio 2.1:1 on `.btn--secondary` text (requires 4.5:1)
2. [Buttons] Touch target 32px on mobile nav (requires 44px minimum)

### Top 5 Priority Fixes
1. ...
2. ...

### Exemplary Patterns
- [Typography] Consistent type scale using CSS custom properties
- [Cards] Proper BEM naming and hover states

## Detailed Review by Domain

### Grid & Spacing
**Status:** ⚠️ 2 warnings, 3 suggestions

**Warnings:**
- `card.css:15` - Padding 12px breaks 8pt grid (use 8px or 16px)
- `layout.css:42` - Inconsistent section gaps (64px vs 72px)

**Suggestions:**
- Consider container queries for card grid
- ...

---

### Typography
**Status:** ✅ 1 suggestion

**Suggestions:**
- Add `text-wrap: balance` to headings

---

[... continues for each domain ...]

# Focus on specific domains only
/review-ui resources/css/buttons.css --domains=buttons,colors,accessibility

# Skip certain domains
/review-ui resources/views/components/ --skip=pricing,hero

# Critical issues only
/review-ui resources/css/ --severity=critical

# Generate fix suggestions with code
/review-ui resources/css/ --with-fixes

.claude/skills/ui-design-fundamentals/
├── SKILL.md                    # Overview and core principles
├── grid-and-spacing.md         # 8pt grid, layouts, white space
├── typography.md               # Type scales, hierarchy, fonts
├── colors.md                   # WCAG contrast, palettes, dark mode
├── buttons.md                  # Anatomy, states, CTAs
├── forms.md                    # Labels, validation, inputs
├── cards.md                    # Anatomy, consistency, types
├── navigation.md               # Nav bars, mobile, breadcrumbs
├── hero-sections.md            # Above fold, headlines, CTAs
├── modals-and-dropdowns.md     # Dialogs, dropdowns, accordions
├── search.md                   # Search bars, autocomplete
├── pricing.md                  # Pricing sections, psychology
├── shadows-and-depth.md        # Elevation, shadows, gradients
└── style-guides.md             # Tokens, documentation, naming

User: /review-ui resources/views/components/landing/

Claude: Starting UI review of landing components...

**Scope identified:** 8 files
- how-it-works.blade.php
- resources.blade.php
- hero.blade.php
- pricing.blade.php
- testimonials.blade.php
- features.blade.php
- cta-banner.blade.php
- footer.blade.php

**Applicable domains:** Grid, Typography, Colors, Buttons, Cards, Hero, Navigation, Pricing, Shadows, Style Consistency

**Dispatching 10 parallel review agents...**

[Agents complete reviews in parallel]

## UI Review Summary: Landing Components

**Files Reviewed:** 8 Blade templates + associated CSS
**Review Domains:** 10 domains applied
**Total Issues:** 12 (3 critical, 5 warnings, 4 suggestions)

### Critical Issues (Fix Immediately)

1. **[Colors]** `hero.blade.php` - CTA button text contrast is 3.8:1 (requires 4.5:1)
   - Location: `.hero__cta` with `color: #7c8db0` on `background: #4f46e5`
   - Fix: Change text to `#ffffff` for 8.1:1 contrast

2. **[Buttons]** `pricing.blade.php` - "Get Started" button is 36px height on mobile
   - Location: `.pricing-card__cta`
   - Fix: Add `min-height: 44px` for touch target compliance

3. **[Forms]** `cta-banner.blade.php` - Email input has no visible label
   - Location: `.cta-banner__input`
   - Fix: Add `<label>` element or `aria-label` attribute

### Top 5 Priority Fixes
1. Fix CTA button contrast in hero section
2. Increase touch targets on pricing buttons
3. Add labels to form inputs
4. Standardize section padding to 8pt grid
5. Add focus-visible states to all interactive elements

[... detailed findings by domain ...]