# Roast > Multi-perspective UI/UX roasting workflow with iterative improvement cycles - Skill: `diegosouzapw/roast` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add diegosouzapw/roast` - Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/roast/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Productivity - Author: diegosouzapw (https://skillmd.com/u/diegosouzapw) - Updated: 2026-09-08 - Page: https://skillmd.com/skills/diegosouzapw/roast --- # πŸ”₯ UI/UX Roast Skill Brutally honest UI/UX critique with multi-perspective analysis and iterative improvement. ## Command Syntax ```bash /roast [mode] [target] [options] # Modes screen # Single screen analysis (default) flow # Multi-screen user journey audit # Full application review # Options --iterations=<1-10> # Roast cycles (default: 3) --focus= # Priority: a11y|conversion|usability|visual|implementation --output= # Output directory (default: reports/roast/) --fix= # Fix handling: auto|report|ask (default: ask) ``` ## Examples ```bash /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!** ```typescript // 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: ```typescript // 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 | Agent | Model | Focus | Weight | |-------|-------|-------|--------| | roaster (orchestrator) | Opus | Synthesis | - | | roaster-designer | Sonnet | Visual, typography, color | 1.0x | | roaster-developer | Sonnet | Implementation, structure | 1.0x | | roaster-user | Sonnet | Usability, friction | 1.0x | | roaster-a11y | Sonnet | Accessibility, WCAG | 1.0x | | roaster-marketing | Sonnet | Conversion, trust | 1.0x | **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 # πŸ”₯ 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