← ClaudeAtlas

frontend-bugfix-debuggerlisted

Diagnose and fix frontend defects from evidence, including unclear UI/runtime errors, broken routes, styling regressions, and hydration or client issues. Reproduce before editing; exclude planned refactors and backend-only debugging.
ytvee-dev/webdev-agent-kit · ★ 5 · Code & Development · score 76
Install: claude install-skill ytvee-dev/webdev-agent-kit
# Frontend Bugfix Debugger ## Purpose Fix frontend defects from symptoms and evidence while keeping the change small. When verification fails and repair is in scope, use a bounded retry loop instead of guessing repeatedly. This skill must not turn a one-component presentation defect into a broad debugging, planning, visual QA, or full-repository verification workflow. ## When To Use Use this skill when the user asks to fix a frontend runtime, console, hydration, routing, rendering, interaction, styling, responsive, TypeScript, or build defect that needs evidence. Use the Micro UI Fix Fast Lane from `common/lightweight-routing-policy.md` when the defect is an isolated presentation issue that stays within the micro UI hard limits. ## When Not To Use Do not use this skill for planned refactors, broad quality review, visual QA only, design intake, greenfield planning, backend-only debugging, package installation, or test creation. If the task is a behavior-preserving refactor, use `frontend-refactor-surgeon`. If the user asks only for review, use `frontend-quality-reviewer`. If the user only asks for options or an approach, answer with options first and do not edit files until implementation is requested or approved. ## Required Context 1. Read `AGENTS.md`. 2. Read `common/prompt-intent-routing-rules.md` when workflow level is unclear. 3. Read `common/lightweight-routing-policy.md` for micro UI fixes or other narrow code-changing tasks. 4. Read `common/debugging-evide