click-path-audit

click-path-audit 技能概览

click-path-audit 是用来做什么的

click-path-audit 技能是一种行为路径审计方法，专门用来揪出常规调试经常漏掉的 UI 问题。它会帮助你沿着用户可见的点击或输入路径，从事件处理器一路追到每一次状态变化，找出那些单看每一步都“没问题”，但连起来就会出错的情况。

谁应该使用它

如果某个按钮在代码里“看起来能用”，到了产品里却不生效，尤其是在改动了 Redux、Zustand 或 context 这类共享状态之后，就适合用 click-path-audit 技能。它很适合代码审查、重构后的验证，以及那些明明没有报错、却只说“UI 没反应”的排查场景。

它为什么不一样

click-path-audit 的核心价值在于它关注的是最终 UI 状态，而不只是函数本身对不对。它最适合排查由副作用、执行顺序，或某个处理器把另一个处理器的结果覆盖掉而导致的问题。相比通用提示词，它更聚焦；相比不带检查清单地逐个文件阅读，它也更实用。

如何使用 click-path-audit 技能

安装并加载该技能

在你的 Claude Code 环境中安装 click-path-audit 技能，命令如下：

npx skills add affaan-m/everything-claude-code --skill click-path-audit

然后从 skills/click-path-audit/SKILL.md 开始。由于这个仓库没有附带配套的规则文件，核心说明都集中在这一个技能文件里。

提供合适的输入

想要得到更好的结果，请明确描述具体的用户动作、所在页面或组件，以及预期的最终状态。一个弱提示会说“检查保存按钮”；更好的 click-path-audit usage 提示会写成：“审计个人资料编辑器里的 Save 按钮。它应该保存姓名修改、关闭弹窗，并在重新渲染后仍能看到更新后的数据。”

使用聚焦的审查流程

先阅读技能文件，再检查处理器链、状态存储，以及按顺序被调用的辅助函数。click-path-audit for Code Review 的重点是验证完整点击路径，而不只是确认每个函数单独看起来是否正确。要跟踪读取、写入、副作用，以及任何可能把预期结果抵消掉的重置逻辑。

需要重点留意什么

优先关注状态冲突、顺序覆盖、过期读取，以及“看起来成功了”但其实是假的成功路径。这个技能在 UI 文案承诺的是一种结果、但最后一次写入却产生了不同结果时尤其有用。如果你的应用很简单，没有共享状态或多步骤交互，普通提示词可能就够了。

click-path-audit 技能常见问题

click-path-audit 只是另一种调试提示词吗？

不是。click-path-audit 技能是一种结构化的审计方法，专门用于按执行顺序理解 UI 问题。它的设计目标是发现那些不会表现为崩溃、缺失处理器或类型错误的 bug。

什么时候不该用它？

如果问题只是一个明显的 import 断裂、语法错误，或者一个没有链式状态影响的孤立函数 bug，就可以先不安装 click-path-audit。当改动只发生在局部、也没有值得追踪的交互流程时，它的价值会小很多。

它适合新手吗？

适合，只要你能清楚描述用户动作。关键要求是把起始状态、动作和预期结束状态说具体。这样 click-path-audit guide 更容易应用，也能减少猜测。

它适用于大多数前端技术栈吗？

它最适合有事件处理器和共享状态存储的应用，包括 React 风格架构。如果 UI 依赖非常隐式的行为，或者大量依赖服务端驱动的切换，你可能需要把它和仓库特定检查结合起来使用。

如何改进 click-path-audit 技能

从一个具体的用户流程开始

最好的输入会明确一个控件、一条路径和一个结果。比如：“审计设置弹窗里的 Delete 按钮。它应该移除该项、刷新列表，并且不要让弹窗重新打开。”这样技能就有足够的结构去追踪状态变化，而不是靠猜测意图。

补充相关上下文

把组件、相关的 store 文件，以及这次交互里涉及的 action 或 hook 一并提供出来。如果问题出在重构之后，也要说明改了什么、原来是怎么工作的。对 click-path-audit 来说，最有价值的上下文就是那些可能读写同一份状态的代码。

对第一次结果继续迭代

如果第一轮没有发现问题，就把提示词收紧到具体的状态变量，以及链路里的最后一次写入。可以要求对同一流程再从处理器到重新渲染做一次审计，或者对比“预期最终状态”和“动作后的实际状态”。通常隐藏 bug 就是在这里暴露出来的。

把结果转化为下一次审计的改进点

当技能真的找到了 bug，就把它沉淀成以后 click-path-audit 使用时可复用的模式：是哪一个 store、哪一个副作用、哪一个顺序错误、以及是哪种 UI 症状暴露了问题。随着时间推移，这会让代码审查更快，也会让这个技能在类似交互 bug 上更有效。