点了一直没反应？这个技能专门抓「按钮失灵」的状态交互 bug

你有没有遇到过这种 bug：按钮点了，代码也跑了，变量也对，但界面就是纹丝不动？

更诡异的是，你单步调试了半天，每一步都「正确」——函数存在、没报错、返回值也正常。可最终状态就是不对。

这种 bug，业界有个专门的名字：状态交互副作用。

一个真实到可怕的案例

ECC 团队给过一个真实案例：一个「新建邮件」按钮，点击后啥也没发生。

代码是这样的：

onClick={() => {
  setComposeMode(true)   // ✓ 设置成功
  selectThread(null)     // ✗ 副作用：重置了 composeMode
}}

两个函数单独看都没问题。setComposeMode 确实把写信模式打开了，selectThread 也确实清空了当前会话。但 selectThread 的内部实现里有个副作用——它会把 composeMode 重置为 false。

所以用户看到的结果：按钮点了，等于没点。

这就是 click-path-audit 要解决的问题

这个 Skill（来自 ECC，即 everything-claude-code，GitHub 38.3 万星）专门审计 UI 状态交互问题。它不查「函数有没有」，而是查「多个函数组合在一起时，状态到底发生了什么」。

核心工作流分三步：

• 第一步：建立状态副作用地图。 把所有 Zustand/Redux/Context store 的每个 action 记录下来——它设了什么字段，同时「顺手」重置了什么字段。
• 第二步：逐个审计交互点。 每个按钮、开关、表单提交，都追踪完整调用链，按顺序记录每个调用读写什么状态、有什么副作用。
• 第三步：检测问题模式。 顺序撤销（后调用的函数 undo 先调用的）、异步竞态、陈旧闭包、缺失状态迁移、useEffect 干扰——这六种模式全覆盖。

它还建议在大型应用里用多 Agent 并行：Agent 1 做全局状态地图，其他 Agent 分页面审计，最后汇总。

什么场景下用它

如果你正在开发一个复杂的 React/Vue 前端应用，用了状态管理库（Zustand、Redux、Context），遇到以下情况，click-path-audit 就是正解：

• 用户反馈「按钮点了没反应」，但你单步调试找不到问题
• 重构了某个共享状态逻辑，之后莫名其妙出现各种奇怪的 UI 状态
• 每次调试都说「函数没问题」，但产品就是报错

怎么安装使用

在 Claude Code 里直接安装：

/click-path-audit

AI agent 会自动引导你完成整个审计流程，最后输出带编号的问题清单和具体修复建议。

对于前端团队来说，这个 Skill 解决的是传统调试方法里最薄弱的那一环——函数与函数之间的状态交互。建议收藏，遇到诡异 bug 时真的能救命。

GitHub 地址 →

GitHub: https://github.com/affaan-m/ECC/tree/main/skills/click-path-audit