用途
click-path-audit 是一个行为流程审计技能,专门用于发现静态代码阅读容易遗漏的缺陷:状态交互副作用、顺序调用之间的竞态条件,以及处理函数之间相互静默抵消的问题。
传统调试通常检查:函数是否存在(是否缺少接线)、是否崩溃(运行时错误)、是否返回正确类型(数据流)。但它不会检查:最终 UI 状态是否与按钮标签承诺的一致、函数 B 是否静默撤销了函数 A 刚做的事、共享状态(Zustand/Redux/context)是否存在抵消预期操作的副作用。
一个真实例子:一个“New Email”按钮先调用 setComposeMode(true),再调用 selectThread(null)。两个函数单独都能工作,但 selectThread 有一个副作用会把 composeMode 重置为 false。结果按钮什么也没做。在系统性调试发现的 54 个缺陷中,这个被遗漏了。
主要能力
该技能针对目标区域内每一个交互触点执行以下流程:
- 识别处理函数(onClick、onSubmit、onChange 等)。
- 按顺序追踪处理函数中的每一次函数调用。
- 对每次函数调用检查:读取了哪些状态、写入了哪些状态、是否对共享状态有副作用、是否作为副作用重置或清除了任何状态。
- 检查后续调用是否撤销了先前调用的状态变更。
- 检查最终状态是否符合用户对按钮标签的预期。
- 检查是否存在竞态条件(异步调用以错误顺序完成)。
它覆盖的缺陷模式包括:顺序撤销、异步竞态、过期闭包、缺失状态转换、条件死路径、useEffect 干扰。
使用方式
执行分为三步。
第一步:映射状态存储
在审计任何触点之前,先为作用域内每个状态存储动作建立副作用映射。对每个 Zustand store 或 React context,记录每个 action/setter 设置了哪些字段、是否作为副作用重置其他字段,并输出类似以下格式:
STORE: emailStore setComposeMode(bool) → sets: {composeMode} selectThread(thread|null) → sets: {selectedThread, selectedThreadId, messages, drafts, selectedDraft, summary} RESETS: {composeMode: false, composeData: null, redraftOpen: false}
同时标记危险重置,即那些清除了不属于自己状态的 action。
第二步:审计每个触点
对目标区域内每个按钮、开关或表单提交,按顺序追踪处理函数中的调用,并记录预期、实际结果与判定。例如:
TOUCHPOINT: [Button label] in [Component:line] HANDLER: onClick → { call 1: functionA() → sets {X: true} call 2: functionB() → sets {Y: null} RESETS {X: false} ← CONFLICT } EXPECTED: User sees [description of what button label promises] ACTUAL: X is false because functionB reset it VERDICT: BUG — [description]
第三步:报告
对每个发现的缺陷输出编号、严重级别、触点位置、模式、处理函数、追踪过程、预期、实际与修复建议。
适用场景
- 系统性调试报告“无缺陷”,但用户反馈 UI 损坏时。
- 修改任何 Zustand store action 之后(检查所有调用方)。
- 任何触及共享状态的重构之后。
- 发布前,针对关键用户流程。
- 当按钮“什么也不做”时,这是专门用于该问题的工具。
限制
该审计成本较高,需要合理控制范围。完整应用审计适用于发布或重大重构后,可按页面并行拆分代理;单页审计适用于新建页面后或用户报告按钮损坏后;存储聚焦审计适用于修改 Zustand store 后。
不适用于:API 层缺陷(响应结构错误、端点缺失),应使用 systematic-debugging;样式或布局问题,应使用视觉检查;性能问题,应使用性能分析工具。
与其他技能的集成
应在 /superpowers:systematic-debugging 之后运行(后者发现其他 54 类缺陷),在 /superpowers:verification-before-completion 之前运行(后者验证修复有效),并可为 /superpowers:test-driven-development 提供输入——此处发现的每个缺陷都应获得一个测试。