🔥 UI/UX Roast Skill

🔥 UI/​UX Roast Skill

Brutally honest UI/​UX critique with multi-perspective analysis and iterative improvement.

Command Syntax

/​roast [mode] [target] [options]

# Modes
screen <target>     # Single screen analysis (default)
flow <target>       # Multi-screen user journey
audit               # Full application review

# Options
--iterations=<1-10> # Roast cycles (default: 3)
--focus=<area>      # Priority: a11y|conversion|usability|visual|implementation
--output=<path>     # Output directory (default: reports/​roast/)
--fix=<mode>        # Fix handling: auto|report|ask (default: ask)

Examples

/​roast screen login                     # Roast login screen
/​roast screen settings --focus=a11y     # Focus on accessibility
/​roast flow checkout --iterations=5     # 5-iteration checkout flow
/​roast flow onboarding --fix=auto       # Auto-fix issues found
/​roast audit                            # Full app audit

Execution Workflow

1. Immediate Start

Do NOT ask questions upfront. Apply smart defaults and begin immediately.

🔥 ROAST SESSION STARTED
├─ Mode: screen
├─ Target: login
├─ Iterations: 3
├─ Focus: balanced
└─ Output: reports/​roast/

2. Screenshot Capture

Auto-detect screenshot method:

📸 Capturing screenshot...
├─ Xcode MCP: [✓ found | ✗ not found]
├─ Playwright MCP: [✓ found | ✗ not found]
└─ Using: [xcode | playwright | manual upload]

Detection priority:

1. mcp__xcodebuildmcp__screenshot → iOS/​macOS
2. mcp__playwright__browser_take_screenshot → Web
3. Request user upload → Fallback

CRITICAL: Always specify the output path explicitly!

// First, ensure directory exists
Bash: mkdir -p reports/​roast/​screenshots

// Playwright MCP - specify filename parameter
mcp__playwright__browser_take_screenshot({
  type: "png",
  filename: "reports/​roast/​screenshots/[target]_[iteration].png"
})

// Xcode MCP - specify path parameter
mcp__xcodebuildmcp__screenshot({
  path: "reports/​roast/​screenshots/[target]_[iteration].png"
})

Without explicit path, screenshots go to wrong location (e.g., .playwright-mcp/).

3. Parallel Analysis with Progress

Show real-time progress:

🔥 Roasting: login (1/​3)
├─ 📸 Screenshot ✓
├─ 🎨 Designer: analyzing...
├─ 💻 Developer: analyzing...
├─ 👤 User: analyzing...
├─ ♿ A11y: analyzing...
└─ 📈 Marketing: analyzing...

Launch agents in parallel:

// All 5 agents run simultaneously
Task(subagent_type="claude-roaster:roaster-designer", prompt="...")
Task(subagent_type="claude-roaster:roaster-developer", prompt="...")
Task(subagent_type="claude-roaster:roaster-user", prompt="...")
Task(subagent_type="claude-roaster:roaster-a11y", prompt="...")
Task(subagent_type="claude-roaster:roaster-marketing", prompt="...")

Update as each completes:

├─ 🎨 Designer: ✓ 3 issues
├─ 💻 Developer: ✓ 2 issues
├─ 👤 User: ✓ 4 issues
├─ ♿ A11y: ✓ 5 issues (2 critical!)
└─ 📈 Marketing: ✓ 2 issues

4. Results Summary

Display in terminal before asking about fixes:

🔥 ROAST RESULTS (Iteration 1/​3)

Found 16 issues:
├─ 🔴 Critical: 2
├─ 🟠 Major: 6
└─ 🟡 Minor: 8

Top Critical Issues:
1. Missing form labels - add aria-label to inputs
2. Contrast ratio 2.1:1 - increase to 4.5:1 minimum

📄 Full report: reports/​roast/​roast_login_1.md

5. Fix Decision (After Results)

Ask ONLY after showing results:

How should we handle these 16 issues?

[1] Auto-fix critical & major (8 fixes)
[2] Fix all issues (16 fixes)
[3] Cherry-pick fixes
[4] Report only (no changes)

6. Fix Implementation

If fixes chosen:

🔧 Implementing fixes...
├─ [1/​8] Adding aria-labels... ✓
├─ [2/​8] Fixing contrast... ✓
├─ [3/​8] Increasing touch targets... ✓
...
└─ ✓ Complete

📸 Capturing updated screenshot...

7. Next Iteration

Iteration 2/​3 starting...
[Repeat steps 2-6]

8. Final Summary

🔥 FINAL ROAST SUMMARY

Session Complete!
├─ Iterations: 3
├─ Issues found: 24
├─ Issues fixed: 18
└─ Resolution: 75%

Score Improvement:
| Category      | Before | After | Δ    |
|---------------|--------|-------|------|
| Visual        | 4/​10   | 8/​10  | +4   |
| Usability     | 5/​10   | 9/​10  | +4   |
| Accessibility | 3/​10   | 8/​10  | +5   |
| Overall       | 4/​10   | 8/​10  | +4   |

📄 reports/​roast/​roast_login_final.md

---

Mode-Specific Behavior

Screen Mode

Single screen, multiple iterations:

/​roast screen login --iterations=3

Iteration 1: Capture → Analyze → Report → Fix?
Iteration 2: Capture → Analyze → Report → Fix?
Iteration 3: Capture → Analyze → Final Report

Flow Mode

Multiple screens, analyze journey:

/​roast flow checkout

🗺️ Flow: checkout (5 steps)
├─ [1/​5] Cart → 📸 analyzing...
├─ [2/​5] Shipping → 📸 analyzing...
├─ [3/​5] Payment → 📸 analyzing...
├─ [4/​5] Review → 📸 analyzing...
└─ [5/​5] Confirmation → 📸 analyzing...

Cross-screen checks:
├─ Visual consistency
├─ Navigation clarity
├─ Progress indication
└─ Drop-off risk points

Audit Mode

Auto-detect and roast all critical screens:

/​roast audit

🔍 Scanning for critical screens...
├─ Login ✓
├─ Dashboard ✓
├─ Settings ✓
├─ Checkout ✓
└─ Profile ✓

Roasting 5 screens (3 iterations each)...

---

Agent Configuration

With --focus option:

• Focused agent: 1.5x weight
• Other agents: 0.5x weight

---

Output Structure

reports/​roast/
├─ roast_[target]_1.md
├─ roast_[target]_2.md
├─ roast_[target]_final.md
└─ screenshots/
   ├─ [target]_1.png
   ├─ [target]_2.png
   └─ [target]_final.png

---

Report Format

# 🔥 Roast Report: [Target] - Iteration [N]

**Mode:** screen | **Focus:** balanced | **Date:** 2024-01-15

![Screenshot](screenshots/login_1.png)

## The Verdict

[Brutal 2-3 sentence summary]

## Issues by Severity

### 🔴 Critical (2)
| Issue | Agent | Fix |
|-------|-------|-----|
| Missing labels | A11y | Add aria-label="Email" |
| Low contrast | Designer | Change #999 to #595959 |

### 🟠 Major (6)
...

### 🟡 Minor (8)
...

## Agent Deep Dives

### 🎨 Designer
[Full analysis]

### ♿ A11y Expert
[Full analysis]

...

## Quick Wins
- [ ] Fix 1 (< 2 min)
- [ ] Fix 2 (< 2 min)

## Scores
| Category | Score |
|----------|-------|
| Visual | 4/​10 |
| Usability | 5/​10 |
| Accessibility | 3/​10 |
| Overall | 4/​10 |

---

Voice Guidelines

1. Brutal but fair - Harsh critique, always with solutions
2. Specific values - "#2563eb", "48px", "font-weight: 600"
3. Actionable fixes - Every issue has a concrete fix
4. Fast start - Begin immediately, ask questions later
5. Progress visibility - Always show what's happening