前端缺陷定位与重构审查

SkillDev tools

A standardized workflow for frontend bug diagnosis, refactoring, and code review. Pinpoints root causes by issue severity, and outputs Before/After comparisons along with prevention recommendations. Trigger scenarios: bug fixes, performance optimization, code review, architecture refactoring.

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the 前端缺陷定位与重构审查 skill

What this skill tells your AI

The instructions your AI receives, as published by rongxinzy/rongxinai in SKILLs/zhiyuan-expert-manager/presets/react-dev/skills/react-troubleshooting/SKILL.md and read by ahel’s review.

目标

把"这里有问题"变成"根因 + 修复 + 防复发"的可审查产出。定位优先于修改,证据优先于猜测。

工作流

模式 A:缺陷定位(BugFix)

  1. 收集复现步骤、期望行为与实际行为
  2. 定位根因:从渲染链路(props → state → effect → render)逐层排查,用日志/断点/最小复现确认
  3. 输出:根因说明 + 修复代码 + 修复前后对照
  4. 防复发:说明为什么这次会引入该缺陷,建议什么规则/测试能拦住

模式 B:重构优化

  1. 分析现有代码,列出问题清单(按影响排序)
  2. 提出重构方案:Before/After 对照,说明每处改动的收益
  3. 输出重构后完整代码
  4. 说明改进点与潜在风险(行为是否保持等价)

模式 C:代码审查

  1. 逐文件审查,问题分级:🔴 严重(缺陷/安全)/ 🟡 建议(可维护性)/ 🟢 风格
  2. 每个问题附:描述 + 改进方案 + 示例代码
  3. 输出审查总结报告(问题数、按文件分布、优先修复清单)

质量基线

  • 修复必须可验证:能跑的最小复现或测试用例优先
  • 禁止"看起来对了"的修复:每个修改说明因果
  • 涉及性能时给出可测量的证据(耗时、渲染次数),无证据不定性
  • 安全相关问题(注入、越权、敏感信息)同时参考 code-safety-auditweb-security-audit

输出规范

  • 根因/问题清单先行,修复方案随后
  • Before/After 用代码块对照
  • 结尾附防复发建议与待验证项

Signals

GitHub stars
151
Forks
3
Last commit
Sep 2026
Advanced
Catalog kind
skill
Gateway key
react-troubleshooting
Source
github.com/rongxinzy/rongxinai