From c06f7e889f61818556eb5cd7db64cfad55052115 Mon Sep 17 00:00:00 2001 From: Kieran Klaassen Date: Fri, 9 Jan 2026 08:07:24 -0800 Subject: [PATCH] feat(reproduce-bug): Add Playwright visual reproduction instructions MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- plugins/compound-engineering/CHANGELOG.md | 18 ++++ .../commands/reproduce-bug.md | 90 +++++++++++++++++-- 2 files changed, 99 insertions(+), 9 deletions(-) diff --git a/plugins/compound-engineering/CHANGELOG.md b/plugins/compound-engineering/CHANGELOG.md index 4275ad0..4228314 100644 --- a/plugins/compound-engineering/CHANGELOG.md +++ b/plugins/compound-engineering/CHANGELOG.md @@ -5,6 +5,24 @@ All notable changes to the compound-engineering plugin will be documented in thi The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). +## [2.23.2] - 2026-01-09 + +### Changed + +- **`/reproduce-bug` command** - Enhanced with Playwright visual reproduction: + - Added Phase 2 for visual bug reproduction using browser automation + - Step-by-step guide for navigating to affected areas + - Screenshot capture at each reproduction step + - Console error checking + - User flow reproduction with clicks, typing, and snapshots + - Better documentation structure with 4 clear phases + +### Summary + +- 27 agents, 21 commands, 13 skills, 2 MCP servers + +--- + ## [2.23.1] - 2026-01-08 ### Changed diff --git a/plugins/compound-engineering/commands/reproduce-bug.md b/plugins/compound-engineering/commands/reproduce-bug.md index 39c3463..99881e6 100644 --- a/plugins/compound-engineering/commands/reproduce-bug.md +++ b/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