Frontend bug diagnosis and fix

Skill SHIHAOZOU/ai-frontend-engineering-skills/skills/frontend-bug-diagnosis-and-fix

Production-ready frontend Agent Skills for Codex, Claude Code & Cursor—covering React development, debugging, refactoring, code review, bilingual docs, and npx skills installation. 面向 Codex、Claude Code 与 Cursor 的生产级前端 Agent Skills，覆盖 React 开发、Bug 修复、重构、Code Review 与双语工程规范，支持 npx skills 安装。

Install

npx -y skills add SHIHAOZOU/ai-frontend-engineering-skills --skill frontend-bug-diagnosis-and-fix

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

17 days oldThe repository was created 17 days ago. New is not bad, but a brand new repository carrying a familiar-sounding name is the shape a typosquat arrives in, and there has been no time for anyone else to find a problem with it.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Diagnose and fix frontend defects from symptoms, errors, screenshots, logs, regressions, or failing tests. Use when behavior differs from expectations and the root cause must be proven before making a focused repair.

SKILL.md

2.9 KB, as published. Nobody here has run it

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

Restate the observable defect and reproduction conditions.
Inspect instructions, related code, tests, and recent diffs.
Reproduce or create the narrowest failing check.
Trace data and control flow to the first incorrect assumption.
Separate cause from downstream symptoms.
Patch the root cause without unrelated refactoring.
Add or update regression coverage.
Run focused checks, then broader checks when justified.

Decision Tree

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 regression test]

Checklist

Expected and actual behavior are distinct.
Root cause is supported by evidence.
Patch scope is minimal.
Error, loading, and race conditions are considered.
Regression test fails before and passes after the fix when feasible.
Unrelated failures are reported, not silently repaired.

Constraints

MUST NOT guess at the root cause.
MUST NOT weaken types or tests to hide the defect.
SHOULD preserve public behavior outside the reported issue.
MUST request confirmation before destructive data or configuration changes.

Examples

Input: “The save button stays disabled after an API validation error is corrected.”

Output: Reproduction, state-transition evidence, a focused reset fix, interaction regression test, and validation summary.

Anti-patterns

Adding delays to hide race conditions
Catching and ignoring the failing exception
Rewriting a whole module before proving the defect
Changing expected tests to match broken behavior