mcpField
W
web-to-markdown

web-to-markdown

github.com/softaworksドキュメント2.6k761 回インストール34 週間前に更新
リポジトリ

web-to-markdown について

web-to-markdownは、ローカルブラウザーからweb2mdを実行し、ウェブページを整ったMarkdownに変換するスキルです。JavaScriptで描画されるページにも対応し、本文抽出やリンク整理、YAML frontmatterの追加ができます。

主な機能

  1. 01ページをMarkdownに変換
  2. 02JavaScript描画ページに対応
  3. 03Readabilityで本文を抽出
  4. 04Turndownでリンクを整理
  5. 05YAML frontmatterを任意で追加
  6. 06標準出力またはファイルに保存

活用シーン

  1. 01ウェブ記事をMarkdownで保存
  2. 02動的に描画されるページの変換
  3. 03複数URLの一括変換

インストール

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

$npx skills add https://github.com/softaworks/agent-toolkit --skill web-to-markdown

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

同梱ファイルREADME.md

詳細

web-to-markdown

ローカルにインストールされたブラウザーを操作して(web2md 経由で)、ウェブページを読みやすい 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)。
  • リンクを整えて Markdown に変換し、必要に応じて YAML フロントマターを追加します(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
    • 見つからない場合は、インストールするようユーザーに案内します(プロジェクトは ~/workspace/softaworks/projects/web2md にあるものとします)。
      • cd ~/workspace/softaworks/projects/web2md && npm install && npm run build && npm link
      • または cd ~/workspace/softaworks/projects/web2md && npm install && npm run build && npm install -g .
  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 コマンドを実行します。
  5. 出力を確認します。
    • ファイルに書き込む場合は、ファイルが存在し、空でないことを確認します(例:ls -la <path> および wc -c <path>)。
  6. 返却します。
    • 保存したファイルのパス、または Markdown(標準出力モードの場合)。

デフォルト設定(推奨)

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

コメント