Agent skill
reproduce-bug
Reproduce and investigate a bug using logs, console inspection, and browser screenshots
Install this agent skill to your Project
npx add-skill https://github.com/ratacat/claude-skills/tree/main/skills/reproduce-bug
SKILL.md
Arguments
[GitHub issue number]
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 rails-console-explorer(issue_description)
- Task appsignal-log-investigator(issue_description)
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 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:
-
Read the issue's reproduction steps
-
Execute each step using Playwright:
browser_clickfor clicking elementsbrowser_typefor filling formsbrowser_snapshotto see the current statebrowser_take_screenshotto capture evidence
-
Check for console errors:
mcp__plugin_compound-engineering_pw__browser_console_messages({ level: "error" })
Step 5: Capture Bug State
When you reproduce the bug:
- Take a screenshot of the bug state
- Capture console errors
- 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
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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
brave-search
Use when user asks to search the web, look something up online, find current/recent/latest information, or needs cited answers. Triggers on "search", "look up", "find out about", "what is the current/latest", image searches, news lookups. NOT for searching code/files—only for web/internet searches.
bug-reproduction-validator
Use this agent when you receive a bug report or issue description and need to verify whether the reported behavior is actually a bug. This agent will attempt to reproduce the issue systematically, validate the steps to reproduce, and confirm whether the behavior deviates from expected functionality. <example>\nContext: The user has reported a potential bug in the application.\nuser: "Users are reporting that the email processing fails when there are special characters in the subject line"\nassistant: "I'll use the bug-reproduction-validator agent to verify if this is an actual bug by attempting to reproduce it"\n<commentary>\nSince there's a bug report about email processing with special characters, use the bug-reproduction-validator agent to systematically reproduce and validate the issue.\n</commentary>\n</example>\n<example>\nContext: An issue has been raised about unexpected behavior.\nuser: "There's a report that the brief summary isn't including all emails from today"\nassistant: "Let me launch the b...
agent-native-audit
Run comprehensive agent-native architecture review with scored principles
brainstorming
This skill should be used before implementing features, building components, or making changes. It guides exploring user intent, approaches, and design decisions before planning. Triggers on "let's brainstorm", "help me think through", "what should we build", "explore approaches", ambiguous feature requests, or when the user's request has multiple valid interpretations that need clarification.
performance-oracle
Use this agent when you need to analyze code for performance issues, optimize algorithms, identify bottlenecks, or ensure scalability. This includes reviewing database queries, memory usage, caching strategies, and overall system performance. The agent should be invoked after implementing features or when performance concerns arise.\n\n<example>\nContext: The user has just implemented a new feature that processes user data.\nuser: "I've implemented the user analytics feature. Can you check if it will scale?"\nassistant: "I'll use the performance-oracle agent to analyze the scalability and performance characteristics of your implementation."\n<commentary>\nSince the user is concerned about scalability, use the Task tool to launch the performance-oracle agent to analyze the code for performance issues.\n</commentary>\n</example>\n\n<example>\nContext: The user is experiencing slow API responses.\nuser: "The API endpoint for fetching reports is taking over 2 seconds to respond"\nassistant: "Let me invoke the...
triage
Triage and categorize findings for the CLI todo system
Didn't find tool you were looking for?