Click Path Audit

作者 affaan-mef648e01899b無授權條款275K 個星標收錄於 2026年10月8日更新於 2026年10月8日儲存庫3 天前更新

ユーザー向けボタン/タッチポイントを完全な状態変更シーケンスを通して追跡し、機能が個別に機能するが互いにキャンセルされたり、間違った最終状態を生成したり、UIを矛盾した状態にしたままにするバグを見つけます。次の場合に使用します:体系的なデバッグがバグを見つけたが、ユーザーは壊れたボタンを報告する場合、または共有状態ストアに触れる主要なリファクター後。

AI 產生的概覽

稽核面向使用者的點擊路徑,找出處理函式彼此默默抵消的狀態互動缺陷。

功能
此技能為互動式 UI 接觸點提供一套結構化稽核流程。它讓代理先梳理狀態儲存及其副作用,再依序追蹤每個處理函式的呼叫,檢視哪些狀態被讀取、寫入或重設。產出包括儲存動作的副作用對應表,以及每個接觸點的發現,例如被抵消的狀態變更、錯誤的最終狀態和競態條件。
適用情境
適用於系統化除錯已找到缺陷、但使用者仍回報按鈕失效的情況,或在動到共享狀態儲存的大型重構之後使用。它針對靜態程式碼閱讀容易漏掉的缺陷,例如副作用、呼叫順序衝突,以及處理函式之間彼此默默撤銷。
執行需求
僅含指示,未附指令碼。需要能存取應用程式原始碼,包括帶有互動處理函式的元件,以及 Zustand、Redux 或 React context 等共享狀態儲存。

/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]ハンドラー:[関数呼び出しの完全なシーケンス]最終状態:[これが達成されるべきもの]

詳細については、ドキュメントを参照してください。

來源與署名

來源:affaan-m/ecc位於docs/ja-JP/skills/click-path-audit提交ef648e0

授權條款: 無授權條款

內容歸原作者所有。SourceWeft 從公開儲存庫中收錄這些內容。

檢舉或申請下架