/ ディレクトリ / プレイグラウンド / browser-act skills
● コミュニティ browser-act ⚡ 即起動

browser-act skills

作者 browser-act · browser-act/skills

複雑なサイトのブラウジング、スクレイピング、構造化データ抽出をフルヘッドレスブラウザより高速かつ低コストで実現。

browser-act は Web 自動化のための Claude スキルで、スクリーンショット+思考ループよりも構造化抽出を優先します。明示的なセレクタまたはスキーマガイドプロンプトを使って、ページの訪問、フローのナビゲーション、型付きデータの抽出が可能です。DDGスタイルのフェッチが何も返さない JS ヘビーなサイトで動作しますが、多くのタスクでフル Playwright MCP より安価です。

なぜ使うのか

主な機能

ライブデモ

実際の動作

準備完了

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "browser-act-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "browser-act-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/browser-act/skills",
        "~/.claude/skills/browser-act"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "browser-act-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/browser-act/skills",
          "~/.claude/skills/browser-act"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add browser-act-skill -- git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: browser-act skills

JS ヘビーな SPA から型付きリストを抽出する

👤 API のないサイトから単発データが必要な開発者 ⏱ ~25 min intermediate

使うタイミング: JS 実行後にのみデータがレンダリングされるサイト。プレーンなフェッチでは何も返らない場合。

前提条件
  • スキルのインストール — git clone https://github.com/browser-act/skills ~/.claude/skills/browser-act
フロー
  1. スキーマを定義する
    Use browser-act. Schema: items[]{title:str, price:number, available:bool}.✓ コピーしました
    → スキーマ受理済み
  2. 訪問して抽出する
    Open <url>; wait for the product grid; extract matching the schema.✓ コピーしました
    → 型付き JSON リスト
  3. 外れ値を検証する
    Spot-check 3 random rows by re-fetching their detail page; check parsing is correct.✓ コピーしました
    → スポットチェック合格、またはバグ発見

結果: 信頼性の高い型付きデータ。手動クリック不要。

注意点
  • 50 リクエスト後にサイトのボット検知がブロック — 同時実行数を下げる、UA をローテートする、robots.txt を尊重するかタスクをスキップ
組み合わせ: filesystem

マルチステップフォームを経てデータに到達する

👤 ログインやウィザードの裏にあるデータをスクレイピングする開発者 ⏱ ~40 min intermediate

使うタイミング: 「国を選択 → 年を選択 → 表示をクリック」というフローの裏に公開データセットがある場合。

フロー
  1. フローを計画する
    Use browser-act. Steps: pick country=US, year=2025, click 'View'. Then extract the table.✓ コピーしました
    → フロープラン受理済み
  2. 実行する
    Run the flow for 50 country/year combinations.✓ コピーしました
    → 50 件すべての型付き行
  3. 保存する
    Write each combo to /data/<country>-<year>.json.✓ コピーしました
    → /data/ 以下にファイル生成

結果: 手作業なしにクリック UI の裏にある大量データを取得。

注意点
  • サイトがステップを追加またはボタンのラベルを変更するとフローが壊れる — スキルが検知して一時停止する。フローを一度再記録するだけで 50 回繰り返す必要なし
組み合わせ: filesystem

ページの変化を監視してアラートを出す

👤 ステータスページや空き状況トラッカーを見ている誰でも ⏱ ~15 min beginner

使うタイミング: スロットが空く、価格が下がる、ドキュメントが更新されたタイミングを知りたい場合。

フロー
  1. 監視を設定する
    Use browser-act. Watch <url> selector '.availability-banner' every 10 minutes. Alert if text changes.✓ コピーしました
    → 監視アクティブ
  2. アラート先を設定する
    Alert via: write to ~/inbox/alerts.txt + notify webhook https://<my-webhook>.✓ コピーしました
    → 変化時に両方が発火

結果: 特定シグナルのハンズフリー監視。

注意点
  • 過剰な監視頻度でブロックされる — ほとんどのサイトでは 5 分以上の間隔を維持し、429 を尊重する

組み合わせ

他のMCPと組み合わせて10倍の力を

browser-act-skill + filesystem

スクレイピングデータを構造化パスに保存する

Save extraction outputs to /data/<source>/<date>.json with provenance metadata.✓ コピーしました
browser-act-skill + duckduckgo-mcp

検索でページを見つけてから構造化データを抽出する

Search via duckduckgo-mcp for the data source; pass the URL into browser-act for typed extraction.✓ コピーしました

ツール

このMCPが提供する機能

ツール入力呼び出すタイミングコスト
extract_typed url, schema, wait_for? ページから構造化データを取得する Browser run + LLM tokens
run_flow steps[], schema? マルチステップのナビゲーション Multi-step browser cost
watch url, selector, interval, action 長時間の変化検知 Per-poll cost
screenshot url, full_page? ビジュアルデバッグ Browser run

コストと制限

運用コスト

APIクォータ
プロバイダー依存。バンドルブラウザで一部フローは無料
呼び出しあたりのトークン
スキーマガイド抽出はスクリーンショット+思考より安価
金額
スキル無料、抽出には LLM トークンが必要
ヒント
常にスキーマを渡すこと — 無指定の抽出はノイズにトークンを浪費する

セキュリティ

権限、シークレット、影響範囲

最小スコープ: Outbound HTTPS
認証情報の保管: サイトにログインする場合、秘密情報は env var 経由。単発スクレイプ後はローテートすること
データ送信先: 対象サイト + LLM プロバイダー
絶対に付与しない: Persistent login tokens stored in the skill's workspace

トラブルシューティング

よくあるエラーと対処法

抽出結果が空

セレクタの待機時間を延ばす。サイトが遅延や XHR クリック後にデータを読み込む可能性がある

確認: Use screenshot tool to verify page state
サイトがボット検知する

同時実行数を下げる、UA をローテートする、サイトがスクレイピングを許可しているか検討する

スキーマ不一致

型を緩める(string vs number)。サイトの書式が厳密な型を壊す場合がある

見た目の変化で Watch が頻繁に発火する

セレクタをより絞り込む。または HTML diff ではなくテキストベースの diff に切り替える

代替案

browser-act skills 他との比較

代替案代わりに使う場面トレードオフ
Playwright MCP / chrome-devtools-mcpフル DevTools 機能を含む完全なブラウザ制御が必要な場合重い。呼び出し毎のコストが高い
Firecrawl MCPページ単位の型付き抽出ではなくサイト全体のクロールが必要な場合形状が異なる。大規模ボリュームは有料
duckduckgo-mcp fetch_contentページがプレーン HTML で JS 不要な場合SPA では動作しない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る