Imported from 00PrabalK00/claude-skills (skills/front-end-state-debugger/SKILL.md). Install upstream with npx skills add 00PrabalK00/claude-skills --skill front-end-state-debugger. Copyright stays with the author.

Front End State Debugger

Overview

Trace confusing client-side state bugs involving async effects, caches, stores, routing, forms, or rendering order.

Core Workflow

1. Gather the smallest high-signal evidence set: failing outputs, logs, configs, recent changes, and relevant runtime context.
2. Inspect the implementation and surrounding setup to isolate the narrowest plausible failure surface.
3. Rank likely causes, rule out weak explanations, and identify the most actionable next fix or experiment.
4. Validate the explanation with the smallest reliable check the repo or environment supports.

Deliver

• A concise diagnosis with the most likely root cause or bounded uncertainty.
• The highest-signal evidence and suspect files, configs, or systems involved.
• The smallest safe fix path or next experiment to run.

Guardrails

• Do not claim a root cause without evidence that explains the observed behavior.
• Separate symptoms from likely causes and call out uncertainty explicitly.
• Prefer the smallest reproducible scope before escalating to broad changes.
• Prefer repository evidence, command output, and nearby tests over vague intuition.