🔥 UI/UX Roast Skill

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

Command Syntax

bash
1/roast [mode] [target] [options]
2
3# Modes
4screen <target>     # Single screen analysis (default)
5flow <target>       # Multi-screen user journey
6audit               # Full application review
7
8# Options
9--iterations=<1-10> # Roast cycles (default: 3)
10--focus=<area>      # Priority: a11y|conversion|usability|visual|implementation
11--output=<path>     # Output directory (default: reports/roast/)
12--fix=<mode>        # Fix handling: auto|report|ask (default: ask)

Examples

bash
1/roast screen login                     # Roast login screen
2/roast screen settings --focus=a11y     # Focus on accessibility
3/roast flow checkout --iterations=5     # 5-iteration checkout flow
4/roast flow onboarding --fix=auto       # Auto-fix issues found
5/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!

typescript
1// First, ensure directory exists
2Bash: mkdir -p reports/roast/screenshots
3
4// Playwright MCP - specify filename parameter
5mcp__playwright__browser_take_screenshot({
6  type: "png",
7  filename: "reports/roast/screenshots/[target]_[iteration].png"
8})
9
10// Xcode MCP - specify path parameter
11mcp__xcodebuildmcp__screenshot({
12  path: "reports/roast/screenshots/[target]_[iteration].png"
13})

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:

typescript
1// All 5 agents run simultaneously
2Task(subagent_type="claude-roaster:roaster-designer", prompt="...")
3Task(subagent_type="claude-roaster:roaster-developer", prompt="...")
4Task(subagent_type="claude-roaster:roaster-user", prompt="...")
5Task(subagent_type="claude-roaster:roaster-a11y", prompt="...")
6Task(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

markdown
1# 🔥 Roast Report: [Target] - Iteration [N]
2
3**Mode:** screen | **Focus:** balanced | **Date:** 2024-01-15
4
5![Screenshot](screenshots/login_1.png)
6
7## The Verdict
8
9[Brutal 2-3 sentence summary]
10
11## Issues by Severity
12
13### 🔴 Critical (2)
14| Issue | Agent | Fix |
15|-------|-------|-----|
16| Missing labels | A11y | Add aria-label="Email" |
17| Low contrast | Designer | Change #999 to #595959 |
18
19### 🟠 Major (6)
20...
21
22### 🟡 Minor (8)
23...
24
25## Agent Deep Dives
26
27### 🎨 Designer
28[Full analysis]
29
30### ♿ A11y Expert
31[Full analysis]
32
33...
34
35## Quick Wins
36- [ ] Fix 1 (< 2 min)
37- [ ] Fix 2 (< 2 min)
38
39## Scores
40| Category | Score |
41|----------|-------|
42| Visual | 4/10 |
43| Usability | 5/10 |
44| Accessibility | 3/10 |
45| 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