
Click Path Audit
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of click-path-audit by affaan-m - installs and ranking accrue to the original listing.
click-path-audit is a Claude skill that traces UI buttons and touchpoints through complete state-change sequences to catch interaction bugs for developers debugging shared state stores like Zustand, Redux, or React conte
About
click-path-audit is a behavioral flow audit skill from affaan-m/ecc that finds bugs static reading and unit tests miss. Traditional checks verify functions exist, avoid crashes, and return correct types, but not whether final UI state matches button labels or whether one handler silently undoes another. The skill traces user-facing touchpoints through ordered calls, race conditions, and shared store side effects in Zustand, Redux, or context. Developers reach for click-path-audit when users report broken buttons despite green tests, especially after refactors touching global state. Example failure modes include compose mode toggles canceled by thread selection side effects.
- Traces full handler sequences for every interactive element (onClick, onSubmit, onChange)
- Detects state interaction side effects, race conditions, and handlers that silently undo each other
- Reveals final UI state mismatches against button promises in shared stores like Zustand, Redux or Context
- Found 54 bugs missed by traditional debugging in one real-world case
- Hard-gate: run after any major refactor touching shared state before shipping
Click Path Audit by the numbers
- 1,370 all-time installs (skills.sh)
- +85 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill click-path-auditAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.4k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
Why do UI buttons break despite passing unit tests?
Systematically trace every button and touchpoint through its full state-change sequence and catch interaction bugs that static analysis and unit tests miss.
Who is it for?
Frontend developers debugging reported broken buttons when unit tests pass but shared state interactions produce wrong UI outcomes.
Skip if: Backend-only services, missing handler wiring where functions do not exist, or pure visual CSS layout bugs.
When should I use this skill?
User reports broken buttons, contradictory UI state, or needs systematic touchpoint tracing after shared store refactors.
What you get
Click-path trace report listing conflicting handlers, race conditions, and final UI state mismatches across touchpoints.
- click-path trace report
- conflicting handler findings
Files
/click-path-audit — 行動フロー監査
静的コード読み取りが見落とすバグを見つけ:状態相互作用の副作用、順序を付けられた呼び出し間の競合状態、および互いに静かに取り消すハンドラー。
この解決する問題
従来のデバッグチェック:
- 関数が存在しますか?(不足している配線)
- クラッシュしますか?(ランタイムエラー)
- 正しいタイプを返しますか?(データフロー)
しかし、それはチェックしません:
- 最終UI状態がボタンラベルが約束したものと一致しますか?
- 関数Bが関数Aが行ったばかりをサイレンス的に取り消しますか?
- 共有状態(Zustand/Redux/context)に意図した操作をキャンセルする副作用がありますか?
実例:「新しいメール」ボタンがsetComposeMode(true)を呼び出してからselectThread(null)。両方は個別に機能しました。しかし、selectThreadにはcomposeMode: falseをリセットする副作用がありました。ボタンは何もしなかった。54のバグは体系的なデバッグによって見つかりました — これは見落とされました。
---
動作方法
対象領域のすべてのインタラクティブなタッチポイントについて:
1. ハンドラーを特定(onClick、onSubmit、onChangeなど)
2. ハンドラーのすべての関数呼び出しを**順序で**追跡
3. 各関数呼び出し**について**:
a. どの状態を読んでいますか?
b. どの状態を書き込んでいますか?
c. 共有状態に副作用がありますか?
d. 副作用として状態をリセット/クリアしますか?
4. チェック:後の呼び出しが以前の呼び出しからの状態変更を取り消しますか?
5. チェック:最終状態はユーザーがボタンラベルから期待するもの?
6. チェック:競合状態がありますか(非同期呼び出しが間違った順序で解決される)?---
実行ステップ
ステップ1:マップ状態ストア
任意のタッチポイントを監査する前に、すべての状態ストアアクションの副作用マップを構築:
範囲内の各Zustand ストア / React コンテキストについて:
各アクション/セッター:
- どのフィールドをセットしますか?
- 副作用として他のフィールドをリセットしますか?
- ドキュメント:actionName → {sets: [...], resets: [...]}これは重要な参照です。「新しいメール」バグはselectThreadがcomposeModeをリセットしていることを知らないと見えなくなりました。
出力形式:
STORE: emailStore
setComposeMode(bool) → sets: {composeMode}
selectThread(thread|null) → sets: {selectedThread, selectedThreadId, messages, drafts, selectedDraft, summary} RESETS: {composeMode: false, composeData: null, redraftOpen: false}
setDraftGenerating(bool) → sets: {draftGenerating}
...
DANGEROUS RESETS(所有していない状態をクリアするアクション):
selectThread → composeMode をリセット(setComposeModeで所有)
reset → すべてをリセットステップ2:各タッチポイントを監査
対象領域の各ボタン/トグル/フォーム送信について:
TOUCHPOINT: [ボタンラベル] in [Component:line]
ハンドラー:[関数呼び出しの完全なシーケンス]
最終状態:[これが達成されるべきもの]詳細については、ドキュメントを参照してください。
Related skills
How it compares
Use click-path-audit for multi-handler UI state interactions; use component unit tests for isolated function correctness.
FAQ
What bugs does click-path-audit catch that unit tests miss?
click-path-audit catches final UI state mismatches, handlers that undo each other, and shared store side effects in Zustand, Redux, or context. Unit tests may pass per-function while combined touchpoint sequences leave contradictory UI state.
When should developers run click-path-audit?
Run click-path-audit when users report broken buttons despite green tests, especially after refactors touching shared state. The skill traces each touchpoint through ordered calls and races static analysis overlooks.