skills/browser/SKILL.md
chrome-devtools-mcp の CLI (`chrome-devtools`) を使ったブラウザ操作の総合スキル。既存ブラウザに attach するかテスト用ブラウザを起動するかをユーザーに必ず確認した上でサーバを立ち上げ、スナップショット取得・クリック・入力・ナビゲーション・スクショ・ネットワーク監視などを行う。
npx skillsauth add tanabee/skills browserInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
chrome-devtools-mcp の CLI (chrome-devtools) でブラウザを起動し、その後の操作までカバーする。
chrome-devtools status で状態を確認した後、起動済みでも未起動でも、必ず AskUserQuestion で接続先をユーザーに確認してから操作に入る。起動済みサーバが意図と異なる構成のまま使うのは事故の元なので、毎回 stop → start で整える。
選択肢は 2 つだけ:
前提: Chrome 144+ で chrome://inspect/#remote-debugging の「Allow remote debugging for this browser instance」が ON。
DevToolsActivePort から port (1 行目) と WS path (2 行目) を読み、--wsEndpoint で接続する:
# macOS: ~/Library/Application Support/Google/Chrome/DevToolsActivePort
# Linux: ~/.config/google-chrome/DevToolsActivePort
# Windows: $LOCALAPPDATA/Google/Chrome/User Data/DevToolsActivePort
chrome-devtools stop 2>/dev/null
chrome-devtools start --wsEndpoint "ws://127.0.0.1:${PORT}${WS_PATH}"
chrome-devtools list_pages # 既存タブが見えれば接続成功
初回接続時は Chrome 側に承認ダイアログが出ることがある。list_pages で既存タブが見えなければユーザーに承認を促す。
DevToolsActivePort が読めない場合 (Chrome を --remote-debugging-port=N で別プロファイル起動しているケース等) は AskUserQuestion で port を聞く。
chrome-devtools stop 2>/dev/null
chrome-devtools start
chrome-devtools list_pages
take_snapshot で要素の <uid> を取得click / fill / navigate_page 等で操作。状態はコマンド間で永続--includeSnapshot true を付ける接続確立後は同一セッション中サーバが永続するので、都度 start / status / stop を呼ぶ必要はない。
スナップショット例:
uid=1_0 RootWebArea "Example Domain" url="https://example.com/"
uid=1_1 heading "Example Domain" level="1"
カテゴリ別の使用例は assets/commands.md を参照 (Input Automation / Navigation / Emulation / Debugging / Network / Performance / Extensions / Service Management / Experimental)。各コマンドは --help で詳細を確認できる。
navigate_page の URL 指定は navigate_page url --url "<URL>" (positional type + --url)click_at / screencast_* / list_webmcp_tools) は start 時に該当フラグ (--experimentalVision / --experimentalScreencast / --experimentalWebmcp) が必要tools
実装計画(plan.md)の影響範囲を独立した視点で検証し、見落としを修正必須 / 任意改善として差し戻す。
tools
Codex CLI にコードレビューを依頼する。PR が存在する場合は PR を、ローカルブランチの場合はメインブランチとの差分をレビューする。
content-media
Gemini の画像生成モデル (nanobanana) で画像を生成する。`gemini-3.1-flash-image-preview` (デフォルト) と `gemini-3-pro-image-preview` に対応。
tools
chrome-devtools を使って動作確認チェックリストに沿ったテストを実行する。「動作確認して」「テストして」「動作テストして」「ブラウザで確認して」「チェックリストを確認して」などの依頼で発火する。