mcpField
W
web-to-markdown

web-to-markdown

github.com/davila7ドキュメント33.0k322 回インストール1 日前に更新
リポジトリ

web-to-markdown について

web-to-markdownは、ローカルにインストールされたブラウザーでウェブページを取得し、整形されたMarkdownに変換するスキルです。JavaScriptで描画されるページに対応し、結果の出力や保存ができます。名前を明示して依頼された場合のみ使用します。

主な機能

  1. 01ローカルブラウザーの操作
  2. 02JavaScript描画ページへの対応
  3. 03メインコンテンツの抽出
  4. 04ページのMarkdown変換
  5. 05結果の出力または保存
  6. 06YAMLフロントマターの任意追加

活用シーン

  1. 01動的なウェブページのMarkdown変換
  2. 02後で読むためのページ本文抽出
  3. 03ページ内容のファイル保存
  4. 04人によるログインや確認が必要なページの処理

インストール

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

$npx skills add https://github.com/davila7/claude-code-templates --skill web-to-markdown

インストール後、Claude Code で/web-to-markdownを入力して読み込まれたか確認します。

同梱ファイルREADME.md

詳細

web-to-markdown

ローカルにインストールされたブラウザを(web2md経由で)操作し、Web ページをクリーンな Markdown に変換します。

必須の発動ゲート(必ず適用すること)

このスキルは、ユーザーが次のようなフレーズを一字一句そのまま書いていない限り、使用してはなりません:

  • use the skill web-to-markdown ...
  • use a skill web-to-markdown ...

ユーザーがこのスキルを名前で明示的に指定していない場合は、作業を止めて、use the skill web-to-markdown を含めて依頼を出し直すよう求めてください。

このスキルの機能

  • JavaScript でレンダリングされるページを処理します(Puppeteer → ユーザーの Chrome)。
  • puppeteer-core を介した Chromium 系ブラウザ(Chrome/Chromium/Brave/Edge)で最もよく動作します。
  • 本文を抽出します(Readability)。
  • リンクを整理し、必要に応じて YAML フロントマターを付けたうえで Markdown に変換します(Turndown)。

対象外

  • Playwright など、他のブラウザ自動化スタックは使用しないでください。仕組みは web2md です。

収集すべき入力(不足している場合のみ確認)

  • url(または URL のリスト)
  • 出力の希望:
    • 標準出力に表示(--print)、または
    • ファイルに保存(--out ./file.md)、または
    • ディレクトリに保存(--out ./some-dir/ でページタイトルから自動命名)
  • 扱いにくいページ向けの任意のレンダリング制御:
    • --chrome-path <path>(Chrome の自動検出に失敗した場合)
    • --interactive(Chrome を表示して一時停止し、ユーザーが人による確認やログインを完了してから Enter キーを押す)
    • --wait-until load|domcontentloaded|networkidle0|networkidle2
    • --wait-for '<css selector>'
    • --wait-ms <milliseconds>
    • --headful(デバッグ用)
    • --no-sandbox(コンテナや CI で必要になる場合がある)
    • --user-data-dir <dir>(ログイン・セッション用。専用のプロファイルディレクトリを使用)

ワークフロー

  1. ユーザーがこのスキルを明示的に呼び出したことを確認します(use the skill web-to-markdown)。
  2. URL が http:// または https:// で始まることを検証します。
  3. web2md がインストールされていることを確認します:
    • 実行: command -v web2md
    • 見つからない場合は、ユーザーにインストールを案内します:
      • npm で利用できる場合: npm install -g web2md
      • ソースから行う場合: リポジトリをクローンしたうえで npm install && npm run build && npm link を実行
  4. 変換を行います:
    • 単一 URL → ファイル:
      • web2md '<url>' --out ./page.md
    • 単一 URL → ディレクトリ内に自動命名されたファイル:
      • mkdir -p ./out && web2md '<url>' --out ./out/
    • 人による確認/ログインの壁がある場合(インタラクティブ):
      • mkdir -p ./out && web2md '<url>' --interactive --user-data-dir ./tmp/web2md-profile --out ./out/
      • その後、ブラウザウィンドウで確認を完了し、ターミナルで Enter キーを押して続行します。
    • 標準出力に表示:
      • web2md '<url>' --print
    • 複数 URL(バッチ):
      • 出力ディレクトリ(例: ./out/)を作成し、URL ごとに --out ./out/ を指定して web2md コマンドを 1 回ずつ実行します。
  5. 出力を検証します:
    • ファイルに書き出している場合は、存在し空でないことを確認します(例: ls -la <path> と wc -c <path>)。
  6. 結果を返します:
    • 保存したファイルのパス、または Markdown(標準出力モードの場合)。

既定値(推奨)

  • ほとんどのページ: --wait-until networkidle2
  • 負荷の高いアプリ: まず --wait-until domcontentloaded --wait-ms 2000 で開始し、必要に応じて --wait-for 'main'(または他の安定したセレクター)を追加します。

コメント