click-path-audit

Trace user-facing button touchpoints through state change sequences to detect UI bugs.

Updated Apr 2, 2026
One-click install
npx skills add https://github.com/richardnpaul/everything-vscode-copilot --skill click-path-audit-richardnpaul
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: click-path-audit
Source: https://github.com/richardnpaul/everything-vscode-copilot/tree/main/.github/skills/click-path-audit
Command: npx skills add https://github.com/richardnpaul/everything-vscode-copilot --skill click-path-audit-richardnpaul

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Trace every user-facing button/touchpoint through its full state change sequence to detect UI bugs where independent functions work but cancel each other out or leave the UI in an inconsistent state. This helps uncover issues after refactors or when users report broken buttons.

Core Features & Use Cases

  • Map and audit state stores to document actions and their effects.
  • Trace each touchpoint's handler to identify patterns like sequential undo, async race, stale closures, missing transitions, and useEffect interference.
  • Generate actionable reports to fix bugs before release.

Quick Start

Identify a target UI area, then run the click-path-audit workflow to map stores, audit touchpoints, and produce a bug report.

Frequently Asked Questions about click-path-audit

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

FAQPage Schema
Why do UI buttons leave the application in an inconsistent state when individual functions work correctly?

UI buttons can leave the application in an inconsistent state when independent functions cancel each other out during state changes. Tracing each touchpoint through its full state change sequence uncovers these sequential undo or async race patterns.

How do I debug broken buttons after refactoring shared state stores?

To debug broken buttons after refactoring shared state stores, map the state stores to document actions and effects, then audit each touchpoint in order to identify patterns like stale closures or useEffect interference that cause inconsistent UI state.

What is the best way to trace async race conditions in UI state management?

The best way to trace async race conditions in UI state management is to audit each touchpoint's handler in order, mapping state stores to document actions and effects to identify where functions cancel each other out or leave the UI in an inconsistent state.

When should I audit click paths instead of running standard debugging?

You should audit click paths when systematic debugging finds no bugs but users report broken buttons, or after refactors that touch shared state stores, to detect missing transitions and state inconsistencies that standard debugging misses.

Can I trace useEffect interference across multiple touchpoints?

Yes, you can trace useEffect interference by auditing each touchpoint's handler in order and mapping state stores to document actions and effects, which identifies patterns where effects cancel each other out or create stale closures.

What limitations does click path auditing have for detecting UI bugs?

Click path auditing is limited to components controlling UI state across the app and requires mapping state stores to document actions and effects; it focuses on state change sequences rather than isolated function correctness or rendering performance issues.