click-path-audit

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

Updated Mar 25, 2026
One-click install
npx skills add https://github.com/Femad-6/my-skills --skill click-path-audit-femad-6
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: click-path-audit
Source: https://github.com/Femad-6/my-skills/tree/main/.github/skills/click-path-audit
Command: npx skills add https://github.com/Femad-6/my-skills --skill click-path-audit-femad-6

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Buttons and interactive elements can appear correctly wired yet silently fail because sequential function calls undo each other, shared state stores reset fields as hidden side effects, or async calls race to wrong final states. Static code review and standard debugging miss these interaction bugs because every individual function works correctly. ## Core Features & Use Cases - State Store Side-Effect Mapping: Builds a reference of every Zustand/Redux/context action showing which fields it sets and which it silently resets. - Touchpoint Handler Tracing: Walks every onClick/onSubmit/onChange handler call-by-call to detect sequential undo, async races, stale closures, dead paths, and useEffect interference. - Structured Bug Reports: Produces severity-rated findings with handler traces, expected vs actual state, and specific fixes. - Use Case: A "New Email" button calls setComposeMode(true) then selectThread(null), but selectThread resets composeMode to false as a side effect, so the button does nothing. This audit catches that conflict by tracing both calls against the store's side-effect map. ## Quick Start Ask the AI to run a click-path audit on a specific page or component to trace every button handler through its state changes and report any conflicting side effects.

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 the button's handler call-by-call and check whether any later call resets state set by an earlier call. Map the state store's actions first to reveal hidden side effects, such as a selectThread action that silently resets composeMode to false.

How to debug Zustand store side effects in React?

Build a side-effect map of every store action listing which fields it sets and which it resets. Then audit each consumer handler against that map to find conflicts where one action undoes another's state change.

Why does my React state update get reset immediately?

Common causes include a subsequent function call in the same handler resetting the field, a useEffect watching the state and reverting it, or a store action with a hidden reset side effect. Tracing the full call sequence reveals which pattern applies.

When should I use click-path auditing instead of standard debugging?

Use it when systematic debugging finds no errors but users report broken UI, after modifying shared state stores, or after major refactors. It targets interaction bugs, not API errors, styling issues, or performance problems.

Can this audit run on a single page instead of the whole app?

Yes, the audit supports scoped execution: full-app audits with parallel agents per page, single-page audits after new features, or store-focused audits after changing a specific store action.