browser-skill は何をしますか？
コーディングエージェントから実際のブラウザを操作：持続的なPlaywrightデーモン上のCLIと、コンパクトなクリック可能なページスナップショット。
概要
このスキルは、AIコーディングエージェント（Claude Code、Cursor、Codexなど）がPlaywrightを使用して実際のブラウザを操作できるようにします。操作は持続的なデーモンを介して行われるため、毎回ブラウザを起動する必要がなく、高速で安定したブラウザ制御が可能です。
特徴
- 持続的なブラウザデーモン: Playwrightブラウザがバックグラウンドで動作し、複数のコマンドにわたって状態を保持します。
- CLIインターフェース: シンプルなコマンドラインインターフェースで、エージェントが簡単にブラウザ操作を実行できます。
- クリック可能なスナップショット: ページの状態をコンパクトなHTMLスナップショットとして取得し、エージェントが要素を特定してクリックできるようにします。
- 実際のブラウザ: ヘッドレスモードまたは通常モードで実際のChromium、Firefox、またはWebKitブラウザを操作します。
インストール
# Playwrightをインストール
npm install playwright
# ブラウザをインストール
npx playwright install chromium
# スキルをエージェントの設定に追加（例：Claude Codeの場合は.claude/skills/skills.jsonに追加）
使用方法
ブラウザデーモンの起動
python -m browser_skill.daemon
デーモンはデフォルトでlocalhost:9222でリッスンします。
利用可能なコマンド
| コマンド | 説明 |
|---|---|
browser open <url> | 指定されたURLをブラウザで開く |
browser click <selector> | CSSセレクタに一致する要素をクリック |
browser type <selector> <text> | 指定された要素にテキストを入力 |
browser screenshot | 現在のページのスクリーンショットを取得 |
browser snapshot | クリック可能なページスナップショットを生成 |
browser evaluate <js> | ページコンテキストでJavaScriptを実行 |
browser close | ブラウザを閉じる |
例
# エージェントがGoogleを開く
browser open https://www.google.com
# 検索バーにテキストを入力
browser type input[name="q"] "AI agent testing"
# 検索ボタンをクリック
browser click input[name="btnK"]
# 結果のスナップショットを取得
browser snapshot
設定
環境変数で設定可能：
| 変数名 | デフォルト値 | 説明 |
|---|---|---|
BROWSER_HOST | localhost | Playwrightデーモンのホスト |
BROWSER_PORT | 9222 | Playwrightデーモンのポート |
BROWSER_HEADLESS | true | ヘッドレスモードで実行 |
BROWSER_TYPE | chromium | ブラウザタイプ（chromium/firefox/webkit） |
詳細
詳細とトラブルシューティングについては、GitHubリポジトリを参照してください。