React State Management
involvex/youtube-music-cli
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.
追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。
$ npx skills add affaan-m/ECC --skill click-path-audit -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install affaan-m/ECC click-path-audit --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ 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-srcUse ~/.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/
Install the "click-path-audit" agent skill from https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/click-path-audit into .claude/skills/click-path-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "click-path-audit", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/click-path-auditType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add affaan-m/ECC --skill click-path-audit -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install affaan-m/ECC click-path-audit --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .agents/skills && cp -r skills-src/docs/zh-CN/skills/click-path-audit .agents/skills/click-path-audit && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "click-path-audit" agent skill from https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/click-path-audit into .agents/skills/click-path-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "click-path-audit", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add affaan-m/ECC --skill click-path-audit -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install affaan-m/ECC click-path-audit --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/docs/zh-CN/skills/click-path-audit .cursor/skills/click-path-audit && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "click-path-audit" agent skill from https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/click-path-audit into .cursor/skills/click-path-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "click-path-audit", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/affaan-m/ECC.git --path docs/zh-CN/skills/click-path-audit--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add affaan-m/ECC --skill click-path-audit -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install affaan-m/ECC click-path-audit --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/docs/zh-CN/skills/click-path-audit .gemini/skills/click-path-audit && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "click-path-audit" agent skill from https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/click-path-audit into .gemini/skills/click-path-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "click-path-audit", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install affaan-m/ECC click-path-auditInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add affaan-m/ECC --skill click-path-audit -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .github/skills && cp -r skills-src/docs/zh-CN/skills/click-path-audit .github/skills/click-path-audit && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "click-path-audit" agent skill from https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/click-path-audit into .github/skills/click-path-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "click-path-audit", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add affaan-m/ECC --skill click-path-audit -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install affaan-m/ECC click-path-audit --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/affaan-m/ECC.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/docs/zh-CN/skills/click-path-audit .opencode/skills/click-path-audit && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "click-path-audit" agent skill from https://github.com/affaan-m/ECC/tree/main/docs/zh-CN/skills/click-path-audit into .opencode/skills/click-path-audit/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "click-path-audit", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
click-path-audit追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。
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.
Read from SKILL.md and the folder at commit 4eb71d9. It shows what the files ask for, not the result of running them.
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.
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.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
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.
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.
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.
The full file from affaan-m/ECC at commit 4eb71d9, republished under its MIT licence (© affaan-m). 127 words, ~1,155 tokens.
.claude/skills/click-path-audit/SKILL.md (or your agent's skills folder).发现静态代码审查遗漏的缺陷:状态交互副作用、顺序调用间的竞态条件,以及相互静默撤销的处理程序。
传统调试检查:
但未检查:
真实案例:一个"新邮件"按钮依次调用了 setComposeMode(true) 和 selectThread(null)。两者单独工作正常。但 selectThread 有一个副作用重置了 composeMode: false。按钮毫无反应。系统化调试发现了 54 个缺陷——这个被遗漏了。
针对目标区域内的每个交互触点:
1. 识别处理函数(onClick、onSubmit、onChange 等)
2. 按顺序追踪处理函数中的每个函数调用
3. 对于每个函数调用:
a. 它读取了哪些状态?
b. 它写入了哪些状态?
c. 它是否对共享状态产生了副作用?
d. 它是否作为副作用重置/清除了任何状态?
4. 检查:后续调用是否会撤销前面调用的状态变更?
5. 检查:最终状态是否符合用户对按钮标签的预期?
6. 检查:是否存在竞态条件(异步调用以错误顺序解析)?在审计任何触点之前,构建每个状态存储操作的副作用映射:
对于作用域内的每个 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 → 重置所有内容针对目标区域内的每个按钮/开关/表单提交:
TOUCHPOINT: [按钮标签] 在 [组件:行]
HANDLER: onClick → {
调用 1: functionA() → 设置 {X: true}
调用 2: functionB() → 设置 {Y: null} 重置 {X: false} ← 冲突
}
EXPECTED: 用户看到 [按钮标签所承诺的描述]
ACTUAL: X 为 false,因为 functionB 重置了它
VERDICT: BUG — [描述]检查以下每种缺陷模式:
handler() {
setState_A(true) // 设置 X = true
setState_B(null) // 副作用:重置 X = false
}
// 结果:X 为 false。第一次调用毫无意义。handler() {
fetchA().then(() => setState({ loading: false }))
fetchB().then(() => setState({ loading: true }))
}
// 结果:最终的 loading 状态取决于哪个先完成const [count, setCount] = useState(0)
const handler = useCallback(() => {
setCount(count + 1) // 捕获了过时的 count
setCount(count + 1) // 同样的过时 count — 只增加 1,而不是 2
}, [count])// 按钮显示"保存",但处理程序仅验证,从未实际保存
// 按钮显示"删除",但处理程序设置了一个标志而未调用API
// 按钮显示"发送",但API端点已被移除/损坏handler() {
if (someState) { // 此时 someState 始终为 false
doTheActualThing() // 永远不会执行到
}
}// Button 设置 stateX = true
// useEffect 监听 stateX 并将其重置为 false
// 用户看不到任何变化针对发现的每个缺陷:
CLICK-PATH-NNN: [严重性: 严重/高/中/低]
触点: [按钮标签] 位于 [文件:行号]
模式: [顺序撤销 / 异步竞态 / 过期闭包 / 缺失过渡 / 死路径 / useEffect 干扰]
处理函数: [函数名或内联]
追踪:
1. [调用] → 设置 {字段: 值}
2. [调用] → 重置 {字段: 值} ← 冲突
预期: [用户期望的结果]
实际: [实际发生的结果]
修复: [具体修复方案]此审计成本较高。请适当限定范围:
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 必须首先完成。其输出是所有其他代理的输入。
/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,
})系统化调试遗漏了它,因为:
点击路径审计捕获了它,因为:
selectThread 重置了 composeMode© 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
Just SKILL.md in docs/zh-CN/skills/click-path-audit of affaan-m/ECC.
Open the folder on GitHubat commit 4eb71d9
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Click Path Audit this skillaffaan-m/ECC | 276k | — | ~1.2k | Automated safety check: Pass | MIT | |
| React State Managementinvolvex/youtube-music-cli | 456 | 13 repos | ~3k | Automated safety check: Pass | MIT | |
| LobeHub Data Fetching Layerslobehub/lobehub | 83k | — | ~1.8k | Automated safety check: Pass | Custom licence | |
| I18nhuoshen80/ReinaManager | 697 | — | ~177 | Automated safety check: Pass | AGPL-3.0 | |
| Create Storeryokun6/ryos | 1.3k | — | ~2.1k | Automated safety check: Pass | AGPL-3.0 | |
| Nextjs15 Initbear2u/my-skills | 932 | — | ~2.4k | Automated safety check: Pass | None |
involvex/youtube-music-cli
Master modern React state management with Redux Toolkit, Zustand, Jotai, and React Query.
lobehub/lobehub
Explains how LobeHub client code fetches data through services, SWR store hooks and cache keys, and when to avoid useEffect fetching or duplicated state.
huoshen80/ReinaManager
使用 i18next-cli 检查、同步和整理本项目的国际化资源。涉及新增、修改、删除翻译键或国际化字符串,以及修复缺失翻译时使用。
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…
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
bropines/xray-config-ui-editor
Development and maintenance of Xray Config UI Editor. An agent skill from bropines/xray-config-ui-editor.
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.
affaan-m/ECC
Ingests, indexes, searches, edits and monitors video, audio and live streams through the VideoDB Python SDK, returning stream links, clips and timestamps.
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.
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.
affaan-m/ECC
Builds DRAFT counterparty agreements from one markdown template and a small JSON spec per party, with clauses picked by the party's role.
affaan-m/ECC
Measures whether agents actually follow a skill, rule or agent definition by generating scenarios at three strictness levels and scoring tool-call traces.
Works with
Categories
追踪每个面向用户的按钮/触点的完整状态变化序列,以发现功能单独工作但相互抵消、产生错误最终状态或使UI处于不一致状态的错误。适用于:系统调试未发现错误但用户报告按钮失效,或在任何涉及共享状态存储的重大重构之后。. Click Path Audit is an agent skill from affaan-m/ECC.
Click Path Audit fits situations like: frontend & Design work in your project.
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.
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.
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.
SKILL.md names no scripts, command-line tools or credentials: Click Path Audit is instructions for the agent only.
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.
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.
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.
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.
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.
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.