/ia-reproduce-bug

name: ia-reproduce-bug
description: Reproduce a GitHub issue bug with visual evidence (browser screenshots, log analysis). Takes a GitHub issue number. For non-issue bug validation, use the bug-reproduction-validator agent.
argument-hint: "[GitHub issue number]"
disable-model-invocation: true

**Requires:** agent-browser CLI installed (`npm install -g agent-browser && agent-browser install`). If unavailable, fall back to log analysis from Phase 1 only.

Reproduce Bug Command

Look at github issue #$ARGUMENTS and read the issue description and comments.

Phase 1: Log Investigation

Follow the `ia-debugging` skill methodology -- read the error, trace backward, gather evidence.

1. Search the codebase for code paths related to the issue description 2. Check application logs, error tracking, and monitoring for relevant entries 3. Identify the component boundaries involved and where the failure likely occurs

Think about the places it could go wrong. Look for logging output that helps narrow the cause. Keep investigating until you have a clear hypothesis.

Phase 2: Visual Reproduction with agent-browser

**Requires the agent-browser CLI.** If not available, skip to Phase 3 with findings from Phase 1 only. See [references/agent-browser-cli.md](references/agent-browser-cli.md) for the full command reference. **ALWAYS use agent-browser Bash commands. NEVER use `mcp__*` browser tools.**

If the bug is UI-related or involves user flows, use agent-browser to visually reproduce it:

Step 1: Verify Server is Running

agent-browser open http://localhost:3000
agent-browser snapshot -i

If server not running, inform user to start their dev server.

Step 2: Navigate to Affected Area

Based on the issue description, navigate to the relevant page:

agent-browser open "http://localhost:3000/[affected_route]"
agent-browser snapshot -i

Step 3: Capture Screenshots

Take screenshots at each step of reproducing the bug:

agent-browser screenshot 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 agent-browser** (get element refs like `@e1` from `snapshot -i`):

• `agent-browser click @e1` for clicking elements
• `agent-browser fill @e1 "text"` for filling forms
• `agent-browser snapshot -i` to see the current state
• `agent-browser screenshot step.png` to capture evidence

3. **Check for console errors:**

   agent-browser console          # log, error, warn, info messages

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

agent-browser screenshot bug-[issue]-reproduced.png
agent-browser console

Phase 3: Document Findings

**Reference Collection:**

• [ ] Document all research findings with specific file paths (e.g., `src/services/ExampleService.ts:42`)
• [ ] Include screenshots showing the bug reproduction
• [ ] List console errors if any
• [ ] Document the exact reproduction steps

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

Integration

For agent-invocable bug reproduction without a GitHub issue number, use the `ia-bug-reproduction-validator` agent. It validates and classifies bug reports but does not fix them.