skills.rest
cescrafli
cescrafliCOMMUNITY
Explore all skills by this author →
GitHub

click-path-audit

Trace user interaction paths to detect UI state mismatches from conflicting changes.

Updated Mar 26, 2026
Search Tags:#debugging#react#audit#zustand#state-management#systematic-debugging#ui-state
One-click install
npx skills add https://github.com/cescrafli/compyrasion --skill click-path-audit-cescrafli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: click-path-audit
Source: https://github.com/cescrafli/compyrasion/tree/main/skills/click-path-audit
Command: npx skills add https://github.com/cescrafli/compyrasion --skill click-path-audit-cescrafli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Trace every user-facing button/touchpoint through its full state change sequence to find bugs where functions individually work but cancel each other out, produce wrong final state, or leave the UI in an inconsistent state. Use when: systematic debugging found no bugs but users report broken buttons, or after any major refactor touching shared state stores.

Core Features & Use Cases

  • Map state reads/writes across handlers and stores to build a comprehensive side-effect map.
  • Trace each interactive touchpoint to detect patterns like sequential undo, async race, stale closure, and missing transitions.
  • Real-world use case: after refactoring a UI flow where a button seemed to work but the final state didn’t match the label, this skill reveals which later call resets an earlier change.

Quick Start

Identify all interactive touchpoints in the target area and trace their state changes step by step to reveal where later calls undo earlier ones.

Frequently Asked Questions about click-path-audit

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

FAQPage Schema
How do I trace UI state mismatches when individual handlers work but the final state is wrong?▼

Auditing sequential state changes helps find non-functional buttons by tracing handlers, state stores, and side effects across components. It outputs a step-by-step trace of reads, writes, and resets to reveal hidden bugs.

Why does my button work individually but produce wrong final state after a refactor?▼

Debugging complex UI flows requires tracing every user-facing touchpoint through its full state change sequence. Map side effects across shared state stores to build a comprehensive view of reads, writes, and resets.

Does this state change auditing approach work with Zustand and React?▼

Trace each interactive touchpoint step by step across components and shared state stores. Identify all touchpoints in the target area and map their state changes to reveal where later calls reset earlier changes.

What is the best way to debug non-functional buttons when systematic debugging finds no bugs?▼

Limitations arise when missing state transitions or async races occur across deeply nested components. Trace handlers and side effects carefully, as later calls resetting earlier changes require full path auditing to detect.

Related Skills

Explore More Software Engineering Skills→
agentmattersagentmatters
3

click-path-audit

Trace touchpoint handlers to diagnose conflicting UI state changes.

Official
Advanced
ProgrammerAnthonyProgrammerAnthony
138

triage-issue

Analyze code repository issues and generate TDD repair plans.

Community
Advanced
Smooth-OperationSmooth-Operation

root-cause-tracing

Trace bugs upstream through call chains to identify root causes.

Official
Advanced
lightvu25lightvu25

gameobject-component-get

Retrieve component type, enabled state, and optional serialized fields from Unity GameObjects.

Community
Intermediate