Use when adding new error messages to React, or seeing "unknown error code" warnings.
npx skills add TheSimpleApp/agent-skills --skill "debugging"
Install specific skill from multi-skill repository
# Description
Systematic debugging patterns for finding and fixing bugs. Use when troubleshooting errors, unexpected behavior, or performance issues.
# SKILL.md
name: debugging
description: Systematic debugging patterns for finding and fixing bugs. Use when troubleshooting errors, unexpected behavior, or performance issues.
license: MIT
metadata:
author: thesimpleapp
version: "1.0"
Debugging
Systematic approach to finding and fixing bugs.
The Scientific Method for Debugging
- Observe - What exactly is happening?
- Hypothesize - What could cause this?
- Predict - If my hypothesis is correct, what should I see?
- Test - Check if the prediction holds
- Conclude - Was I right? Repeat if not.
Step 1: Reproduce the Bug
Before debugging, ensure you can reliably reproduce the issue:
- What are the exact steps?
- What input triggers it?
- Does it happen every time?
- What environment (OS, browser, version)?
If you can't reproduce it, you can't fix it.
Step 2: Isolate the Problem
Binary Search Debugging
- Find a known "good" state and "bad" state
- Check the midpoint
- Narrow down to the failing section
- Repeat until you find the exact line
Minimal Reproduction
- Remove code until the bug disappears
- Add code back until it reappears
- The last addition is likely the culprit
Step 3: Understand the Root Cause
Don't just fix symptoms. Ask:
- Why does this input cause this output?
- Why wasn't this caught earlier?
- Where else might this pattern exist?
Common Bug Categories
Off-by-One Errors
- Array index out of bounds
- Loop runs one too many/few times
- Fence post problems
Null/Undefined Errors
- Missing null checks
- Async data not yet loaded
- Optional chaining needed
Race Conditions
- Async operations completing out of order
- Shared state modified concurrently
- Missing await/locks
State Bugs
- Stale closures
- Mutation of shared objects
- Cache invalidation issues
Debugging Tools
Console/Print Debugging
console.log('checkpoint 1', { variable });
console.log('checkpoint 2', { anotherVar });
Interactive Debuggers
- Set breakpoints at suspicious lines
- Inspect variable values
- Step through execution
Logging
- Check application logs for errors
- Add temporary verbose logging
- Use structured logging for complex data
Rubber Duck Debugging
Explain the problem out loud (to a rubber duck, or just yourself):
1. What should the code do?
2. What is it actually doing?
3. Walk through line by line
Often, you'll find the bug while explaining.
After Fixing
- Write a test that would have caught this bug
- Check for similar bugs elsewhere in the codebase
- Document if it was a tricky issue
- Consider if the design could prevent this class of bug
# Supported AI Coding Agents
This skill is compatible with the SKILL.md standard and works with all major AI coding agents:
Learn more about the SKILL.md standard and how to use these skills with your preferred AI coding agent.