## Fix: [Issue Title]

### What Needs to Change
[Plain language explanation of the change]

### Step-by-Step Instructions

1. **Find the file**: [Path to file]
2. **Look for**: [What to search for - be specific]
3. **Change it to**: [What it should become]
4. **Why**: [Brief explanation of why this fixes the issue]

### Verification
After making this change:
- [ ] [Check 1]
- [ ] [Check 2]

### If You're Stuck
Tell Claude: "In [file], change [old] to [new] for [issue]"

## Fix: [Issue Title]

### Files to Modify
- `src/components/[Component].tsx`

### Code Changes

\`\`\`diff
- className="bg-[#0F0F0F]"
+ className="bg-[#121210]"
\`\`\`

### Related Files (May Need Updates)
- `tailwind.config.js` (if adding new tokens)
- `src/styles/globals.css` (if using CSS variables)

### Tests
- [ ] Visual regression test
- [ ] Accessibility audit passes

# UI Fix Batch: [Product Name]
Generated: [Date]

## Fixes by Priority

### Critical (Must Fix Now)

#### Fix 1: [Title]
[Instructions or code]

#### Fix 2: [Title]
[Instructions or code]

### Warnings (Fix Soon)

#### Fix 3: [Title]
[Instructions or code]

---

## Implementation Order
1. [Fix 1] - Foundation change
2. [Fix 3] - Depends on Fix 1
3. [Fix 2] - Independent

## Estimated Effort
- Non-coder with instructions: ~[X] hours
- Developer with patches: ~[Y] hours

// Add AI-Generated badge to AI outputs
<div className="relative">
  <AIOutput content={response} />
  <span className="absolute top-2 right-2 text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
    AI-Generated
  </span>
</div>

// Add verification footer
<footer className="text-xs text-gray-500 mt-4 border-t pt-2">
  Generated with Claude | Always verify AI suggestions
</footer>

// Add human approval step
const handleAISuggestion = (suggestion: string) => {
  setShowApprovalDialog(true);
  setPendingSuggestion(suggestion);
  // Never auto-apply
};

// Missing alt text
<img src={src} alt="" />  // ❌
<img src={src} alt="Compliance status chart for Q4 2025" />  // ✅

// Missing form labels
<input type="text" placeholder="Name" />  // ❌
<label>
  <span className="sr-only">Name</span>
  <input type="text" placeholder="Name" />
</label>  // ✅

// Missing focus visible
className="..."  // ❌
className="... focus-visible:ring-2 focus-visible:ring-offset-2"  // ✅

// Insufficient contrast
<p className="text-gray-400">...</p>  // ❌ (may fail 4.5:1)
<p className="text-gray-600">...</p>  // ✅ (usually passes)

// Touch target too small
<button className="p-1">...</button>  // ❌
<button className="p-3 min-h-[44px] min-w-[44px]">...</button>  // ✅

/ui-review → Identifies issues
/ui-fix    → Generates fixes (THIS SKILL)