reproduce-bug
Reproduce and investigate a bug using logs, console inspection, and browser screenshots
- License 许可
- GPL-2.0
- 最近更新
- 2026-03-04
- Stars
- ★ 0
- Forks
- 0
01 前言 Front Matter
- name
- reproduce-bug
- description
- Reproduce and investigate a bug using logs, console inspection, and browser screenshots
03 SKILL.md 正文
Arguments
[issue number or description]
Reproduce Bug Command
Look at github issue #$ARGUMENTS and read the issue description and comments.
Phase 1: Log Investigation
Run the following agents in parallel to investigate the bug:
- Task repo-research-analyst(issue_description) - Search codebase for relevant code paths
- Task learnings-researcher(issue_description) - Check if similar bugs have been solved before
Think about the places it could go wrong looking at the codebase. Look for logging output we can look for.
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 agent-browser
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 the development server for the project.
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:
-
Read the issue's reproduction steps
-
Execute each step using agent-browser:
agent-browser click @reffor clicking elementsagent-browser fill @ref "text"for filling formsagent-browser snapshot -ito see the current stateagent-browser screenshot filename.pngto capture evidence
-
Check for console errors by inspecting the snapshot output for error indicators.
Step 5: Capture Bug State
When you reproduce the bug:
- Take a screenshot of the bug state
- Document any console errors
- Document the exact steps that triggered it
agent-browser screenshot "bug-[issue]-reproduced.png"
Phase 3: Document Findings
Reference Collection:
- [ ] Document all research findings with specific file paths (e.g.,
app/Services/ExampleService.php: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:
- Findings - What you discovered about the cause
- Reproduction Steps - Exact steps to reproduce (verified)
- Screenshots - Visual evidence of the bug (upload captured screenshots)
- Relevant Code - File paths and line numbers
- Suggested Fix - If you have one
04 同仓库更多 Skills
workflows-work
Execute work plans efficiently while maintaining quality and finishing features
workflows-review
Perform exhaustive code reviews using multi-agent analysis, ultra-thinking, and worktrees
workflows-plan
Transform feature descriptions into well-structured project plans following conventions
workflows-compound
Document a recently solved problem to compound your team's knowledge
workflows-brainstorm
Explore requirements and approaches through collaborative dialogue before planning implementation
triage
Triage and categorize findings for the CLI todo system