click-path-audit

Trace click-path handlers to detect conflicting side effects and state races.

Updated Sep 13, 2025

Search Tags:#state management #RBAC #race conditions #side effects #ui debugging #click path #shared stores

Ready to run

npx skills add https://github.com/llmh333/employee_management_spring --skill click-path-audit-llmh333

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: click-path-audit
Source: https://github.com/llmh333/employee_management_spring/tree/main/.gemini/skills/click-path-audit
Command: npx skills add https://github.com/llmh333/employee_management_spring --skill click-path-audit-llmh333

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you find UI bugs where individual functions seem correct but the final user-visible state is wrong due to conflicting side effects, sequential undoing, or race conditions.

Core Features & Use Cases

Full click-path tracing: Identify every handler (onClick/onSubmit/onChange) and trace each called function in order to determine what it reads, writes, and resets.
State reset/undo detection: Detect cases where a later call clears fields that an earlier call set, leaving the UI inconsistent with the button’s label.
Race-condition and lifecycle interference checks: Verify async ordering issues and cases where useEffect or shared-state stores reset changes after the handler runs.
Bug reporting with actionable verdicts: Produce structured findings including touchpoint, pattern type, trace of conflicting writes/resets, and specific fixes.

Quick Start

Use the click-path-audit skill to audit the handler behind a button that “does nothing” in a shared state flow after a refactor.

Frequently Asked Questions about click-path-audit

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

FAQPage Schema

How do I debug UI state inconsistencies when individual handlers seem correct but the final state is wrong?▼

Debug UI state inconsistencies by tracing full click paths to map shared state store actions, identifying conflicting sequential side effects and sequential undoing that leave the UI inconsistent with the button label.

What causes a button to do nothing after a refactor when using shared state stores?▼

A button doing nothing after a refactor is often caused by race conditions or lifecycle interference, where useEffect or shared-state stores reset changes after the handler runs, undoing the expected state writes.

How can I detect race conditions in async onClick handlers during UI debugging?▼

Detect race conditions in async onClick handlers by tracing the handler call order, verifying async sequencing, and checking if useEffect or shared-state stores reset fields after the handler completes its writes.

How do I trace state reset and undo patterns across sequential form submission handlers?▼

Trace state reset patterns across sequential form submission handlers by mapping each called function in order to determine what it reads, writes, and resets, detecting cases where later calls clear fields set by earlier calls.

Does this approach work for auditing interactive touchpoints like toggles and form submissions?▼

Yes, this audit approach works for interactive touchpoints like toggles and form submissions by mapping state store actions to read/write/reset effects and reporting expected versus actual final UI state with actionable fixes.

When should I use a click path audit instead of standard code-level debugging?▼

Use a click path audit when systematic code-level debugging finds no obvious bugs but the user-visible state remains wrong, indicating hidden conflicts from side effects across sequential handlers in shared state stores.