Agent skill

Click Path Audit

by affaan-m in affaan-m/ECC

Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI…

MITAuto-check passedDevelopment

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/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
277k
Used in
3 other repos
Token cost
~2k tokens
SKILL.md length
486 words
Files
1
Skills in repo
683
Repo updated
First seen
Licence
MIT

At a glance

Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI…

  • Works in 3 steps: Map State Stores → Audit Each Touchpoint → Report
  • : systematic debugging found no bugs but users report broken buttons
  • SKILL.md covers The Problem This Solves, How It Works, Execution Steps and Scope Control, 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. Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI in an inconsistent state. Use when: systematic debugging found no bugs but users report broken buttons, or after any major refactor touching shared state stores.

Its SKILL.md is about 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 Development, covering Debugging, Customer journey mapping and Refactoring. 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

  • : systematic debugging found no bugs but users report broken buttons
  • After any major refactor touching shared state stores

Example prompts

  • “/click-path-audit”

Workflow steps

3 steps, taken from the step headings in SKILL.md.

  1. Map State Stores
  2. Audit Each Touchpoint
  3. Report

What it can do on your machine

Read from SKILL.md and the folder at commit 2d515e4. 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 2k tokens when it runs. Until then it costs about 94 tokens; SKILL.md has 486 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~94
When it runs · the whole SKILL.md, loaded when a task matches
~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 2d515e4, republished under its MIT licence (© affaan-m). 486 words, ~1,980 tokens.

Download SKILL.mdSave it as .claude/skills/click-path-audit/SKILL.md (or your agent's skills folder).
name
click-path-audit
description
Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI in an inconsistent state. Use when: systematic debugging found no bugs but users report broken buttons, or after any major refactor touching shared state stores.
metadata.origin
community

/click-path-audit — Behavioural Flow Audit

Find bugs that static code reading misses: state interaction side effects, race conditions between sequential calls, and handlers that silently undo each other.

The Problem This Solves

Traditional debugging checks:

  • Does the function exist? (missing wiring)
  • Does it crash? (runtime errors)
  • Does it return the right type? (data flow)

But it does NOT check:

  • Does the final UI state match what the button label promises?
  • Does function B silently undo what function A just did?
  • Does shared state (Zustand/Redux/context) have side effects that cancel the intended action?

Real example: A "New Email" button called setComposeMode(true) then selectThread(null). Both worked individually. But selectThread had a side effect resetting composeMode: false. The button did nothing. 54 bugs were found by systematic debugging — this one was missed.


How It Works

For EVERY interactive touchpoint in the target area:

1. IDENTIFY the handler (onClick, onSubmit, onChange, etc.)
2. TRACE every function call in the handler, IN ORDER
3. For EACH function call:
   a. What state does it READ?
   b. What state does it WRITE?
   c. Does it have SIDE EFFECTS on shared state?
   d. Does it reset/clear any state as a side effect?
4. CHECK: Does any later call UNDO a state change from an earlier call?
5. CHECK: Is the FINAL state what the user expects from the button label?
6. CHECK: Are there race conditions (async calls that resolve in wrong order)?

Execution Steps

Step 1: Map State Stores

Before auditing any touchpoint, build a side-effect map of every state store action:

For each Zustand store / React context in scope:
  For each action/setter:
    - What fields does it set?
    - Does it RESET other fields as a side effect?
    - Document: actionName → {sets: [...], resets: [...]}

This is the critical reference. The "New Email" bug was invisible without knowing that selectThread resets composeMode.

Output format:

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

DANGEROUS RESETS (actions that clear state they don't own):
  selectThread → resets composeMode (owned by setComposeMode)
  reset → resets everything
Step 2: Audit Each Touchpoint

For each button/toggle/form submit in the target area:

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]

Check each of these bug patterns:

Pattern 1: Sequential Undo
handler() {
  setState_A(true)     // sets X = true
  setState_B(null)     // side effect: resets X = false
}
// Result: X is false. First call was pointless.
Pattern 2: Async Race
handler() {
  fetchA().then(() => setState({ loading: false }))
  fetchB().then(() => setState({ loading: true }))
}
// Result: final loading state depends on which resolves first
Pattern 3: Stale Closure
const [count, setCount] = useState(0)
const handler = useCallback(() => {
  setCount(count + 1)  // captures stale count
  setCount(count + 1)  // same stale count — increments by 1, not 2
}, [count])
Pattern 4: Missing State Transition
// Button says "Save" but handler only validates, never actually saves
// Button says "Delete" but handler sets a flag without calling the API
// Button says "Send" but the API endpoint is removed/broken
Pattern 5: Conditional Dead Path
handler() {
  if (someState) {        // someState is ALWAYS false at this point
    doTheActualThing()    // never reached
  }
}
Pattern 6: useEffect Interference
// Button sets stateX = true
// A useEffect watches stateX and resets it to false
// User sees nothing happen
Step 3: Report

For each bug found:

CLICK-PATH-NNN: [severity: CRITICAL/HIGH/MEDIUM/LOW]
  Touchpoint: [Button label] in [file:line]
  Pattern: [Sequential Undo / Async Race / Stale Closure / Missing Transition / Dead Path / useEffect Interference]
  Handler: [function name or inline]
  Trace:
    1. [call] → sets {field: value}
    2. [call] → RESETS {field: value}  ← CONFLICT
  Expected: [what user expects]
  Actual: [what actually happens]
  Fix: [specific fix]

Scope Control

This audit is expensive. Scope it appropriately:

  • Full app audit: Use when launching or after major refactor. Launch parallel agents per page.
  • Single page audit: Use after building a new page or after a user reports a broken button.
  • Store-focused audit: Use after modifying a Zustand store — audit all consumers of the changed actions.
Show full SKILL.md (200 more words)Show less
Agent 1: Map ALL state stores (Step 1) — this is shared context for all other agents
Agent 2: Dashboard (Tasks, Notes, Journal, Ideas)
Agent 3: Chat (DanteChatColumn, JustChatPage)
Agent 4: Emails (ThreadList, DraftArea, EmailsPage)
Agent 5: Projects (ProjectsPage, ProjectOverviewTab, NewProjectWizard)
Agent 6: CRM (all sub-tabs)
Agent 7: Profile, Settings, Vault, Notifications
Agent 8: Management Suite (all pages)

Agent 1 MUST complete first. Its output is input for all other agents.


When to Use

  • After systematic debugging finds "no bugs" but users report broken UI
  • After modifying any Zustand store action (check all callers)
  • After any refactor that touches shared state
  • Before release, on critical user flows
  • When a button "does nothing" — this is THE tool for that

When NOT to Use

  • For API-level bugs (wrong response shape, missing endpoint) — use systematic-debugging
  • For styling/layout issues — visual inspection
  • For performance issues — profiling tools

Integration with Other Skills

  • Run AFTER /superpowers:systematic-debugging (which finds the other 54 bug types)
  • Run BEFORE /superpowers:verification-before-completion (which verifies fixes work)
  • Feeds into /superpowers:test-driven-development — every bug found here should get a test

Example: The Bug That Inspired This Skill

ThreadList.tsx "New Email" button:

onClick={() => {
  useEmailStore.getState().setComposeMode(true)   // ✓ sets composeMode = true
  useEmailStore.getState().selectThread(null)      // ✗ RESETS composeMode = false
}}

Store definition:

selectThread: (thread) => set({
  selectedThread: thread,
  selectedThreadId: thread?.id ?? null,
  messages: [],
  drafts: [],
  selectedDraft: null,
  summary: null,
  composeMode: false,     // ← THIS silent reset killed the button
  composeData: null,
  redraftOpen: false,
})

Systematic debugging missed it because:

  • The button has an onClick handler (not dead)
  • Both functions exist (no missing wiring)
  • Neither function crashes (no runtime error)
  • The data types are correct (no type mismatch)

Click-path audit catches it because:

  • Step 1 maps selectThread resets composeMode
  • Step 2 traces the handler: call 1 sets true, call 2 resets false
  • Verdict: Sequential Undo — final state contradicts button intent

© 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 skills/click-path-audit of affaan-m/ECC.

Open the folder on GitHubat commit 2d515e4

Used in 3 other repositories

We found 4 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in affaan-m/ECC, which our catalogue first saw on October 7, 2026.

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/ECC277k3 repos~2kAutomated safety check: PassMIT
Code ChangesJanDeDobbeleer/oh-my-posh24k—~1.1kAutomated safety check: PassMIT
Code Review Graph Navigatorhandsontable/handsontable22k—~939Automated safety check: PassCustom licence
Csharp Refactoringmicrosoft/testfx1k2 repos~3.1kAutomated safety check: PassMIT
Analyze Projectlllllllama/RigorPilot-Skills4971 repos~519Automated safety check: PassMIT
Andrej Karpathy Skillduolahypercho/andrej-karpathy-skills249—~793Automated safety check: PassMIT

Similar skills

  • Code Changes

    JanDeDobbeleer/oh-my-posh

    Workflow for any task that ends in code changes: issue analysis or triage, pull request review comments, features, bug fixes, refactors.

    24k GitHub stars~1.1k tokensUpdated today
    DevelopmentAuto-check passed
  • Code Review Graph Navigator

    handsontable/handsontable

    Queries a pre-built, Tree-sitter-based code graph of the whole monorepo instead of grepping call chains, for exploring, debugging, refactoring or reviewing code.

    22k GitHub stars~939 tokensUpdated yesterday
    DevelopmentAuto-check passed
  • Csharp Refactoring

    microsoft/testfx

    Official

    Safely refactors C/.NET code without changing behavior. An agent skill from microsoft/testfx.

    1k GitHub starsUsed in 2 repos~3.1k tokens
    DevelopmentAuto-check passed
  • Analyze Project

    lllllllama/RigorPilot-Skills

    Rigor Analyze / Rigor Audit read-only skill for deep learning research repositories.

    497 GitHub starsUsed in 1 repo~519 tokens
    DevelopmentAuto-check passed
  • Andrej Karpathy Skill

    duolahypercho/andrej-karpathy-skills

    Apply Andrej Karpathy-inspired coding-agent guidelines in Codex.

    249 GitHub stars~793 tokensUpdated 4 mo ago
    DevelopmentAuto-check passed
  • A workflow for implementing a Verdaccio bug fix, feature or refactor: pick the release lines, check existing options, edit the owning layer, test and add a changeset.

    18k GitHub stars~1.3k tokensUpdated 2 days ago
    DevelopmentAuto-check passed

More from affaan-m/ECC

All 682 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.

    277k 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.

    277k 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.

    277k 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.

    277k 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.

    277k GitHub stars~2.9k tokensUpdated today
    Auto-check passed
  • Set an ECC-specific frontend design direction for production UI work.

    277k GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check passed

Works with

Categories

Questions about Click Path Audit

What does Click Path Audit do?

Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI…. Click Path Audit is an agent skill from affaan-m/ECC. Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI in an inconsistent state.

When should I use Click Path Audit?

Click Path Audit fits situations like: : systematic debugging found no bugs but users report broken buttons; after any major refactor touching shared state stores.

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 (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 (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 2k tokens (SKILL.md is roughly 7.9k 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: Code Changes (JanDeDobbeleer/oh-my-posh, 24k stars), Code Review Graph Navigator (handsontable/handsontable, 22k stars), Csharp Refactoring (microsoft/testfx, 1k stars) and Analyze Project (lllllllama/RigorPilot-Skills, 497 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,673 GitHub stars. The repository holds 683 skills in this directory. The repository was last updated on October 11, 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.