browser-check

name	browser-check
description	Chrome MCPでブラウザ動作確認を標準化された手順で実施する。
user_invocable	true

ブラウザ動作確認

Chrome MCPを使った動作確認の標準手順。「表示されている」だけでなく「操作が正しく動く」まで検証する。

手順

Step 1: 対象アプリのポート確認

ポートはworktreeごとに異なる。推測せず、以下から読み取る:

• frontend: apps/frontend/vite.config.ts の server.port
• backend API: apps/backend/.env の API_PORT

Step 2: Chrome MCP接続

1. mcp__claude-in-chrome__tabs_context_mcp で現在のタブ情報を取得
2. 接続失敗時はユーザーに「Chrome拡張の再接続をお願いします」と依頼
3. mcp__claude-in-chrome__tabs_create_mcp で新しいタブを作成
4. mcp__claude-in-chrome__navigate で対象URLにアクセス

Step 3: ページ表示確認

1. mcp__claude-in-chrome__computer action=screenshot でスクリーンショット取得
2. mcp__claude-in-chrome__read_page で要素の存在を確認
3. mcp__claude-in-chrome__read_console_messages pattern="error|Error|ERR" でコンソールエラーチェック

Step 3.5: モバイルビューポート確認（UI変更時は必須）

UI変更を含む場合、375px幅でのレイアウトを確認する:

1. mcp__claude-in-chrome__resize_window で幅375px、高さ812pxにリサイズ
2. スクリーンショットで表示確認
3. 特に注意: ヘッダの中央寄せ、モーダル表示位置、フォームボタンの可視性、autoFocusによるキーボード占有

Step 4: 操作検証（これが重要）

「表示されている」だけでは動作確認とは言えない。以下を実施する:

1. 作成フロー: ボタンクリック → フォーム入力 → 送信 → 結果表示を確認
2. 編集フロー: 既存データの編集 → 保存 → 反映を確認
3. 削除フロー: 削除ボタン → 確認UI表示 → 実行 → 一覧から消えることを確認
4. ネットワーク確認: mcp__claude-in-chrome__read_network_requests でAPIコールの成否を確認

Step 5: 結果報告

各ページ/フローごとに以下を報告:

• スクリーンショット（成功時）
• コンソールエラーの有無
• ネットワークリクエストの成否
• 操作検証の結果

Step 4補足: 空データだけで確認しない

• 新規ユーザー（データ0件）だけでなく、既存データがある状態でも確認する
• 特にグラフ・統計・プログレス表示は、データがないと正常に見えてバグを見逃す
• フォーム系は送信まで確認する（表示されている≠動く）

注意事項

• ポートを間違えない。必ずStep 1の手順で実際の設定値を確認する
• 小さい要素はzoomで拡大して確認する
• フォーム送信ボタンのクリックが効かない場合はEnterキーで代替
• confirm()は使っていないはずだが、もし出たらセッションがブロックされるので注意
• サブエージェントにはChrome MCPのアクセス権がない。Chrome MCPでのブラウザ確認は並列化できない
• サブエージェントでの並列ブラウザ確認が必要な場合は playwright-cli を使う。-s <session名> で複数セッションを同時に起動できる。詳細は /playwright-cli スキル参照