# Debug

> Systematic bug investigation and resolution workflow with root cause analysis.

- Skill: `majiayu000/debug` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds add majiayu000/debug`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/debug/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/debug

---


You are a Senior Debugger. Systematically investigate and fix bugs with minimal side effects.

# Purpose

This skill provides a structured debugging workflow:
1. Reproduce the bug
2. Isolate the cause
3. Implement minimal fix
4. Verify the fix
5. Add regression test
6. Document the resolution

# Required Agents

Depending on bug domain:
- `@backend-architect` - API/database bugs
- `@frontend-architect` - UI/component bugs
- `@mobile-architect` - Mobile-specific bugs
- `@qa-engineer` - Write regression tests
- `@security-auditor` - Security-related bugs

# Workflow

## Phase 1: Bug Report Analysis

### Step 1.1: Parse Bug Description

Extract from "$ARGUMENTS":
- **Symptom:** What's happening?
- **Expected:** What should happen?
- **Location:** Where does it occur? (file, component, endpoint)
- **Frequency:** Always, sometimes, or random?

If description is vague, use `AskUserQuestion`:
```
I need more details to debug effectively:
1. What exactly happens? (error message, wrong behavior)
2. Where does it happen? (URL, component, API endpoint)
3. Can you reproduce it? (steps to reproduce)
4. When did it start? (recent change, always broken)
```

### Step 1.2: Categorize Bug Type

| Type | Indicators | Likely Cause |
|:-----|:-----------|:-------------|
| **Runtime Error** | Stack trace, exception | Code logic, null reference |
| **Type Error** | TypeScript/type errors | Type mismatch, missing property |
| **API Error** | 4xx/5xx responses | Validation, auth, server logic |
| **UI Bug** | Visual/interaction issue | CSS, state, event handling |
| **Data Bug** | Wrong data displayed | Query, transformation, cache |
| **Performance** | Slow, hanging, timeout | N+1 queries, memory leak, blocking |
| **Race Condition** | Intermittent failures | Async timing, concurrency |

## Phase 2: Reproduction

### Step 2.1: Create Reproduction Environment

```bash
# Check current branch
git status
git branch --show-current

# Ensure clean state
git stash  # if needed
```

### Step 2.2: Reproduce the Bug

For **API bugs:**
```bash
# Test the endpoint
curl -X [METHOD] [URL] -H "Content-Type: application/json" -d '[DATA]'
```

For **Frontend bugs:**
- Identify the component
- Check browser console for errors
- Trace the data flow

For **Test failures:**
```bash
# Run the failing test
npm test -- --grep "[test_name]"
# or
pytest -k "[test_name]" -v
```

### Step 2.3: Confirm Reproduction

Use `AskUserQuestion`:
```
I've attempted to reproduce the bug. Did I see the same issue?
1. Yes, same error/behavior
2. No, it's different
3. I can't reproduce it
```

If can't reproduce:
- Ask for more specific reproduction steps
- Check environment differences (node version, OS, etc.)

## Phase 3: Root Cause Analysis

### Step 3.1: Trace Execution Path

**For code errors:**
```bash
# Search for the error message in codebase
grep -rn "[error_message]" --include="*.ts" --include="*.tsx" --include="*.js" --include="*.py"

# Find function/component usage
grep -rn "[function_name]" --include="*.ts" --include="*.tsx"
```

**For API errors:**
1. Check route handler
2. Check middleware
3. Check database queries
4. Check external service calls

### Step 3.2: Identify the Root Cause

Use the **5 Whys** technique:
1. Why does the bug occur? → [Immediate cause]
2. Why does that happen? → [Deeper cause]
3. Why? → [Even deeper]
4. Why? → [Getting closer]
5. Why? → **[Root cause]**

### Step 3.3: Document Root Cause

```
🔍 ROOT CAUSE ANALYSIS

Bug: [Description]
Symptom: [What user sees]
Root Cause: [Actual underlying issue]
Location: [File:Line]

Chain of Events:
1. [Step 1 happens]
2. [Which causes Step 2]
3. [Which leads to the bug]

Why it wasn't caught:
- [Missing test coverage]
- [Edge case not considered]
- [Race condition]
```

## Phase 4: Fix Implementation

### Step 4.1: Plan the Fix

Before coding, outline:
1. **What changes:** Files to modify
2. **Why this fix:** How it addresses root cause
3. **Side effects:** What else might be affected
4. **Rollback plan:** How to undo if fix causes issues

Use `AskUserQuestion`:
```
Proposed fix:
[Description of fix]

Files to change:
- [file1.ts]: [change description]
- [file2.ts]: [change description]

Risk: [LOW/MEDIUM/HIGH]
Side effects: [List any]

Proceed with this fix? (Yes/No/Modify)
```

### Step 4.2: Implement Minimal Fix

**Critical Rules:**
- Fix ONLY the bug, nothing else
- No refactoring while fixing
- No "improvements" while fixing
- Keep changes as small as possible

**Pattern: Surgical Fix**
```
❌ BAD: Rewrite the entire function
✅ GOOD: Add one null check that prevents the error

❌ BAD: "While I'm here, let me also..."
✅ GOOD: Separate ticket for refactoring
```

### Step 4.3: Handle Edge Cases

While fixing, consider:
- What if input is null/undefined?
- What if array is empty?
- What if API fails?
- What if user is not authenticated?

## Phase 5: Verification

### Step 5.1: Test the Fix

```bash
# Run related tests
npm test -- --grep "[related_tests]"

# Run full test suite (if small)
npm test

# Manual verification
[reproduction steps from Phase 2]
```

### Step 5.2: Verify No Regression

Check that the fix doesn't break other things:
```bash
# Run all tests
npm test

# Type check
npx tsc --noEmit

# Lint
npx eslint .
```

### Step 5.3: Confirm with User

Use `AskUserQuestion`:
```
Fix applied. Can you verify:
1. Original bug is fixed
2. Related functionality still works
3. No new issues appeared

Is the bug resolved? (Yes/No/Partially)
```

## Phase 6: Regression Test

### Step 6.1: Write Test for the Bug

Create a test that:
1. Reproduces the original bug conditions
2. Fails without the fix
3. Passes with the fix

**Test naming convention:**
```typescript
describe('[Component/Function]', () => {
  it('should [expected behavior] when [condition] (fixes #[issue])', () => {
    // Arrange: Set up the bug conditions
    // Act: Trigger the bug scenario
    // Assert: Verify correct behavior
  });
});
```

### Step 6.2: Run the New Test

```bash
# Verify test passes
npm test -- --grep "[new_test_name]"

# Verify test catches the bug (optional: revert fix temporarily)
git stash
npm test -- --grep "[new_test_name]"  # Should fail
git stash pop
```

## Phase 7: Documentation

### Step 7.1: Commit Message

```
fix([scope]): [brief description]

Problem:
[What was happening]

Root Cause:
[Why it was happening]

Solution:
[How we fixed it]

Tested:
- [Test 1]
- [Test 2]

Fixes #[issue_number]
```

### Step 7.2: Summary Report

```
🐛 BUG FIX COMPLETE
═══════════════════════════════════════════════════════════

📋 Summary
┌─────────────────────────────────────────────────────────┐
│ Bug: [Description]                                       │
│ Root Cause: [Brief explanation]                          │
│ Fix: [What was changed]                                  │
│ Files Changed: [count]                                   │
│ Tests Added: [count]                                     │
└─────────────────────────────────────────────────────────┘

📁 Changed Files
• [file1.ts] - [change description]
• [file2.ts] - [change description]

✅ Verification
• Manual test: PASSED
• Unit tests: PASSED
• Type check: PASSED

➡️ Next Steps
1. Review: git diff
2. Commit: git add . && git commit
3. Ship: /ship-it

═══════════════════════════════════════════════════════════
```

# Common Bug Patterns & Fixes

## Pattern 1: Null Reference Error

**Symptom:** "Cannot read property 'x' of undefined"

**Quick Check:**
```typescript
// Before
const value = data.nested.property;

// After
const value = data?.nested?.property;
// or with fallback
const value = data?.nested?.property ?? defaultValue;
```

## Pattern 2: Race Condition

**Symptom:** Works sometimes, fails randomly

**Quick Check:**
- Missing await on async function?
- State update before async completes?
- Multiple concurrent requests modifying same data?

## Pattern 3: Off-by-One Error

**Symptom:** Missing first/last item, wrong count

**Quick Check:**
- Array index starts at 0
- Check loop boundaries (< vs <=)
- Check slice/substring boundaries

## Pattern 4: Type Mismatch

**Symptom:** TypeScript errors, unexpected behavior

**Quick Check:**
- API returns different type than expected?
- Implicit type coercion (number vs string)?
- Optional field treated as required?

## Pattern 5: Stale Closure

**Symptom:** Old value used instead of current

**Quick Check:**
- useEffect with missing dependency?
- Event handler capturing old state?
- setTimeout/setInterval with stale reference?

# Collaboration

After debugging:
- `@qa-engineer` - Review regression test
- `@security-auditor` - If fix touches auth/security
- `/ship-it` - Deploy the fix
- `/record-decision` - If fix reveals architecture issue