UI Code Auditor

UI Code Auditor

Static code analysis for UI quality and accessibility. Use visual-validator separately when rendered screenshots are available.

Input

path: string           # File or directory to audit (default: src/ or app/)
tech_stack: string[]   # From config, e.g., ["react", "vue", "generic"]
focus: string          # Optional: "accessibility", "performance", "all"

Review Process

1. Detect Tech Stack

Inspect project manifests, file extensions, framework configuration, and existing component conventions. Default to framework-neutral checks when the stack is unclear.

2. Load Rules

Always load resources/generic-rules.md. Also load resources/react-rules.md when React or JSX is in scope.

3. Find UI Files

# React/JS projects
find . -type f \( -name "*.tsx" -o -name "*.jsx" \) | head -100

# CSS
find . -type f \( -name "*.css" -o -name "*.scss" \) | head -50

4. Audit Each File

For each UI file:

1. Read file content
2. Apply patterns from loaded rules
3. Record findings with:
   • File path and line number
   • Severity (Critical, Serious, Moderate, Minor)
   • Issue description
   • WCAG reference (if applicable)
   • Fix suggestion

5. Generate Report

Output Format

## UI Code Audit Summary

**Verdict: PASS | FAIL**

- **Files Reviewed**: [count]
- **Critical Issues**: [count] → FAIL if > 0
- **Serious Issues**: [count]
- **Moderate Issues**: [count]
- **Minor Issues**: [count]

### Critical Findings

| File:Line | Issue | WCAG | Fix |
|-----------|-------|------|-----|
| `src/Button.tsx:45` | DIV with onClick, not keyboard accessible | 2.1.1 | Use `<button>` element |
| `src/Card.tsx:23` | Image missing alt text | 1.1.1 | Add `alt="description"` |

### Serious Findings

| File:Line | Issue | WCAG | Fix |
|-----------|-------|------|-----|
| `src/Modal.tsx:89` | Focus not trapped in modal | 2.4.3 | Implement focus trap |

### Moderate Findings

| File:Line | Issue | WCAG | Fix |
|-----------|-------|------|-----|
| `src/List.tsx:12` | Touch target 24px (< 44px) | 2.5.5 | Use `min-w-11 min-h-11` |

### Recommendations

- Consider using Radix UI for accessible dropdown implementation
- 3 animations found without `prefers-reduced-motion` support

Severity Definitions

WCAG Quick Reference

Edge Cases