본문으로 건너뛰기
cccskills
무료GitHub에 공개

systematic-debugging

Investigate bugs and failing tests through four stages: finding the root cause, comparing working patterns, testing a hypothesis, and implementing a fix. Uses reproduction steps, diagnostic evidence, and regression tests to check the result.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

원문원문 설명 보기

Four-phase debugging methodology with root cause analysis. Use when investigating bugs, fixing test failures, or troubleshooting unexpected behavior. Emphasizes NO FIXES WITHOUT ROOT CAUSE FIRST.

설치 방법 보기

이럴 때 유용합니다

  • Tracing the cause of a failing test
  • Following runtime errors back to invalid data
  • Finding the change that broke working code
  • Investigating intermittent failures and timing issues

포함된 파일(1)

  • SKILL.md4.8 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Systematic Debugging

Core Principle

NO FIXES WITHOUT ROOT CAUSE INVESTIGATION FIRST.

Never apply symptom-focused patches that mask underlying problems. Understand WHY something fails before attempting to fix it.

The Four-Phase Framework

Phase 1: Root Cause Investigation

Before touching any code:

  1. Read error messages thoroughly - Every word matters
  2. Reproduce the issue consistently - If you can't reproduce it, you can't verify a fix
  3. Examine recent changes - What changed before this started failing?
  4. Gather diagnostic evidence - Logs, stack traces, state dumps
  5. Trace data flow - Follow the call chain to find where bad values originate

Root Cause Tracing Technique:

1. Observe the symptom - Where does the error manifest?
2. Find immediate cause - Which code directly produces the error?
3. Ask "What called this?" - Map the call chain upward
4. Keep tracing up - Follow invalid data backward through the stack
5. Find original trigger - Where did the problem actually start?

Key principle: Never fix problems solely where errors appear—always trace to the original trigger.

Phase 2: Pattern Analysis

  1. Locate working examples - Find similar code that works correctly
  2. Compare implementations completely - Don't just skim
  3. Identify differences - What's different between working and broken?
  4. Understand dependencies - What does this code depend on?

Phase 3: Hypothesis and Testing

Apply the scientific method:

  1. Formulate ONE clear hypothesis - "The error occurs because X"
  2. Design minimal test - Change ONE variable at a time
  3. Predict the outcome - What should happen if hypothesis is correct?
  4. Run the test - Execute and observe
  5. Verify results - Did it behave as predicted?
  6. Iterate or proceed - Refine hypothesis if wrong, implement if right

Phase 4: Implementation

  1. Create failing test case - Captures the bug behavior
  2. Implement single fix - Address root cause, not symptoms
  3. Verify test passes - Confirms fix works
  4. Run full test suite - Ensure no regressions
  5. If fix fails, STOP - Re-evaluate hypothesis

Critical rule: If THREE or more fixes fail consecutively, STOP. This signals architectural problems requiring discussion, not more patches.

Red Flags - Process Violations

Stop immediately if you catch yourself thinking:

  • "Quick fix for now, investigate later"
  • "One more fix attempt" (after multiple failures)
  • "This should work" (without understanding why)
  • "Let me just try..." (without hypothesis)
  • "It works on my machine" (without investigating difference)

Warning Signs of Deeper Problems

Consecutive fixes revealing new problems in different areas indicates architectural issues:

  • Stop patching
  • Document what you've found
  • Discuss with team before proceeding
  • Consider if the design needs rethinking

Common Debugging Scenarios

Test Failures

1. Read the FULL error message and stack trace
2. Identify which assertion failed and why
3. Check test setup - is the test environment correct?
4. Check test data - are mocks/fixtures correct?
5. Trace to the source of unexpected value

Runtime Errors

1. Capture the full stack trace
2. Identify the line that throws
3. Check what values are undefined/null
4. Trace backward to find where bad value originated
5. Add validation at the source

"It worked before"

1. Use git bisect to find the breaking commit
2. Compare the change with previous working version
3. Identify what assumption changed
4. Fix at the source of the assumption violation

Intermittent Failures

1. Look for race conditions
2. Check for shared mutable state
3. Examine async operation ordering
4. Look for timing dependencies
5. Add deterministic waits or proper synchronization

Debugging Checklist

Before claiming a bug is fixed:

  • Root cause identified and documented
  • Hypothesis formed and tested
  • Fix addresses root cause, not symptoms
  • Failing test created that reproduces bug
  • Test now passes with fix
  • Full test suite passes
  • No "quick fix" rationalization used
  • Fix is minimal and focused

Success Metrics

Systematic debugging achieves ~95% first-time fix rate vs ~40% with ad-hoc approaches.

Signs you're doing it right:

  • Fixes don't create new bugs
  • You can explain WHY the bug occurred
  • Similar bugs don't recur
  • Code is better after the fix, not just "working"

Integration with Other Skills

  • testing-patterns: Create test that reproduces the bug before fixing

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Build screens, forms, and lists with shared UI components and design tokens, named values for spacing, colors, and typography. Provides patterns for consistent layouts, button variants, validation messages, and reusable component properties.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building screens with shared UI components
  • Replacing fixed colors and spacing with design tokens
  • Creating consistent forms and list layouts
ChrisWiles/claude-code-showcase6.1천2026년 1월 7일 업데이트

Build forms with Formik and yup, a library for defining input validation rules. Apply field errors, submission feedback, edit detection, and step-specific validation to login screens, editing forms, and forms split across multiple steps.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building login and registration forms
  • Adding conditional input validation
  • Editing existing records with change detection
ChrisWiles/claude-code-showcase6.1천2026년 1월 7일 업데이트

Build GraphQL data queries and updates with separate operation files and generated types and hooks, reusable functions for React. Follow Apollo Client patterns for error messages, loading feedback, cache updates, and reusable field selections.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Building a GraphQL list view
  • Adding data creation or update forms
  • Generating types and hooks from operation files
ChrisWiles/claude-code-showcase6.1천2026년 1월 7일 업데이트

Build React interfaces that clearly handle loading, errors, empty results, and submissions. Use examples and checklists to keep existing data visible during refetching, offer retry actions, and disable buttons while asynchronous operations are running.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Keeping existing data visible during refetching
  • Adding visible errors and retry actions
  • Showing guidance when lists or search results are empty
ChrisWiles/claude-code-showcase6.1천2026년 1월 7일 업데이트

Write Jest unit tests for component behavior and user interactions. Includes reusable test data builders, mock replacements for dependencies, and test-driven development, where a failing test guides implementation before the code is cleaned up.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

  • Testing component rendering and form interactions
  • Creating reusable test data with selective overrides
  • Replacing modules and GraphQL hooks in tests
ChrisWiles/claude-code-showcase6.1천2026년 1월 7일 업데이트

ChrisWiles의 스킬 모두 보기

이 스킬의 문제 신고