mcpField
C
create-md-from-browsermcp-snapshot

create-md-from-browsermcp-snapshot

github.com/derailed-dashドキュメント2656 回インストール6 日前に更新
リポジトリ

create-md-from-browsermcp-snapshot について

このスキルは、BrowserMCPのアクセシビリティツリーのスナップショットを構造化されたMarkdownに変換します。見出し、リスト、表、引用、リンク先を保持したい場合に利用できます。

主な機能

  1. 01BrowserMCPスナップショットYAMLの解析
  2. 02親子ノード階層の構築
  3. 03ページ構造のMarkdown変換
  4. 04見出しと終了マーカーの指定

活用シーン

  1. 01WebページのスナップショットからMarkdownを作成
  2. 02スナップショットからリストや表を抽出
  3. 03見出しとリンク先を保持

MCP 対応

BrowserMCPサーバーが必要で、browser_snapshotツールからアクセシビリティツリーのスナップショットを取得します。そのスナップショットをMarkdownに変換します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/derailed-dash/dazbo-agent-skills --skill create-md-from-browsermcp-snapshot

インストール後、Claude Code で/create-md-from-browsermcp-snapshotを入力して読み込まれたか確認します。

同梱ファイルscripts/parse_snapshot.py

詳細

BrowserMCP スナップショットから Markdown を作成する

このスキルは、BrowserMCP（browser_snapshot ツール経由）で取得した生のアクセシビリティツリースナップショットを、美しく整形された高忠実度の Markdown ドキュメントに変換します。

前提条件と BrowserMCP の確認

重要

このスキルを使用するには、環境に BrowserMCP サーバーがインストールされ、利用可能である必要があります。

サイトへの移動やスナップショットの取得を行う前に、次の手順を実行してください。

  1. ツールの利用可能性を確認：アクティブな MCP ツールの一覧に、browsermcp サーバーとその browser_snapshot ツールがあるか確認します。
  2. BrowserMCP が見つからない場合：
    • ただちに処理を中止し、ユーザーに通知します。
    • BrowserMCP をインストールし、MCP 設定（例：~/.gemini/config/mcp_config.json または Antigravity MCP の設定）に browsermcp サーバーのエントリを構成するよう、ユーザーに案内します。
    • BrowserMCP を有効にして利用可能になった後、タスクを再実行するようユーザーに依頼します。

使用する場面

次の場合にこのスキルを使用します。

  • BrowserMCP の browser_snapshot ツールを使用して、ウェブページのアクセシビリティツリー YAML を取得した場合。
  • ページのコンテンツを構造化された高忠実度の Markdown（.md）形式で生成する必要がある場合。
  • 取得したページのレイアウトから、リスト、表、見出し、引用、リンク先をきれいに抽出したい場合。

注：このスキルは、BrowserMCP ツールを使用したブラウザーのナビゲーションを補完するものです。Playwright や Antigravity 組み込みのブラウザーエージェントなど、他のブラウザーナビゲーションツールでの使用は想定していません。使用するツールと使用しないツールを明確に指定してください。

動作の仕組み

このスキルは、取得したアクセシビリティツリー YAML スナップショットを読み込む Python パーサーを実行し、親子ノードの階層を構築して、タグとプロパティを再帰的に Markdown テキストへ変換します。

フォルダー構成
create-md-from-browsermcp-snapshot/
├── SKILL.md
└── scripts/
    └── parse_snapshot.py
実行手順
  1. BrowserMCP を確認：前提条件と BrowserMCP の確認の説明に従って、browsermcp がインストールされていることを確認します。見つからない場合は、インストールするようユーザーに案内します。
  2. スナップショットを取得：browser_navigate を使用して対象 URL に移動し、browser_snapshot を実行してアクセシビリティツリー YAML を出力します。
  3. パーサーを実行：Python スクリプト parse_snapshot.py を実行し、取得したスナップショットのテキストファイルの絶対パスを引数として渡し、出力する Markdown のパスを指定します。
python3 ./create-md-from-browsermcp-snapshot/scripts/parse_snapshot.py --input <snapshot_path> --output <markdown_path> [--start-heading <heading_title>] [--end-marker <footer_text>]

コメント

Markdown 対応