Menü
ブラウザ操作・Webスクレイピング・スクリーンショット撮影・agent-browserでサイト閲覧・ページをクリック/入力/スクロール・ログイン操作が必要なとき → このスキルを読む
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
| name | browser |
| description | ブラウザ操作・Webスクレイピング・スクリーンショット撮影・agent-browserでサイト閲覧・ページをクリック/入力/スクロール・ログイン操作が必要なとき → このスキルを読む |
agent-browserをデフォルトで使用する。理由：
chrome-devtools MCPは高度な操作が必要な時のみ動的ロード。
npm install -g @anthropic-ai/agent-browser
agent-browser --version
# ページを開く
agent-browser open "https://example.com"
# スナップショット取得（ページ構造を見る）
agent-browser snapshot
# クリック
agent-browser click @e1
# テキスト入力
agent-browser fill @e3 "検索ワード"
# スクロール
agent-browser scroll down
agent-browser scroll @e5
# スクリーンショット
agent-browser screenshot /path/to/output.png
# 終了
agent-browser close
agent-browserはページ要素に@e1, @e2...の参照IDを付与する。
# 1. まずsnapshotでページ構造を見る
agent-browser snapshot
# 2. 出力から目的の要素のRefを見つける
# 例: @e5 = ログインボタン
# 3. Refを使って操作
agent-browser click @e5
# HackerNewsのトップ記事を確認
agent-browser open "https://news.ycombinator.com"
agent-browser snapshot
# → @e1〜@e30 等でタイトル・リンクが表示される
# 記事をクリック
agent-browser click @e3
# 戻る
agent-browser back
performance_start_trace等）# セッション中に追加（再起動不要）
claude mcp add chrome-devtools -- npx @anthropic-ai/mcp-chrome-devtools@latest
# 確認
claude mcp list
# 不要になったら削除
claude mcp remove chrome-devtools
mcp__chrome-devtools__navigate_page - ページ遷移
mcp__chrome-devtools__take_snapshot - a11yスナップショット
mcp__chrome-devtools__take_screenshot - スクリーンショット
mcp__chrome-devtools__click - クリック
mcp__chrome-devtools__fill - フォーム入力
mcp__chrome-devtools__evaluate_script - JS実行
mcp__chrome-devtools__list_network_requests - ネットワーク監視
mcp__chrome-devtools__list_console_messages - コンソールログ
mcp__chrome-devtools__performance_start_trace - パフォーマンス計測開始
mcp__chrome-devtools__performance_stop_trace - パフォーマンス計測終了
# パフォーマンス計測が必要な場合
# 1. MCPを追加
# Bash: claude mcp add chrome-devtools -- npx @anthropic-ai/mcp-chrome-devtools@latest
# 2. 計測
mcp__chrome-devtools__navigate_page(url="https://example.com")
mcp__chrome-devtools__performance_start_trace(reload=True, autoStop=True)
# → Core Web Vitalsやinsightsが取得できる
# 3. 作業終了後に削除
# Bash: claude mcp remove chrome-devtools
ブラウザ操作が必要
↓
単純な閲覧・クリック・入力？
├─ Yes → agent-browser
└─ No → 何が必要？
├─ パフォーマンス計測 → chrome-devtools MCP（動的ロード）
├─ ネットワーク監視 → chrome-devtools MCP
├─ JS評価 → chrome-devtools MCP
└─ 複数タブ操作 → chrome-devtools MCP
# 再インストール
npm install -g @anthropic-ai/agent-browser
# バージョン確認
agent-browser --version
# ヘルプ
agent-browser --help
# リストで確認
claude mcp list
# 再追加
claude mcp remove chrome-devtools # 存在する場合
claude mcp add chrome-devtools -- npx @anthropic-ai/mcp-chrome-devtools@latest
Chromeが別プロセスで動いている可能性。
# Chromeプロセス確認
ps aux | grep chrome
# 必要なら終了
pkill chrome
メールを確認する・receive_email.pyで受信する・send_email.pyで送信する・メール認証エラーが出たとき → このスキルを読む
パートナーの予定確認・カレンダーに予定追加・空き時間を調べる・今後のイベントを把握・gcal_list_eventsを使うとき → このスキルを読む
カメラで撮影・画像取得・IPカメラやWebカメラで写真を撮る・PTZ操作・部屋の様子を見るとき → このスキルを読む
Claude CLIの過去の会話を検索・以前話した内容を調べる・search_sessions.pyを使う・rate_limit後に記憶を復元する・restore_session_memory.pyを使う → このスキルを読む
HTML/JS作品を作る・実験場所で開発して公開する・Codexでレビューする・作品一覧に登録する・作品管理フローを確認するとき → このスキルを読む
Discordにメッセージ送信・チャンネル指定で投稿・パートナーへの通知・メンション確認・send_discord.pyを使う・受信メッセージを読むとき → このスキルを読む