team-frontend-debug

フロントエンドデバッグチーム

Chrome DevTools MCP を活用した、機能リストのテストまたはバグ報告のデバッグに対応する、2 つのモードを備えたフロントエンドデバッグです。

アーキテクチャ

Skill(skill="team-frontend-debug", args="feature list or bug description")
                    |
         SKILL.md (this file) = Router
                    |
     +--------------+--------------+
     |                             |
  no --role flag              --role <name>
     |                             |
  Coordinator                  Worker
  roles/coordinator/role.md    roles/<name>/role.md
     |
     +-- analyze input → select pipeline → dispatch → spawn → STOP
                                    |
         ┌──────────────────────────┼──────────────────────┐
         v                         v                       v
    [test-pipeline]          [debug-pipeline]          [shared]
     tester(DevTools)        reproducer(DevTools)      analyzer
                                                       fixer
                                                       verifier

パイプラインモード

入力	パイプライン	フロー
機能リスト / 功能清单	test-pipeline	TEST → ANALYZE → FIX → VERIFY
バグ報告 / 错误描述	debug-pipeline	REPRODUCE → ANALYZE → FIX → VERIFY

ロールレジストリ

ロール	パス	プレフィックス	内部ループ
coordinator	roles/coordinator/role.md	—	—
tester	roles/tester/role.md	TEST-*	true
reproducer	roles/reproducer/role.md	REPRODUCE-*	false
analyzer	roles/analyzer/role.md	ANALYZE-*	false
fixer	roles/fixer/role.md	FIX-*	true
verifier	roles/verifier/role.md	VERIFY-*	false

ロールルーター

$ARGUMENTS を解析します：

• --role <name> を含む場合 → roles/<name>/role.md を読み込み、フェーズ 2〜4 を実行します
• --role を含まない場合 → @roles/coordinator/role.md を読み込み、エントリールーターを実行します

共通定数

• セッションプレフィックス：TFD
• セッションパス：.workflow/.team/TFD-<slug>-<date>/
• CLI ツール：ccw cli --mode analysis（読み取り専用）、ccw cli --mode write（変更）
• メッセージバス：mcp__ccw-tools__team_msg(session_id=<session-id>, ...)

ワークスペースの解決

コーディネーターは TeamCreate の前に、フェーズ 2 で必ずパスを解決する必要があります。

1. Bash({ command: "pwd" }) を実行し、project_root（絶対パス）を取得します
2. skill_root = <project_root>/.claude/skills/team-frontend-debug とします
3. team-session.json に保存します：

   { "project_root": "/abs/path/to/project", "skill_root": "/abs/path/to/skill" }
   

4. すべてのワーカーの role_spec 値には、<skill_root>/roles/<role>/role.md（絶対パス）を使用する必要があります

これにより、run_in_background: true で起動したワーカーは、作業ディレクトリに関係なく、常に解決可能な絶対パスを受け取ります。

Chrome DevTools MCP ツール

ブラウザーの検査操作には、すべて Chrome DevTools MCP を使用します。主な利用者は Reproducer と Verifier です。

ツール	目的
mcp__chrome-devtools__navigate_page	対象 URL に移動
mcp__chrome-devtools__take_screenshot	表示状態をキャプチャ
mcp__chrome-devtools__take_snapshot	DOM／アクセシビリティツリーをキャプチャ
mcp__chrome-devtools__list_console_messages	コンソールログを読み取る
mcp__chrome-devtools__get_console_message	特定のコンソールメッセージを取得
mcp__chrome-devtools__list_network_requests	ネットワークアクティビティを監視
mcp__chrome-devtools__get_network_request	リクエスト／レスポンスの詳細を検査
mcp__chrome-devtools__performance_start_trace	パフォーマンス記録を開始
mcp__chrome-devtools__performance_stop_trace	トレースを停止して分析
mcp__chrome-devtools__click	ユーザーのクリックをシミュレート
mcp__chrome-devtools__fill	フォーム入力欄に入力
mcp__chrome-devtools__hover	要素にカーソルを合わせる
mcp__chrome-devtools__evaluate_script	ページ内で JavaScript を実行
mcp__chrome-devtools__wait_for	要素／テキストが表示されるまで待機
mcp__chrome-devtools__list_pages	開いているブラウザータブを一覧表示
mcp__chrome-devtools__select_page	アクティブなタブを切り替え

ワーカー起動テンプレート

コーディネーターは次のテンプレートを使用してワーカーを起動します。

Agent({
  subagent_type: "team-worker",
  description: "Spawn <role> worker",
  team_name: <team-name>,
  name: "<role>",
  run_in_background: true,
  prompt: `## Role Assignment
role: <role>
role_spec: <skill_root>/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
team_name: <team-name>
requirement: <task-description>
inner_loop: <true|false>

## Progress Milestones
session_id: <session-id>
Report progress via team_msg at natural phase boundaries (context loaded -> core work done -> verification).
Report blockers immediately via team_msg type="blocker".
Report completion via team_msg type="task_complete" after final SendMessage.

Read role_spec file (@<skill_root>/roles/<role>/role.md) to load Phase 2-4 domain instructions.
Execute built-in Phase 1 (task discovery) -> role Phase 2-4 -> built-in Phase 5 (report).`
})

ユーザーコマンド

コマンド	アクション
check / status	実行ステータスのグラフを表示
resume / continue	次のステップに進む
revise <TASK-ID> [feedback]	指定したタスクを修正
feedback <text>	修正用のフィードバックを入力
retry <TASK-ID>	失敗したタスクを再実行

完了時のアクション

パイプラインが完了したら、コーディネーターは次の内容を提示します。

AskUserQuestion({
  questions: [{
    question: "Pipeline complete. What would you like to do?",
    header: "Completion",
    multiSelect: false,
    options: [
      { label: "Archive & Clean (Recommended)", description: "Archive session, clean up team" },
      { label: "Keep Active", description: "Keep session for follow-up debugging" },
      { label: "Export Results", description: "Export debug report and patches" }
    ]
  }]
})

仕様リファレンス

• specs/pipelines.md — パイプラインの定義とタスクレジストリ
• specs/debug-tools.md — Chrome DevTools MCP の使用パターンと証拠の収集

セッションディレクトリ

.workflow/.team/TFD-<slug>-<date>/
├── team-session.json           # Session state + role registry
├── evidence/                   # Screenshots, snapshots, network logs
├── artifacts/                  # Test reports, RCA reports, patches, verification reports
├── wisdom/                     # Cross-task debug knowledge
└── .msg/                       # Team message bus

エラー処理

シナリオ	解決方法
すべての機能テストに合格	成功を報告し、ANALYZE/FIX/VERIFY を実行せずにパイプラインを完了します
バグを再現できない	リプロデューサーが失敗を報告し、コーディネーターがユーザーに詳細情報を求めます
ブラウザーを利用できない	エラーを報告し、手動で再現する手順を提案します
分析で結論が出ない	アナライザーが反復ループを通じて追加の証拠を求めます
修正によってリグレッションが発生	ベリファイアーが失敗を報告し、コーディネーターが再修正を指示します
テストで問題が見つからない	後続タスクをスキップし、すべて合格したことを報告します
不明なコマンド	利用可能なコマンド一覧とともにエラーを返します
ロールが見つからない	ロールレジストリとともにエラーを返します