✍️ ライティングコミュニティ

browser-discovery

JavaScriptで動的に表示されるサイトなど、curlが使えない場合に、ブラウザを自動操作してドキュメントを見つけたり、ブラウザ関連ツールの設定を自動化したりするSkill。

📜 元の英語説明(参考)

Browser automation for documentation discovery. Use when curl fails on JS-rendered sites, when detecting available browser tools, or when configuring browser-based documentation collection.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o browser-discovery.zip https://jpskill.com/download/18024.zip && unzip -o browser-discovery.zip && rm browser-discovery.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/18024.zip -OutFile "$d\browser-discovery.zip"; Expand-Archive "$d\browser-discovery.zip" -DestinationPath $d -Force; ri "$d\browser-discovery.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して browser-discovery.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → browser-discovery フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-18
取得日時: 2026-05-18
同梱ファイル: 1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Browser Discovery Skill

静的フェッチが失敗した場合に、ドキュメントの発見のためにブラウザ自動化ツールを検出して使用します。

変数

変数	デフォルト	説明
PREFERRED_TOOL	auto	`auto`, `antigravity`, `cursor`, `playwright`
WAIT_TIMEOUT	3	JS レンダリングを待つ秒数
MAX_PAGES	50	サイトごとに発見する最大ページ数

指示

必須 - ブラウザ自動化が必要な場合は、以下のワークフローの手順に従ってください。

js_required: true が設定されていない限り、常に最初に curl を試してください
自動化を試みる前に、利用可能なブラウザツールを検出してください
リンク抽出には、スクリーンショットよりもアクセシビリティスナップショットを優先してください

クイック意思決定ツリー

ブラウザ自動化が必要ですか？
│
├─ Curl が完全なコンテンツを返す？ ──────────► いいえ - curl を使用 (docs-fetch-url)
│
├─ Curl が 1KB 未満または 403 を返す？ ───────────► はい - 以下に進む
│
どのブラウザツールを使用しますか？
│
├─ browser_subagent が利用可能？ ─────────► antigravity-browser.md
│
├─ Cursor IDE 内？ ──────────────────────► cursor-browser.md
│
├─ Chrome デバッグが :9222 で有効？ ──────────► playwright-browser.md (ラッパー)
│
└─ ブラウザツールがない？ ────────────────────► 「ブラウザが利用できない場合」セクションを参照

危険信号 - 停止して再検討

もしあなたが以下をしようとしているなら：

curl が動作する場合にブラウザ自動化を使用する
ツール検出をスキップして、特定のツールが存在すると仮定する
スナップショットが構造化データを提供する場合にスクリーンショットを撮る
JS レンダリングを待たずにナビゲートする

停止 -> 適切なクックブックを確認 -> その後、続行

ワークフロー

[ ] チェックポイント: ブラウザ自動化が実際に必要かどうかを確認する
- Curl の応答が 1KB 未満？
- Curl が 403 Forbidden を返す？
- config に js_required: true がある？
[ ] 利用可能なブラウザツールを検出する (優先順位順)
[ ] 最も利用可能なツールを選択する
[ ] チェックポイント: 選択したツールのクックブックを読む
[ ] ブラウザベースのディスカバリーを実行する
[ ] 結果を解析し、構造化データを返す

ツール検出の優先順位

優先度	ツール	検出	最適な用途
1	Antigravity `browser_subagent`	ツールリストにある	ゼロコンフィグのネイティブ
2	Cursor MCP (IDE 内)	`mcp__cursor__browser_*`	Cursor IDE 内
3	Cursor CLI	`which cursor-agent`	CLI からの委譲
4	Playwright (ラッパー)	`curl localhost:9222/json/version`	完全な自動化

クックブック

Antigravity Browser

IF: browser_subagent ツールが利用可能
THEN: cookbook/antigravity-browser.md を読む

Cursor Browser

IF: Cursor IDE 内または cursor-agent が利用可能
THEN: cookbook/cursor-browser.md を読む

Playwright Browser

IF: Chrome デバッグが localhost:9222 でアクセス可能
THEN: cookbook/playwright-browser.md を読む

ブラウザが必要な場合

サイトがブラウザ自動化を必要とする兆候：

Curl の応答が 1KB 未満 (JS レンダリングされたコンテンツ)
応答に "please enable javascript" が含まれている
フレームワークマーカー: __NEXT_DATA__, window.__remixContext, window.__NUXT__
CSS/フォントリソースのみが返される (テキストコンテンツがない)

ブラウザが利用できない場合

ブラウザツールが検出されない場合：

ブラウザ自動化ツールが検出されませんでした。

セットアップオプション：
1. Antigravity IDE: 組み込み (ゼロコンフィグ)
2. Cursor: インストールされている場合は cursor-agent が利用可能
3. Claude Code: デバッグで Chrome を起動:
   google-chrome --remote-debugging-port=9222

   次に、Playwright ラッパーを使用します:
   python3 .claude/ai-dev-kit/dev-tools/mcp/wrappers/playwright_wrapper.py navigate "https://..."

出力

発見されたページを構造化データとして返します：

{
  "pages": [
    {"url": "...", "title": "...", "section": "..."}
  ],
  "nav_structure": "sidebar | tabs | accordion",
  "js_required": true
}

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Browser Discovery Skill

Detect and use browser automation tools for documentation discovery when static fetching fails.

Variables

Variable	Default	Description
PREFERRED_TOOL	auto	`auto`, `antigravity`, `cursor`, `playwright`
WAIT_TIMEOUT	3	Seconds to wait for JS rendering
MAX_PAGES	50	Maximum pages to discover per site

Instructions

MANDATORY - Follow the Workflow steps below when browser automation is needed.

Always try curl first unless js_required: true is set
Detect available browser tools before attempting automation
Prefer accessibility snapshots over screenshots for link extraction

Quick Decision Tree

Do you need browser automation?
│
├─ Curl returns full content? ──────────► NO - Use curl (docs-fetch-url)
│
├─ Curl returns <1KB or 403? ───────────► YES - Continue below
│
Which browser tool to use?
│
├─ browser_subagent available? ─────────► antigravity-browser.md
│
├─ In Cursor IDE? ──────────────────────► cursor-browser.md
│
├─ Chrome debugging on :9222? ──────────► playwright-browser.md (wrapper)
│
└─ No browser tool? ────────────────────► See "No Browser Available" section

Red Flags - STOP and Reconsider

If you're about to:

Use browser automation when curl would work
Skip tool detection and assume a specific tool exists
Take screenshots when snapshot would provide structured data
Navigate without waiting for JS rendering

STOP -> Check the appropriate cookbook -> Then proceed

Workflow

[ ] CHECKPOINT: Verify browser automation is actually needed
- Curl response < 1KB?
- Curl gets 403 Forbidden?
- js_required: true in config?
[ ] Detect available browser tools (priority order)
[ ] Select best available tool
[ ] CHECKPOINT: Read the cookbook for selected tool
[ ] Execute browser-based discovery
[ ] Parse results and return structured data

Tool Detection Priority

Priority	Tool	Detection	Best For
1	Antigravity `browser_subagent`	Tool in tool list	Zero-config native
2	Cursor MCP (in-IDE)	`mcp__cursor__browser_*`	In Cursor IDE
3	Cursor CLI	`which cursor-agent`	Delegation from CLI
4	Playwright (wrapper)	`curl localhost:9222/json/version`	Full automation

Cookbook

Antigravity Browser

IF: browser_subagent tool available
THEN: Read cookbook/antigravity-browser.md

Cursor Browser

IF: In Cursor IDE or cursor-agent available
THEN: Read cookbook/cursor-browser.md

Playwright Browser

IF: Chrome debugging accessible at localhost:9222
THEN: Read cookbook/playwright-browser.md

When Browser Is Needed

Signs that a site requires browser automation:

Curl response < 1KB (JS-rendered content)
Response contains "please enable javascript"
Framework markers: __NEXT_DATA__, window.__remixContext, window.__NUXT__
Only CSS/font resources returned (no text content)

No Browser Available

If no browser tool is detected:

No browser automation tool detected.

Setup options:
1. Antigravity IDE: Built-in (zero config)
2. Cursor: cursor-agent available when installed
3. Claude Code: Launch Chrome with debugging:
   google-chrome --remote-debugging-port=9222

   Then use the Playwright wrapper:
   python3 .claude/ai-dev-kit/dev-tools/mcp/wrappers/playwright_wrapper.py navigate "https://..."

Output

Return discovered pages as structured data:

{
  "pages": [
    {"url": "...", "title": "...", "section": "..."}
  ],
  "nav_structure": "sidebar | tabs | accordion",
  "js_required": true
}