look-before-you-leap/skills/systematic-debugging/SKILL.md
Use when encountering any bug, test failure, or unexpected behavior. Enforces root cause investigation before fixes. Four phases: investigate, analyze patterns, form hypotheses, implement. Prevents guess-and-check thrashing. Use ESPECIALLY when under pressure or when 'just one quick fix' seems obvious. Do NOT use for: learning unfamiliar APIs (use exploration), performance optimization without a specific regression, or code review without a reported bug.
npx skillsauth add miospotdevteam/claude-control systematic-debuggingInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Random fixes waste time and create new bugs. Quick patches mask root causes.
Core principle: Find root cause before attempting fixes. Symptom fixes are failure.
NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST
If you haven't completed Phase 1, you cannot propose fixes.
Always — for any technical issue: test failures, bugs, unexpected behavior, performance problems, build failures, integration issues.
Especially when:
Must not:
User confirmation required before:
Agent may proceed autonomously:
BEFORE attempting ANY fix:
Don't skip past errors or warnings. Read stack traces top to bottom. Note file paths, line numbers, error codes. Error messages often contain the exact solution.
git diff and git log — what changed?git bisect for regression hunting:git bisect start
git bisect bad # current commit is broken
git bisect good <commit> # last known good commit
# git runs binary search — test each commit it offers
git bisect good/bad # repeat until it finds the culprit
git bisect reset # done
Before adding print statements everywhere, consider whether a debugger would be faster:
this binding, prototype chainsUse print/log debugging when: CI failures, distributed systems, timing- sensitive bugs where pausing changes behavior.
When the system has multiple layers (API → service → database, CI → build → deploy), add diagnostic instrumentation at each boundary BEFORE proposing fixes:
For EACH component boundary:
- Log what data enters the component
- Log what data exits the component
- Verify environment/config propagation
Run once to gather evidence showing WHERE it breaks.
Then investigate that specific component.
When the error is deep in the call stack, trace backward. Don't fix where the error appears — find where the bad value originates.
See references/debugging-root-cause-tracing.md for the full backward
tracing technique.
Phase gate: You cannot start Phase 2 until you have read the error site AND its surrounding code (imports, types, consumers). If you have not opened at least 2 files, go back to Phase 1.
Locate similar working code in the same codebase. What works that's similar to what's broken?
If implementing a pattern, read the reference implementation COMPLETELY. Don't skim — read every line. Partial understanding guarantees bugs.
What's different between working and broken? List every difference, however small. Don't assume "that can't matter."
What other components does this need? What settings, config, environment? What assumptions does it make?
If dep maps are configured (check the project profile), run deps-query.py
on the buggy file to see its full dependency chain and all consumers. This
reveals: which modules feed data into the buggy code (potential upstream
causes), and which consumers are affected (blast radius of the bug and fix).
If dep maps are not configured and this is a TypeScript project, suggest
/generate-deps to the user — it makes dependency tracing instant.
Phase gate: You cannot start Phase 3 until you have compared working vs broken code and understand the dependency chain. If you skipped Phase 2, go back.
State clearly: "I think X is the root cause because Y." Be specific, not vague. Write it down.
Make the SMALLEST possible change to test the hypothesis. One variable at a time. Don't fix multiple things at once.
Say "I don't understand X." Don't pretend. Research more, ask for help, or add more instrumentation.
Phase gate: You cannot start Phase 4 until you have a written hypothesis from Phase 3. If you cannot state "X is the root cause because Y" with specific file paths and line numbers, go back.
Write the test BEFORE touching any production code. This is the most commonly skipped step — and skipping it is always a mistake. The natural impulse is "I know the fix, let me just apply it and add the test after." Resist this. The test-first order matters because:
Sequence: write test → run it → confirm it FAILS → then (and only then) move to step 2. If the test passes immediately, your hypothesis about the bug is wrong — go back to Phase 3.
Address the root cause — not the symptom. ONE change at a time. No "while I'm here" improvements.
After fixing the root cause, add validation at multiple layers to make the bug structurally impossible to recur.
See references/debugging-defense-in-depth.md for the multi-layer
validation pattern.
Three failed fixes is a pattern. It means the problem isn't a bug — it's a design issue. Each fix revealing new problems in different places is the signature of an architectural mismatch.
Discuss with the user before attempting more fixes. This is not a failed hypothesis — this is a wrong architecture.
Before declaring a debugging task done, ALL must be true:
| What you're thinking | What to do | |---|---| | "Quick fix for now, investigate later" | Investigate now — "later" never comes | | "Just try changing X and see" | Form a hypothesis first | | "Add multiple changes, run tests" | One change at a time | | "It's probably X, let me fix that" | Probably ≠ confirmed. Investigate. | | "I don't fully understand but this might work" | Understand first | | "Here are the fixes: [list]" without investigation | You're guessing. Phase 1 first. | | "One more fix attempt" (after 2+ failures) | Question the architecture | | Each fix reveals problems in a different place | Architectural issue, not a bug |
All paths relative to ${CLAUDE_PLUGIN_ROOT}/skills/look-before-you-leap/.
| Reference | When to use |
|---|---|
| references/debugging-root-cause-tracing.md | Bug deep in call stack — trace backward to source |
| references/debugging-defense-in-depth.md | After fixing — add multi-layer validation |
| references/debugging-condition-based-waiting.md | Flaky tests with timing issues — replace sleep() with conditions |
Related skills:
look-before-you-leap:test-driven-development — for creating the failing test (Phase 4)look-before-you-leap:engineering-discipline — for verification after fixdevelopment
Use after discovery to write implementation plans with TDD-granularity steps. Produces plan.json (immutable definition, frozen after approval), progress.json (mutable execution state), and masterPlan.md (user-facing proposal for Orbit review). Every step is one component/feature; TDD rhythm (test, verify fail, implement, verify pass, commit) lives in its progress items. Consumes discovery.md from exploration phase. Make sure to use this skill whenever the user says discovery is done, exploration is finished, discovery.md is ready, or asks to write/create/draft the implementation plan — even if they don't mention plan.json or masterPlan.md by name. Also use when the user references completed exploration findings, blast radius analysis, or consumer mappings and wants them converted into actionable steps. Do NOT use when: the user says 'just do it' or 'no plan', resuming or executing an existing plan, during exploration or brainstorming (discovery not yet complete), debugging, or code review.
tools
End-to-end webapp testing with Playwright MCP integration. Use when: writing Playwright tests, E2E testing, browser testing, webapp testing, visual regression testing, accessibility testing with axe-core, testing user flows through a web UI, verifying frontend behavior in a real browser. Integrates with test-driven-development skill for test-first browser tests and engineering-discipline for verification. Do NOT use when: unit tests only (no browser UI involved), API tests without UI, mobile native testing (use react-native-mobile), testing CLI tools, or writing backend-only integration tests.
development
Test-Driven Development workflow enforcing red-green-refactor cycles. Use when writing new features, adding behavior, or implementing functions where tests should drive design. Requires explicit test-first prompting because Claude naturally writes implementation first. Integrates with writing-plans (TDD rhythm in Progress items) and engineering-discipline (verification). Do NOT use when: fixing a bug in existing tested code (use systematic-debugging), writing tests for existing untested code (characterization tests are a different workflow), refactoring without behavior change (use refactoring), or the project has no test infrastructure.
development
Generate distinctive, production-quality SVG artwork inline in code — decorative backgrounds, abstract illustrations, generative patterns, filter effects, section dividers, brand marks, data visualizations, and animated elements. Pure hand-coded SVG with no external image assets or libraries. Use this skill whenever the user asks for: SVG illustrations, decorative SVG backgrounds, SVG patterns, SVG textures, grain/noise effects, generative art, abstract shapes, blob shapes, topographic patterns, mesh gradients, hero illustrations, SVG icons, section dividers, SVG filters, duotone effects, glow effects, SVG data visualization, sparklines, inline charts, or any request where visual art should be created as SVG code rather than imported as an image. Also trigger when frontend-design produces a design that calls for decorative artwork, custom illustrations, or textured backgrounds. Do NOT use for: GSAP-driven SVG animation (use immersive-frontend), raster image editing, CSS-only effects that don't need SVG, or simple geometric shapes that don't require artistic direction.