← ClaudeAtlas

click-path-auditlisted

Trace every user-facing touchpoint (button, toggle, form submit) through its full state-change sequence to find interaction bugs where handlers individually work but conflict when combined — silent resets, async races, stale closures. Use when a button "does nothing" despite no crash or type error, after modifying a shared state store, or after a refactor touching shared state, and static debugging already came up empty.
manastalukdar/ai-devstudio · ★ 1 · Code & Development · score 77
Install: claude install-skill manastalukdar/ai-devstudio
# Click Path Audit Find interaction bugs that reading code or running the debugger misses: a handler calls two functions that each work in isolation, but the second silently undoes the first's state change. ## Usage ``` /click-path-audit # audit UI files changed in the working tree /click-path-audit <file-or-dir> # audit a specific component or directory /click-path-audit --store <name> # audit every consumer of one shared state store ``` ## Behavior ### Phase 1: Map shared state side effects Before auditing any handler, build a side-effect map for every store/context action in scope (Redux slice, Zustand store, React context, signal, view-model — whichever this stack uses): ``` For each action/setter/reducer case: - fields it sets - fields it resets as a side effect (not the fields the caller asked it to change) ``` Flag any action that resets a field it does not own — that is the recurring root cause. Skip this phase if the audit target has no shared state (a single stateless component). ### Phase 2: Trace each touchpoint For every interactive element in scope (click, submit, change, keydown handlers): 1. List the handler's function calls in call order. 2. For each call, note what it reads, what it sets, and what it resets (from the Phase 1 map). 3. Check whether a later call undoes an earlier call's state change (Sequential Undo). 4. Check async calls for order-dependent resolution (Async Race). 5. Check closures capturing stale v