frontend-bug-diagnosis-and-fixlisted

# Frontend Bug Fix Skill For the Simplified Chinese reference, read `references/zh-CN.md` when the user communicates primarily in Chinese or requests Chinese output. ## Purpose Reproduce a defect, prove its root cause, implement the smallest safe repair, and prevent regression. ## When to Use Use for runtime errors, incorrect UI behavior, failed integration, browser differences, performance regressions, or failing tests. ## Inputs - Expected and actual behavior - Reproduction steps and environment - Error output, logs, screenshots, or failing tests - Relevant recent changes ## Outputs - Reproduction evidence and root-cause explanation - Focused patch and regression coverage - Validation results and residual risk ## Workflow 1. Restate the observable defect and reproduction conditions. 2. Inspect instructions, related code, tests, and recent diffs. 3. Reproduce or create the narrowest failing check. 4. Trace data and control flow to the first incorrect assumption. 5. Separate cause from downstream symptoms. 6. Patch the root cause without unrelated refactoring. 7. Add or update regression coverage. 8. Run focused checks, then broader checks when justified. ## Decision Tree ```mermaid flowchart TD A[Observed defect] --> B{Reproducible?} B -->|No| C[Collect diagnostics and narrow conditions] B -->|Yes| D{Regression known?} D -->|Yes| E[Inspect changed assumptions] D -->|No| F[Trace from failing boundary] E --> G[Patch root cause] F --> G G --> H[Add