What problem does it solve? Debugging frontend bugs often leads to trial-and-error fixes that mask symptoms instead of resolving the actual cause. This Skill enforces a disciplined four-phase methodology (investigate, analyze, hypothesize, implement) so every bug fix in a Next.js/React Query codebase is grounded in a verified root cause and protected by a regression test. ## Core Features & Use Cases - Structured 4-Phase Debugging: Sequentially investigate evidence, trace the data flow (component → hook → service → query key), formulate a one-sentence root-cause hypothesis, then apply a minimal verified fix. - Mandatory TDD Regression Test: Requires a failing reproduction test before any production code change, and the fix is only complete when that test passes. - React Query Cache Inspection: Provides concrete techniques for diagnosing stale data, invalidation issues, and query key mismatches using queryClient state dumps. - Direct-to-Disk Reporting: Generates a structured debug report in .agents/debug/ using the included template, keeping chat output concise. - Use Case: A user reports "the procedures list crashes when empty." The Skill reproduces the bug, traces it to a service not handling a 204 response, writes a failing spec, applies a defensive fix, and documents the root cause. ## Quick Start Ask the agent to debug why a specific page or feature is failing and have it find the root cause before applying any fix.
