click-path-audit

Trace React state handler execution paths to detect race conditions and sequential undo bugs.

1|Updated Apr 6, 2026
One-click install
npx skills add https://github.com/vrcms/everything-qwen-code --skill click-path-audit-vrcms
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: click-path-audit
Source: https://github.com/vrcms/everything-qwen-code/tree/main/.qwen/skills/click-path-audit
Command: npx skills add https://github.com/vrcms/everything-qwen-code --skill click-path-audit-vrcms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill identifies subtle bugs where individual functions work correctly, but their combined execution in a UI handler causes state conflicts, silent undoing of actions, or inconsistent final UI states.

Core Features & Use Cases

  • State Interaction Mapping: Visualizes how different actions read and write to shared state stores like Zustand or React Context.
  • Sequential Undo Detection: Identifies patterns where a secondary function call inadvertently resets state set by a primary call.
  • Use Case: Use this after a major refactor or when users report that a button "does nothing" despite no errors appearing in the console.

Quick Start

Run the click-path-audit skill to trace the state changes for the submit button in the user settings component.

Frequently Asked Questions about click-path-audit

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

FAQPage Schema
How do I detect race conditions in React state management?

Detect React race conditions by mapping state store actions and tracing handler execution paths to validate final state outcomes. This systematic mapping uncovers conflicts where combined UI function calls silently overwrite shared Zustand or Redux state.

Why does my React button do nothing when no console errors appear?

A button doing nothing without console errors often indicates a sequential undo bug, where a secondary function call inadvertently resets state set by a primary call. Mapping state interactions uncovers these silent UI state conflicts.

Can I audit race conditions in a Zustand shared state store?

Yes, you can audit race conditions in a Zustand shared state store by visualizing how different actions read and write to the store. Tracing these state interactions identifies sequential undo bugs and ensures UI consistency.

What is state interaction mapping for UI consistency?

State interaction mapping visualizes how different actions read and write to shared state stores like Zustand. It ensures UI consistency by tracing handler execution paths to validate final state outcomes and uncover hidden conflicts.

How do I trace handler execution paths to find sequential undo bugs?

Trace handler execution paths by systematically mapping state store actions and validating final state outcomes. This process identifies patterns where secondary function calls inadvertently reset state set by primary calls.

When should I audit interactive touchpoints for UI state conflicts?

Audit interactive touchpoints for UI state conflicts after a major refactor or when users report inconsistent final UI states. It targets complex React applications using shared state stores to ensure functions work correctly when combined.