mcpField
U
ux-flow-auditor

ux-flow-auditor

github.com/heyeddi-comデザイン・UI088 回インストール1 日前に更新
リポジトリ

ux-flow-auditor について

ux-flow-auditorは、タスクの操作フローを追跡し、操作上の摩擦を記録するスキルです。JSONでフローを定義し、クリック数の予算を満たすか確認するためのレポートとスクリーンショットを`.heyeddi/`に保存します。

主な機能

  1. 01JSONでタスクフローを定義
  2. 02Playwrightで操作を追跡
  3. 03クリック数の予算を確認
  4. 04レポートとスクリーンショットを生成
  5. 05`.heyeddi/`に摩擦点を記録

活用シーン

  1. 01設定変更に必要なクリック数の測定
  2. 02リリース後のタスクの使いやすさ確認
  3. 03デスクトップとモバイルのフロー比較
  4. 04受け入れ条件のクリック数予算の検証

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/heyeddi-com/heyeddi-skills --skill ux-flow-auditor

インストール後、Claude Code で/ux-flow-auditorを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

manifest.json
context/
ANTI_PATTERNS.md
EXAMPLES.md
PROSE_ANTI_SLOP.md
VOCABULARY.md
reference/
cross-pillar-handoff.md
subagents.md
scripts/
_heyeddi_paths.py
_skill_cli.py
init_ux_flows.py
README.md
trace_flow.py

詳細

UX フローフロー監査

タスク指向の UX：目標達成に必要なクリック数と、ユーザーが行き詰まる箇所を確認します。

すべての成果物は .heyeddi/docs/ と .heyeddi/audits/ の下に保存してください。リポジトリのルートには置かないでください。

ピラー間の同期（必須）

reference/cross-pillar-handoff.md を読んでください。すべてのフロートレースの前後に、次を実行してください。

@heyeddi  load_workflow_context --route /path
trace_flow …
update ux-flows report + friction notes
@heyeddi  append_pillar_opinion --pillar ux …
→ @heyeddi-product updates AC if needed; @heyeddi-design notes layout friction

使用する場面

  • 「設定の更新に何回クリックが必要ですか？」
  • リリース後の使いやすさチェック
  • デスクトップとモバイルのフローを比較する（別のフロー JSON またはビューポートを使用）
  • プロダクトの受け入れ確認：タスクがクリック数の上限内に完了すること

サブエージェント（デフォルト）

reference/subagents.md を参照してください。trace_flow.py は Task shell 経由で実行してください（開発サーバーと Playwright が必要です）。

パイプライン

init_ux_flows          → ux-flows.md index + example .flow.json
define steps in ux-flows/<task>.flow.json
trace_flow --task-id   → ux-flows/<task>.md + audit screenshot
agent adds friction notes to report

手順

  1. .heyeddi/product.md でユーザータスクが定義されていることを確認します（任意のコンテキスト）。
  2. プロジェクトごとに一度、python scripts/init_ux_flows.py --project-root <root> を実行します。
  3. .heyeddi/docs/ux-flows/<task-id>.flow.json に、ステップ（expect、fill、click）を追加または編集します。
  4. 開発サーバーを起動します。http://localhost:5173 ではない場合は DEV_SERVER_URL を設定します。
  5. python scripts/trace_flow.py --task-id <id> --project-root <root> --check
  6. 生成された Markdown レポートに摩擦に関するメモを追記します。

フロー JSON スキーマ

{
  "task_id": "update-profile",
  "goal": "User saves profile",
  "start_route": "/settings",
  "max_clicks": 4,
  "viewport_width": 1440,
  "steps": [
    { "action": "expect", "selector": ".settings .p-inputtext", "label": "Form visible" },
    { "action": "fill", "selector": ".settings input >> nth=0", "value": "Alex", "label": "Name" },
    { "action": "click", "selector": "button:has-text('Save')", "label": "Save" }
  ]
}

.heyeddi/ の出力

パス用途
.heyeddi/docs/ux-flows.mdタスク、予算、前回の実行結果のインデックス
.heyeddi/docs/ux-flows/<task>.flow.json機械可読なステップ
.heyeddi/docs/ux-flows/<task>.mdユーザー向けレポートと摩擦に関するメモ
.heyeddi/audits/ux-flow/各ステップのスクリーンショット

連携

  • @heyeddi-handoff / @heyeddi-design の後：タスクを完了できることを確認します
  • @visual-auditor：レイアウトの証拠を確認します。このスキル：インタラクションの証拠を確認します
  • @engineering-excellence：別の観点（コード構造）を担当します

コメント

Markdown 対応