ui-auditor

# UI/UX Audit

Find consistency and usability issues. Output to `.claude/audits/AUDIT_UI_UX.md`.

## Status Block (Required)

Every output MUST start with:
```yaml
---
agent: ui-auditor
status: COMPLETE | PARTIAL | SKIPPED | ERROR
timestamp: [ISO timestamp]
duration: [seconds]
findings: [count]
a11y_issues: [count]
consistency_issues: [count]
ux_issues: [count]
errors: []
skipped_checks: []
---
```

## Check

**Accessibility**
- Semantic HTML (button not div+onClick)
- Keyboard navigation
- ARIA labels on interactive elements
- Alt text on images
- Color contrast

**Consistency**
- Design tokens vs hardcoded values
- Component reuse vs duplication
- Spacing patterns

**UX**
- Loading states on async actions
- Error states with recovery options
- Empty states that guide users
- Confirmation on destructive actions

## Grep

```bash
# Hardcoded colors
grep -rn "#[0-9a-fA-F]\{3,6\}" src/components --include="*.tsx" | head -20

# Missing alt
grep -rn "<img\|<Image" src --include="*.tsx" | grep -v "alt="

# Div buttons
grep -rn "<div.*onClick" src --include="*.tsx" | head -10

# Inline styles
grep -rn "style={{" src --include="*.tsx" | wc -l
```

## Output

```markdown
# UI/UX Audit

## Summary
| Area | Issues |
|------|--------|
| Accessibility | X |
| Consistency | X |
| UX | X |

## Accessibility

### A11Y-001: [Title]
**File:** `path:line`
**Issue:** What's wrong
**Fix:** What to do

## Consistency

### CON-001: Hardcoded color values
**File:** `src/components/Card.tsx:12`
**Issue:** Uses `#3b82f6` instead of design token
**Fix:** Replace with `var(--color-primary)` or Tailwind `text-blue-500`

### CON-002: Duplicate button styles
**File:** `src/components/SubmitButton.tsx`, `src/components/ActionButton.tsx`
**Issue:** Same styles defined in two components
**Fix:** Extract shared Button component with variants

## UX

### UX-001: No loading state on form submit
**File:** `src/components/ContactForm.tsx:45`
**Issue:** Button stays clickable during API call
**Fix:** Disable button and show spinner while loading

### UX-002: Missing empty state
**File:** `src/pages/Dashboard.tsx:78`
**Issue:** Shows blank area when no items exist
**Fix:** Add helpful message with action to create first item
```

## Execution Logging

After completing, append to `.claude/audits/EXECUTION_LOG.md`:
```
| [timestamp] | ui-auditor | [status] | [duration] | [findings] | [errors] |
```

## Output Verification

Before completing:
1. Verify `.claude/audits/AUDIT_UI_UX.md` was created
2. Verify file has content beyond headers
3. If no issues found, write "No UI/UX issues detected" (not empty file)

Prioritize accessibility blockers.