click-path-audit

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

Updated Mar 18, 2026
One-click install
npx skills add https://github.com/freedom909/real-estate-saas --skill click-path-audit-freedom909
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: click-path-audit
Source: https://github.com/freedom909/real-estate-saas/tree/main/.trae/skills/click-path-audit
Command: npx skills add https://github.com/freedom909/real-estate-saas --skill click-path-audit-freedom909

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Static code review and systematic debugging often miss bugs where every function works individually but they cancel each other out at runtime. A button can have a wired handler, no crashes, and correct types, yet still do nothing because a later call silently resets the state an earlier call just set. ## Core Features & Use Cases - State Store Side-Effect Mapping: Builds a reference map of every Zustand/Redux/context action, documenting what each action sets and what 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 full state-change traces, expected vs actual behavior, and specific fixes. - Use Case: After a refactor of a shared Zustand store, audit all consumers to catch cases like a "New Email" button whose second call resets the composeMode flag its first call just enabled. ## Quick Start Audit the email page for click-path bugs by mapping the email store's side effects and tracing every button handler to its final state.

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 despite having a handler?▼

Trace every function call in the handler in order, recording what state each reads, writes, and resets as a side effect. A common cause is sequential undo, where a later call like selectThread silently resets a flag like composeMode set by an earlier call.

How to audit Zustand store actions for hidden side effects?▼

For each store action, document which fields it sets and which it resets as a side effect, producing an action-to-sets/resets map. Flag dangerous resets where an action clears state owned by another action, since these cause cross-handler conflicts.

Why does systematic debugging miss state interaction bugs?▼

Systematic debugging checks whether handlers exist, crash, or return correct types, but not whether the final UI state matches the button's promise. Two functions can both work correctly while the second undoes the first's state change.

Can this catch async race conditions in React handlers?▼

Yes, the audit checks for async calls whose resolution order determines final state, such as two fetches where one sets loading false and the other sets it true. It also covers stale closures and useEffect interference patterns.

When should I not use a click-path audit?▼

Avoid it for API-level bugs like wrong response shapes or missing endpoints, styling and layout issues, and performance problems. Those are better handled by systematic debugging, visual inspection, or profiling tools respectively.