home / skills / htooayelwinict / claude-config / bugfix-and-debug

bugfix-and-debug skill

/skills/bugfix-and-debug

This skill helps diagnose and fix Laravel, React, and Python bugs by collecting error details, analyzing traces, and guiding minimal, verifiable repairs.

npx playbooks add skill htooayelwinict/claude-config --skill bugfix-and-debug

Review the files below or copy the command above to add this skill to your agents.

Files (2)
SKILL.md
4.0 KB
---
name: bugfix-and-debug
description: |
  Diagnose errors and failing tests in Laravel + React + Python applications. Use when encountering bugs, exceptions,
  stack traces, 500 errors, TypeErrors, failing tests, or unexpected behavior. EXCLUSIVE to debugger agent.
allowed-tools: Read, Edit, Bash, Grep, Glob, mcp_gemini-bridge, mcp_open-bridge, mcp_codex-bridge, mcp_context7
---
# Bugfix and Debug

**Exclusive to:** `debugger` agent

## MCP Helpers (Brain + Memory)

### ๐Ÿง  Gemini-Bridge (Brain) โ€” Deep Error Analysis
```
mcp_gemini-bridge_consult_gemini(query="Root cause analysis: [error message]. Stack trace: [trace]", directory=".")
```

### ๐ŸŒ‰ Open-Bridge โ€” Alternative Error Analysis
```
mcp_open-bridge_consult_gemini(query="Root cause analysis: [error message]. Stack trace: [trace]", directory=".")
```

### ๐Ÿ“š Context7 (Memory) โ€” Up-to-Date Docs

Lookup error patterns and fixes in official docs:
```
mcp_context7_resolve-library-id(libraryName="[library]", query="[error type]")
mcp_context7_query-docs(libraryId="/[resolved-id]", query="[specific error message]")
```

## Validation Loop (MANDATORY)

Before completing any fix, run this verification sequence:
```bash
composer test            # All PHP tests pass
npm run types           # No TypeScript errors
npm run lint            # No linting errors
```

If any command fails, investigate and fix before reporting completion.

## Instructions

### Phase 1: Evidence Collection
1. Capture exact error message and stack trace
2. Identify reproduction steps (command + inputs)
3. Note when it started (recent changes?)
4. Check logs: `storage/logs/laravel.log`

### Phase 2: Hypothesis Formation
Form 1-3 ranked hypotheses based on:
- Error message keywords
- Stack trace file paths
- Recent git changes
- Similar past issues

### Phase 3: Verification
```bash
# Search for error patterns
grep -r "error text" --include="*.php" --include="*.tsx" app/ resources/

# Check recent changes
git log --oneline -10
git diff HEAD~3

# Run isolated test
php artisan test --filter=TestName
```

### Phase 4: Minimal Fix
- Fix **root cause**, not symptoms
- Make **smallest** change possible
- Consider related edge cases

### Phase 5: Regression Prevention
- Add/update test covering the fixed case
- Verify test fails without fix, passes with fix

## Common Laravel Error Patterns

| Error | Likely Cause | Solution |
|-------|-------------|----------|
| `ModelNotFoundException` | Wrong ID, missing record | Check route model binding |
| `ValidationException` | Invalid input | Review FormRequest rules |
| `AuthorizationException` | Policy failure | Check policy methods |
| `QueryException` | SQL error | Check migration/schema |
| `TokenMismatchException` | CSRF issue | Add @csrf directive |
| `Class not found` | Autoload issue | Run `composer dump-autoload` |

## Common React/TypeScript Errors

| Error | Likely Cause | Solution |
|-------|-------------|----------|
| `Cannot read property of undefined` | Null access | Add optional chaining `?.` |
| `Type 'X' is not assignable` | Type mismatch | Fix interface/props |
| `Hook call violation` | Hook in wrong place | Move to component |
| `Hydration mismatch` | SSR/client diff | Use `useEffect` |

## Debugging Commands

```bash
# Laravel
php artisan tinker                    # Interactive REPL
tail -f storage/logs/laravel.log     # Watch logs
php artisan route:list               # Check routes
php artisan migrate:status           # Check migrations

# Frontend
npm run types                        # TypeScript errors
npm run lint                         # ESLint issues
```

## Output Template

```markdown
## ๐Ÿ› Bug
[One sentence description]

## ๐Ÿ” Root Cause
[What was wrong and why]

## ๐Ÿ”ง Fix
| File | Change |
|------|--------|
| `path/file` | Description |

## ๐Ÿงช Regression Test
[Test name and coverage]

## โœ… Verification
$ [command]
[output]
```

## Examples
- "Fix this failing Pest test"
- "Users can't log in; find why and patch it safely"
- "Debug why form submission fails with 500 error"

Overview

This skill diagnoses errors and failing tests in Laravel, React/TypeScript, and Python applications. It guides evidence collection, forms ranked hypotheses, verifies causes with targeted commands, and produces minimal fixes plus regression tests. It is exclusive to the debugger agent and enforces a mandatory validation loop before marking work complete.

How this skill works

The skill inspects error messages, stack traces, logs, recent git changes, and test outputs to identify root causes. It runs targeted searches, executes isolated tests, and uses helper consults to cross-check patterns against up-to-date documentation. After verifying a hypothesis, it applies the smallest safe code change and adds or updates tests to prevent regressions. Final verification runs full test, TypeScript, and lint checks.

When to use it

  • 500 errors, uncaught exceptions, or full stack traces in Laravel, React, or Python services
  • Failing unit/integration tests or CI jobs related to PHP, JS/TS, or Python code
  • TypeErrors, hydration mismatches, or React hook violations in frontend code
  • Authentication, authorization, CSRF, or model binding problems in Laravel
  • After a recent deploy or merge when new bugs appear

Best practices

  • Collect exact error message, full stack trace, reproduction steps, and relevant logs before editing code
  • Form 1โ€“3 ranked hypotheses based on trace file paths and recent git diffs
  • Verify hypotheses with focused commands and isolated tests before committing fixes
  • Make the minimal change that fixes the root cause, not just the symptom
  • Add or update a regression test proving the issue fails before and passes after the fix
  • Run composer test, npm run types, and npm run lint as mandatory final verification

Example use cases

  • A Pest or PHPUnit test fails after a schema change โ€” find the root cause and patch code plus test
  • API endpoints returning 500 with a ModelNotFoundException โ€” diagnose route model binding issues
  • React app throws Cannot read property of undefined after a prop refactor โ€” locate the null access and add safe guards
  • TypeScript type errors introduced by changed interfaces โ€” update definitions and fix usages
  • Intermittent CSRF TokenMismatchException on form submission โ€” confirm @csrf and session configuration

FAQ

What commands must I run before marking a fix complete?

Run the full verification: composer test, npm run types, and npm run lint; all must pass.

How many hypotheses should I form?

Form 1โ€“3 ranked hypotheses based on error keywords, stack trace paths, and recent git changes; verify them in order.