feat(reproduce-bug): Add Playwright visual reproduction instructions

Enhanced /reproduce-bug command with browser automation:
- Added Phase 2 for visual bug reproduction using Playwright MCP
- Step-by-step guide for navigating to affected areas
- Screenshot capture at each reproduction step
- Console error checking
- User flow reproduction with clicks, typing, snapshots
- Better documentation structure with 4 clear phases

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

plugins/compound-engineering/commands/reproduce-bug.md

@@ -1,27 +1,99 @@
 ---
 name: reproduce-bug
-description: Reproduce and investigate a bug using logs and console inspection
+description: Reproduce and investigate a bug using logs, console inspection, and browser screenshots
 argument-hint: "[GitHub issue number]"
 ---
 
+# Reproduce Bug Command
+
 Look at github issue #$ARGUMENTS and read the issue description and comments.
 
-Then, run the following agents in parallel to reproduce the bug:
+## Phase 1: Log Investigation
+
+Run the following agents in parallel to investigate the bug:
 
 1. Task rails-console-explorer(issue_description)
-2. Task appsignal-log-investigator (issue_description)
+2. Task appsignal-log-investigator(issue_description)
 
-Then think about the places it could go wrong looking at the codebase. Look for loggin output we can look for.
+Think about the places it could go wrong looking at the codebase. Look for logging output we can look for.
 
-Then, run the following agents in parallel again to find any logs that could help us reproduce the bug.
-
-1. Task rails-console-explorer(issue_description)
-2. Task appsignal-log-investigator (issue_description)
+Run the agents again to find any logs that could help us reproduce the bug.
 
 Keep running these agents until you have a good idea of what is going on.
 
+## Phase 2: Visual Reproduction with Playwright
+
+If the bug is UI-related or involves user flows, use Playwright to visually reproduce it:
+
+### Step 1: Verify Server is Running
+
+```
+mcp__plugin_compound-engineering_pw__browser_navigate({ url: "http://localhost:3000" })
+mcp__plugin_compound-engineering_pw__browser_snapshot({})
+```
+
+If server not running, inform user to start `bin/dev`.
+
+### Step 2: Navigate to Affected Area
+
+Based on the issue description, navigate to the relevant page:
+
+```
+mcp__plugin_compound-engineering_pw__browser_navigate({ url: "http://localhost:3000/[affected_route]" })
+mcp__plugin_compound-engineering_pw__browser_snapshot({})
+```
+
+### Step 3: Capture Screenshots
+
+Take screenshots at each step of reproducing the bug:
+
+```
+mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "bug-[issue]-step-1.png" })
+```
+
+### Step 4: Follow User Flow
+
+Reproduce the exact steps from the issue:
+
+1. **Read the issue's reproduction steps**
+2. **Execute each step using Playwright:**
+   - `browser_click` for clicking elements
+   - `browser_type` for filling forms
+   - `browser_snapshot` to see the current state
+   - `browser_take_screenshot` to capture evidence
+
+3. **Check for console errors:**
+   ```
+   mcp__plugin_compound-engineering_pw__browser_console_messages({ level: "error" })
+   ```
+
+### Step 5: Capture Bug State
+
+When you reproduce the bug:
+
+1. Take a screenshot of the bug state
+2. Capture console errors
+3. Document the exact steps that triggered it
+
+```
+mcp__plugin_compound-engineering_pw__browser_take_screenshot({ filename: "bug-[issue]-reproduced.png" })
+```
+
+## Phase 3: Document Findings
+
 **Reference Collection:**
 
 - [ ] Document all research findings with specific file paths (e.g., `app/services/example_service.rb:42`)
+- [ ] Include screenshots showing the bug reproduction
+- [ ] List console errors if any
+- [ ] Document the exact reproduction steps
 
-Then, add a comment to the issue with the findings and how to reproduce the bug.
+## Phase 4: Report Back
+
+Add a comment to the issue with:
+
+1. **Findings** - What you discovered about the cause
+2. **Reproduction Steps** - Exact steps to reproduce (verified)
+3. **Screenshots** - Visual evidence of the bug (upload captured screenshots)
+4. **Relevant Code** - File paths and line numbers
+5. **Suggested Fix** - If you have one