Agent skill

Click Path Audit

by affaan-m in affaan-m/ECC

追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。

MITAuto-check passedFrontend & Design

Install Click Path Audit

skills CLI
$ npx skills add affaan-m/ECC --skill click-path-audit -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install affaan-m/ECC click-path-audit --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .claude/skills && cp -r skills-src/docs/zh-CN/skills/click-path-audit .claude/skills/click-path-audit && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
click-path-audit
GitHub stars
276k
Token cost
~1.2k tokens
SKILL.md length
127 words
Files
1
Skills in repo
683
Repo updated
First seen
Licence
MIT

At a glance

追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。

  • Frontend & Design work in your project
  • SKILL.md covers 解决的问题, 工作原理, 执行步骤 and 范围控制, plus 4 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Click Path Audit is an agent skill from affaan-m/ECC. 追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design. It works with Zustand. The repository describes itself as: The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond. The licence is MIT.

When your agent uses it

  • Frontend & Design work in your project

Example prompts

  • “/click-path-audit”

What it can do on your machine

Read from SKILL.md and the folder at commit 4eb71d9. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Click Path Audit loads about 1.2k tokens when it runs. Until then it costs about 31 tokens; SKILL.md has 127 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~31
When it runs · the whole SKILL.md, loaded when a task matches
~1.2k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from affaan-m/ECC at commit 4eb71d9, republished under its MIT licence (© affaan-m). 127 words, ~1,155 tokens.

Download SKILL.mdSave it as .claude/skills/click-path-audit/SKILL.md (or your agent's skills folder).
name
click-path-audit
description
追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。
origin
community

/click-path-audit — 行为流审计

发现静态代码审查遗漏的缺陷:状态交互副作用、顺序调用间的竞态条件,以及相互静默撤销的处理程序。

解决的问题

传统调试检查:

  • 函数是否存在?(缺少连接)
  • 是否崩溃?(运行时错误)
  • 是否返回正确类型?(数据流)

但未检查:

  • 最终 UI 状态是否与按钮标签承诺一致?
  • 函数 B 是否静默撤销了函数 A 刚刚执行的操作?
  • 共享状态(Zustand/Redux/context)是否存在抵消预期操作的副作用?

真实案例:一个"新邮件"按钮依次调用了 setComposeMode(true) 和 selectThread(null)。两者单独工作正常。但 selectThread 有一个副作用重置了 composeMode: false。按钮毫无反应。系统化调试发现了 54 个缺陷——这个被遗漏了。


工作原理

针对目标区域内的每个交互触点:

1. 识别处理函数(onClick、onSubmit、onChange 等)
2. 按顺序追踪处理函数中的每个函数调用
3. 对于每个函数调用:
   a. 它读取了哪些状态?
   b. 它写入了哪些状态?
   c. 它是否对共享状态产生了副作用?
   d. 它是否作为副作用重置/清除了任何状态?
4. 检查:后续调用是否会撤销前面调用的状态变更?
5. 检查:最终状态是否符合用户对按钮标签的预期?
6. 检查:是否存在竞态条件(异步调用以错误顺序解析)?

执行步骤

步骤 1:映射状态存储

在审计任何触点之前,构建每个状态存储操作的副作用映射:

对于作用域内的每个 Zustand 存储 / React 上下文:
  对于每个操作/设置器:
    - 它设置了哪些字段?
    - 它是否作为副作用重置了其他字段?
    - 文档:actionName → {sets: [...], resets: [...]}

这是关键参考。"新邮件"缺陷在不知道 selectThread 重置了 composeMode 的情况下是不可见的。

输出格式:

STORE: emailStore
  setComposeMode(bool) → 设置: {composeMode}
  selectThread(thread|null) → 设置: {selectedThread, selectedThreadId, messages, drafts, selectedDraft, summary} 重置: {composeMode: false, composeData: null, redraftOpen: false}
  setDraftGenerating(bool) → 设置: {draftGenerating}
  ...

危险的重置(清除不属于自身状态的操作):
  selectThread → 重置 composeMode(由 setComposeMode 拥有)
  reset → 重置所有内容
步骤 2:审计每个触点

针对目标区域内的每个按钮/开关/表单提交:

TOUCHPOINT: [按钮标签] 在 [组件:行]
  HANDLER: onClick → {
    调用 1: functionA() → 设置 {X: true}
    调用 2: functionB() → 设置 {Y: null} 重置 {X: false}  ← 冲突
  }
  EXPECTED: 用户看到 [按钮标签所承诺的描述]
  ACTUAL: X 为 false,因为 functionB 重置了它
  VERDICT: BUG — [描述]

检查以下每种缺陷模式:

模式 1:顺序撤销
handler() {
  setState_A(true)     // 设置 X = true
  setState_B(null)     // 副作用:重置 X = false
}
// 结果:X 为 false。第一次调用毫无意义。
模式 2:异步竞态
handler() {
  fetchA().then(() => setState({ loading: false }))
  fetchB().then(() => setState({ loading: true }))
}
// 结果:最终的 loading 状态取决于哪个先完成
模式 3:过期闭包
const [count, setCount] = useState(0)
const handler = useCallback(() => {
  setCount(count + 1)  // 捕获了过时的 count
  setCount(count + 1)  // 同样的过时 count — 只增加 1,而不是 2
}, [count])
模式 4:缺失状态转换
// 按钮显示"保存",但处理程序仅验证,从未实际保存
// 按钮显示"删除",但处理程序设置了一个标志而未调用API
// 按钮显示"发送",但API端点已被移除/损坏
模式 5:条件死路径
handler() {
  if (someState) {        // 此时 someState 始终为 false
    doTheActualThing()    // 永远不会执行到
  }
}
模式 6:useEffect 干扰
// Button 设置 stateX = true
// useEffect 监听 stateX 并将其重置为 false
// 用户看不到任何变化
步骤 3:报告

针对发现的每个缺陷:

CLICK-PATH-NNN: [严重性: 严重/高/中/低]
  触点: [按钮标签] 位于 [文件:行号]
  模式: [顺序撤销 / 异步竞态 / 过期闭包 / 缺失过渡 / 死路径 / useEffect 干扰]
  处理函数: [函数名或内联]
  追踪:
    1. [调用] → 设置 {字段: 值}
    2. [调用] → 重置 {字段: 值}  ← 冲突
  预期: [用户期望的结果]
  实际: [实际发生的结果]
  修复: [具体修复方案]

范围控制

此审计成本较高。请适当限定范围:

  • 全应用审计: 在发布或重大重构后使用。按页面启动并行代理。
  • 单页面审计: 在构建新页面或用户报告按钮失效后使用。
  • 存储聚焦审计: 在修改 Zustand 存储后使用——审计所有使用已更改操作的消费者。
全应用推荐的代理拆分:
Agent 1:映射所有状态存储(步骤 1)——这是所有其他代理的共享上下文
Agent 2:仪表盘(任务、笔记、日志、想法)
Agent 3:聊天(DanteChatColumn、JustChatPage)
Agent 4:邮件(ThreadList、DraftArea、EmailsPage)
Agent 5:项目(ProjectsPage、ProjectOverviewTab、NewProjectWizard)
Agent 6:CRM(所有子标签页)
Agent 7:个人资料、设置、保险库、通知
Agent 8:管理套件(所有页面)

代理 1 必须首先完成。其输出是所有其他代理的输入。


何时使用

  • 系统化调试发现"无缺陷"但用户报告 UI 失效后
  • 修改任何 Zustand 存储操作后(检查所有调用者)
  • 任何涉及共享状态的重构后
  • 发布前,针对关键用户流程
  • 当按钮"无反应"时——这是解决该问题的工具

何时不使用

  • 针对 API 级别缺陷(错误的响应结构、缺失端点)——使用系统化调试
  • 针对样式/布局问题——视觉检查
  • 针对性能问题——性能分析工具

与其他技能的集成

  • 在 /superpowers:systematic-debugging(发现其他 54 种缺陷类型)之后运行
  • 在 /superpowers:verification-before-completion(验证修复是否有效)之前运行
  • 反馈至 /superpowers:test-driven-development——此处发现的每个缺陷都应添加测试

示例:启发此技能的缺陷

ThreadList.tsx "新邮件"按钮:

onClick={() => {
  useEmailStore.getState().setComposeMode(true)   // ✓ 设置 composeMode = true
  useEmailStore.getState().selectThread(null)      // ✗ 重置 composeMode = false
}}

存储定义:

selectThread: (thread) => set({
  selectedThread: thread,
  selectedThreadId: thread?.id ?? null,
  messages: [],
  drafts: [],
  selectedDraft: null,
  summary: null,
  composeMode: false,     // ← 这个静默重置导致按钮失效
  composeData: null,
  redraftOpen: false,
})

系统化调试遗漏了它,因为:

  • 按钮有 onClick 处理程序(未失效)
  • 两个函数都存在(无缺失连接)
  • 两个函数均未崩溃(无运行时错误)
  • 数据类型正确(无类型不匹配)

点击路径审计捕获了它,因为:

  • 步骤 1 映射出 selectThread 重置了 composeMode
  • 步骤 2 追踪处理程序:调用 1 设置为 true,调用 2 重置为 false
  • 判定:顺序撤销——最终状态与按钮意图矛盾

© affaan-m, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in docs/zh-CN/skills/click-path-audit of affaan-m/ECC.

Open the folder on GitHubat commit 4eb71d9

Compare with similar skills

Click Path Audit next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Click Path Audit compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Click Path Audit this skillaffaan-m/ECC276k—~1.2kAutomated safety check: PassMIT
React State Managementinvolvex/youtube-music-cli45613 repos~3kAutomated safety check: PassMIT
LobeHub Data Fetching Layerslobehub/lobehub83k—~1.8kAutomated safety check: PassCustom licence
I18nhuoshen80/ReinaManager697—~177Automated safety check: PassAGPL-3.0
Create Storeryokun6/ryos1.3k—~2.1kAutomated safety check: PassAGPL-3.0
Nextjs15 Initbear2u/my-skills932—~2.4kAutomated safety check: PassNone

Similar skills

  • React State Management

    involvex/youtube-music-cli

    Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.

    456 GitHub starsUsed in 13 repos~3k tokens
    Frontend & DesignAuto-check passed
  • Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.

    83k GitHub stars~1.8k tokensUpdated today
    Frontend & DesignAuto-check passed
  • I18n

    huoshen80/ReinaManager

    使用 i18next-cli 检查、同步和整理本项目的国际化资源。涉及新增、修改、删除翻译键或国际化字符串,以及修复缺失翻译时使用。

    697 GitHub stars~177 tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Create Store

    ryokun6/ryos

    Create or modify ryOS Zustand stores following repo conventions — persist middleware, partialize, versioned migrations, the debounced write-behind storage adapter for large slices, and cloud-sync…

    1.3k GitHub stars~2.1k tokensUpdated yesterday
    Frontend & DesignAuto-check passed
  • Nextjs15 Init

    bear2u/my-skills

    A skill your agent uses when user wants to create a new Next.js 15 project (Todo/Blog/Dashboard/E-commerce/Custom domain) with App Router, ShadCN, Zustand, Tanstack Query, and modern Next.js stack

    932 GitHub stars~2.4k tokensUpdated 3 mo ago
    Frontend & DesignAuto-check passed
  • Xray UI Dev

    bropines/xray-config-ui-editor

    Development and maintenance of Xray Config UI Editor. An agent skill from bropines/xray-config-ui-editor.

    117 GitHub stars~942 tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

More from affaan-m/ECC

All 683 skills in this repo
  • Skill Stocktake

    affaan-m/ECC

    Audits your installed Claude skills and commands for quality, with a quick mode for recently changed skills and a full mode that evaluates all of them through subagents.

    276k GitHub starsUsed in 5 repos~3.1k tokens
    Auto-check passed
  • Ingests, indexes, searches, edits and monitors video, audio and live streams through the VideoDB Python SDK, returning stream links, clips and timestamps.

    276k GitHub starsUsed in 3 repos~3.5k tokens
    Auto-check: notes
  • Docs Governance

    affaan-m/ECC

    Route broad documentation-governance requests to existing ECC skills and run an opt-in, read-only audit of mapped documentation roles, links, ADR indexes, and evidence references.

    276k GitHub stars~1.1k tokensUpdated today
    Auto-check passed
  • Rules Distillation

    affaan-m/ECC

    Scans installed skills for principles that recur across them and proposes rule-file changes: append, revise, add a section, create a file or leave as covered.

    276k GitHub starsUsed in 2 repos~2.3k tokens
    Auto-check passed
  • Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.

    276k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Measures whether agents actually follow a skill, rule or agent definition by generating scenarios at three strictness levels and scoring tool-call traces.

    276k GitHub starsUsed in 1 repo~623 tokens
    Auto-check passed

Works with

Questions about Click Path Audit

What does Click Path Audit do?

追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。. Click Path Audit is an agent skill from affaan-m/ECC.

When should I use Click Path Audit?

Click Path Audit fits situations like: frontend & Design work in your project.

How do I install Click Path Audit in Claude Code?

Run `npx skills add affaan-m/ECC --skill click-path-audit -a claude-code`. Or copy the skill folder (docs/zh-CN/skills/click-path-audit in affaan-m/ECC) into .claude/skills/click-path-audit in your project. Claude Code loads it when a task matches its description.

How do I install Click Path Audit in Codex?

Run `npx skills add affaan-m/ECC --skill click-path-audit -a codex`. Or copy the skill folder (docs/zh-CN/skills/click-path-audit in affaan-m/ECC) into .agents/skills/click-path-audit in your project. Codex loads it when a task matches its description.

Can I use Click Path Audit in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add affaan-m/ECC --skill click-path-audit -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/click-path-audit, .gemini/skills/click-path-audit, .github/skills/click-path-audit and .opencode/skills/click-path-audit in your project.

What does Click Path Audit need to run?

SKILL.md names no scripts, command-line tools or credentials: Click Path Audit is instructions for the agent only.

Does Click Path Audit access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Click Path Audit safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Click Path Audit use?

Click Path Audit is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Click Path Audit use?

About 1.2k tokens (SKILL.md is roughly 4.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Click Path Audit?

Skills that share tags, products or a category with Click Path Audit: React State Management (involvex/youtube-music-cli, 456 stars), LobeHub Data Fetching Layers (lobehub/lobehub, 83k stars), I18n (huoshen80/ReinaManager, 697 stars) and Create Store (ryokun6/ryos, 1.3k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Click Path Audit?

affaan-m (a GitHub user) maintains it in affaan-m/ECC, which has 276,111 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 10, 2026.

Source: affaan-m/ECC on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.