click-path-audit

Trace UI button handlers through state changes to detect conflicting side effects.

1|Updated Oct 11, 2025
One-click install
npx skills add https://github.com/ibytechaos/claude --skill click-path-audit-ibytechaos
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: click-path-audit
Source: https://github.com/ibytechaos/claude/tree/main/plugins/everything-claude-code/skills/click-path-audit
Command: npx skills add https://github.com/ibytechaos/claude --skill click-path-audit-ibytechaos

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Standard debugging checks whether functions exist, crash, or return correct types, but misses bugs where individually working functions cancel each other out through shared state side effects, leaving buttons that appear wired up but do nothing. ## Core Features & Use Cases - State Store Mapping: Builds a side-effect map of every Zustand store or React context action, documenting which fields each action sets and silently resets. - Touchpoint Tracing: Walks every button, toggle, and form handler call-by-call to detect sequential undo, async races, stale closures, missing transitions, dead paths, and useEffect interference. - Structured Bug Reports: Produces severity-rated findings with handler traces, expected versus actual state, and specific fixes. - Use Case: A "New Email" button calls setComposeMode(true) then selectThread(null); both work individually, but selectThread silently resets composeMode to false, so the button does nothing. This audit catches that conflict. ## Quick Start Audit the email page components and trace every button handler through the Zustand store to find state conflicts.

Frequently Asked Questions about click-path-audit

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I find bugs where a button does nothing when clicked?

Trace every function call in the button's handler in order, recording what state each call sets and resets. A common cause is sequential undo, where a later call like selectThread silently resets a field set by an earlier call like setComposeMode.

How to audit Zustand store side effects in React?

Build a side-effect map of every store action documenting which fields it sets and which it resets as a side effect. Then check each handler's call sequence against this map to find actions that reset state owned by other actions.

Why does systematic debugging miss state interaction bugs?

Systematic debugging checks whether handlers exist, functions crash, and types are correct, but not whether the final UI state matches the button's intent. Two functions can both work individually while one silently undoes the other's state change.

When should I run a click path audit?

Run it after systematic debugging finds no bugs but users report broken UI, after modifying any Zustand store action, after refactors touching shared state, or before release on critical user flows.

What bug patterns does a click path audit detect?

It detects six patterns: sequential undo, async race conditions, stale closures in useCallback, missing state transitions, conditional dead paths, and useEffect interference that resets state the handler just set.

When should I not use a click path audit?

Do not use it for API-level bugs like wrong response shapes or missing endpoints, styling and layout issues, or performance problems. Those require systematic debugging, visual inspection, or profiling tools respectively.