brainstorming-and-plan…
Use before ANY creative work — creating features, building components, adding functionality, modifying behavior, or starting a new project. Also use when…
Use when encountering ANY bug, test failure, unexpected behavior, or error — before proposing fixes. Also use when someone says 'fix this', 'it's broken', 'not working', 'debug', or when a test fails. ESPECIALLY use when under time pressure, when you've already tried a fix that
$ npx -y skills add burhankhatri/e2e-testing --skill systematic-debugging --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
/systematic-debuggingContext preview
The summary Claude sees to decide when to auto-load this skill.
Use when encountering ANY bug, test failure, unexpected behavior, or error — before proposing fixes. Also use when someone says 'fix this', 'it's broken', 'not working', 'debug', or when a test fails. ESPECIALLY use when under time pressure, when you've already tried a fix that
name: debug description: "Use when encountering ANY bug, test failure, unexpected behavior, or error — before proposing fixes. Also use when someone says 'fix this', 'it's broken', 'not working', 'debug', or when a test fails. ESPECIALLY use when under time pressure, when you've already tried a fix that didn't work, or when 'just one quick fix' seems obvious. Never skip this for simple-seeming bugs."
NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST
If you haven't completed Phase 1, you cannot propose fixes.
**Violating the letter of this process is violating the spirit of debugging.**
You MUST complete each phase before proceeding to the next.
**BEFORE attempting ANY fix:**
1. **Read error messages carefully**
2. **Reproduce consistently**
3. **Check recent changes**
4. **Gather evidence in multi-component systems** For EACH component boundary:
Run once to gather evidence showing WHERE it breaks, THEN analyze.
5. **Trace data flow**
1. **Find working examples** in same codebase 2. **Compare against references** — read reference implementation COMPLETELY (don't skim) 3. **Identify ALL differences** between working and broken 4. **Understand dependencies**, settings, config, assumptions
1. **Form SINGLE hypothesis:** "I think X is root cause because Y" 2. **Test minimally** — SMALLEST possible change, one variable at a time 3. Did it work? → Phase 4. Didn't work? → NEW hypothesis (don't pile fixes)
1. **Create failing test case** — use `/tdd` skill. MUST have before fixing. 2. **Implement single fix** — ONE change, no "while I'm here" improvements 3. **Verify fix** — test passes, no other tests broken, issue resolved 4. **If 3+ fixes failed:** STOP. Question the architecture. Discuss with user before more attempts. This is NOT a failed hypothesis — this is a wrong architecture.
When you fix a bug, validate at EVERY layer data passes through:
Single validation: "We fixed the bug." Multiple layers: "We made the bug impossible."
// ❌ Guessing at timing await new Promise(r => setTimeout(r, 50)); // ✅ Waiting for actual condition await waitFor(() => getResult() !== undefined);
Wait for the actual condition, not a guess about how long it takes.
Generic polling function:
async function waitFor<T>(
condition: () => T | undefined | null | false,
description: string,
timeoutMs = 5000
): Promise<T> {
const startTime = Date.now();
while (true) {
const result = condition();
if (result) return result;
if (Date.now() - startTime > timeoutMs) {
throw new Error(`Timeout waiting for ${description} after ${timeoutMs}ms`);
}
await new Promise(r => setTimeout(r, 10));
}
}When a bug manifests deep in the call stack:
1. **Observe the symptom** — what error, where? 2. **Find immediate cause** — what code directly causes this? 3. **Ask: what called this?** — trace one level up 4. **Keep tracing up** — what value was passed? Where did it come from? 5. **Find original trigger** — the first point where bad data entered
**NEVER fix just where the error appears.** Trace back to the original trigger.
If you can't trace manually, add instrumentation:
const stack = new Error().stack;
console.error('DEBUG operation:', { directory, cwd: process.cwd(), stack });Use `console.error()` in tests (not logger — may be suppressed).
| Excuse | Reality | |--------|---------| | "Issue is simple" | Simple issues have root causes too. | | "Emergency, no time" | Systematic is FASTER than thrashing. | | "Just try this first" | First fix sets the pattern. Do it right. | | "I see the problem" | Seeing symptoms ≠ understanding root cause. | | "One more fix" (after 2+) | 3+ failures = architectural problem. |
A set of 8 global skills for Claude Code that enforce disciplined, test-driven agentic development. Install once, use in any project.
Repo: burhankhatri/e2e-testing
Use before ANY creative work — creating features, building components, adding functionality, modifying behavior, or starting a new project. Also use when…
Use when a major project step has been completed and needs review against the plan and coding standards. Also use when someone says 'review this', 'check my…
Battle-tested Playwright E2E testing patterns for Next.js/React apps. Use when writing, running, debugging, or fixing Playwright tests. Also triggers on 'e2e',…
Master orchestrator skill that kicks off the full development pipeline. Routes tasks through the correct skill chain (brainstorm, debug, tdd, e2e, verify)…
Enforces strict test-driven development. Use when implementing ANY feature, bugfix, or refactor — before writing implementation code. Also use when someone…
Use when you need to autonomously iterate through test-fix cycles without human intervention. Use when someone says 'make it work', 'run tests and fix',…