ui-state-debugger-plus

Built on affaan-m/ECC by @affaan-m (248,262 stars, MIT). All credit for the original idea to them. This fork improves and repackages it; upstream license preserved in UPSTREAM_LICENSE.

A Claude Code skill that traces buttons, forms, and other user actions to find hidden UI state bugs.

Built for developers who face bugs that normal code checks miss. It plugs into your current Claude Code flow and has no extra tools to install.

🔍 Why

A click handler can run and still leave the screen wrong.

One state change may undo another. Old requests may replace new data. Forms may submit twice. Cleanup code may clear state used by a new screen.

This skill follows the full call path and checks the final UI state.

⚡ Install

mkdir -p ~/.claude/skills/click-path-audit && curl -fsSL https://raw.githubusercontent.com/ui-state-debugger-plus/ui-state-debugger-plus/main/skill/SKILL.md -o ~/.claude/skills/click-path-audit/SKILL.md

🧭 Usage

Ask Claude Code to audit a broken user action:

Use click-path-audit to check why the New Email button opens the compose view and then closes it.

Claude will trace each call in order. It will list what each step reads, sets, and clears. It will also check effects, timers, routes, cleanup work, and slow requests.

Expected output:

FINDING: New Email closes itself
SEVERITY: High
EXPECTED: Open a blank compose view.
ACTUAL: Compose mode ends as false.

CALL ORDER:
  1. setComposeMode(true)
  2. selectThread(null)
  3. selectThread sets composeMode to false

CAUSE:
  selectThread clears state owned by the compose flow.

FIX IDEA:
  Clear the thread before opening compose mode.
  Better: split thread selection from compose cleanup.

The audit also checks success, error, cancel, timeout, repeat clicks, route changes, unmounts, empty data, and stale saved state.

🛠️ What we changed vs upstream

• Rewrites the skill from Japanese into clearer, plain English while preserving its core purpose and community attribution.
• Expands the trigger guidance with concrete UI symptoms such as modals reopening, stale responses, double submissions, and shared-state refactors.
• Broadens tracing beyond direct handler calls to include hooks, effects, timers, routes, cleanup code, concurrent work, and async cancellation.
• Adds more structured audit templates for state actions, touch points, ordered call paths, expected state, final state, and findings.
• Extends the original two-step excerpt into additional explicit phases, including inventorying every interaction and checking all success, error, and cancellation paths.

📄 License

Released under the MIT License. The upstream MIT license and author credit are preserved in UPSTREAM_LICENSE.