supersam/docs/superpowers/skills/systematic-debugging/SKILL.md

name	description
systematic-debugging	Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes

Systematic Debugging

Overview

Random fixes waste time and create new bugs. Quick patches mask underlying issues.

Core principle: ALWAYS find root cause before attempting fixes. Symptom fixes are failure.

The Iron Law

NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST

If you haven't completed Phase 1, you cannot propose fixes.

When to Use

Use for ANY technical issue:

• Test failures
• Bugs in production
• Unexpected behavior
• Performance problems
• Build failures
• Integration issues

Use this ESPECIALLY when:

• Under time pressure (emergencies make guessing tempting)
• "Just one quick fix" seems obvious
• You've already tried multiple fixes
• Previous fix didn't work

The Four Phases

You MUST complete each phase before proceeding to the next.

Phase 1: Root Cause Investigation

BEFORE attempting ANY fix:

1. Read Error Messages Carefully

   • Don't skip past errors or warnings
   • Read stack traces completely
   • Note line numbers, file paths, error codes

2. Reproduce Consistently

   • Can you trigger it reliably?
   • What are the exact steps?
   • If not reproducible → gather more data, don't guess

3. Check Recent Changes

   • What changed that could cause this?
   • git diff, recent commits
   • New dependencies, config changes

4. Gather Evidence in Multi-Component Systems When system has multiple components (frontend → Supabase → Edge Functions):

   • Log what data enters each component
   • Log what data exits each component
   • Verify environment/config propagation
   • Check state at each layer

5. Trace Data Flow

   • Where does bad value originate?
   • What called this with bad value?
   • Keep tracing up until you find the source
   • Fix at source, not at symptom

Phase 2: Pattern Analysis

Find the pattern before fixing:

1. Find Working Examples — Locate similar working code in same codebase
2. Compare Against References — Read reference implementation COMPLETELY
3. Identify Differences — List every difference, however small
4. Understand Dependencies — What other components, config, environment?

Phase 3: Hypothesis and Testing

Scientific method:

1. Form Single Hypothesis — "I think X is the root cause because Y"
2. Test Minimally — SMALLEST possible change, one variable at a time
3. Verify Before Continuing — Did it work? Yes → Phase 4. No → new hypothesis
4. When You Don't Know — Say it. Don't pretend. Ask for help.

Phase 4: Implementation

Fix the root cause, not the symptom:

1. Create Failing Test Case — Simplest possible reproduction
2. Implement Single Fix — ONE change at a time, no "while I'm here"
3. Verify Fix — Test passes? No other tests broken?
4. If 3+ Fixes Failed: Question Architecture — Discuss with human partner

Red Flags — STOP and Follow Process

If you catch yourself thinking:

• "Quick fix for now, investigate later"
• "Just try changing X and see if it works"
• "It's probably X, let me fix that"
• "One more fix attempt" (when already tried 2+)

ALL of these mean: STOP. Return to Phase 1.

This Project's Debugging Tips

• Vite dev server: npm run dev — check browser console and terminal output
• Vitest: npm run test — full test suite output
• ESLint: npm run lint — catches syntax and style issues
• Supabase: Check src/supabaseClient.js config and .env variables
• React errors: Check browser DevTools console for component errors
• Service layer: Pure functions in src/services/ are easiest to debug in isolation

Quick Reference

Phase	Key Activities	Success Criteria
1. Root Cause	Read errors, reproduce, check changes	Understand WHAT and WHY
2. Pattern	Find working examples, compare	Identify differences
3. Hypothesis	Form theory, test minimally	Confirmed or new hypothesis
4. Implementation	Create test, fix, verify	Bug resolved, tests pass