# Debugging And Error Recovery

> Diagnose and fix frontend/UI failures using a structured reproduce-isolate-fix-verify workflow.

- Skill: `counterpointconsulting/debugging-and-error-recovery-3` (Agent Skill)
- Install (CLI): `npx skillmds@latest add counterpointconsulting/debugging-and-error-recovery-3`
- Raw SKILL.md: https://api.skillmd.com/api/skills/counterpointconsulting/debugging-and-error-recovery-3/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: CounterpointConsulting (https://skillmd.com/u/counterpointconsulting)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/counterpointconsulting/debugging-and-error-recovery-3

---


# Debugging and Error Recovery (TypeScript React)

## Overview
Debug UI failures systematically and apply minimal, validated fixes.

## When to Use
- Interaction or rendering regressions
- Async state/loading/error bugs
- Test failures tied to UI behavior

## When NOT to Use
- New feature work without an active failure

## Inputs
- Reproduction steps and error output
- Relevant component/hook/state paths
- Existing tests for affected flow

## Process
1. Reproduce issue reliably.
2. Isolate failing interaction/state boundary.
3. Add/adjust failing test for issue.
4. Implement minimal targeted fix.
5. Verify core and nearby user flows.

## Verification Checklist
- [ ] Reproduction exists before fix
- [ ] Root cause is explicit
- [ ] Fix is scoped and minimal
- [ ] Related tests and key flows pass

## Failure Modes to Avoid
- Patch-by-guessing without reproduction
- Broad refactors during bugfix
- Declaring done without regression checks

## Output Requirements
- Use `summarize` for final output.
- Include root cause, fix summary, and verification evidence.