webpage-reader

目的

このスキルは、ナビゲーションメニュー、広告、サイドバー、フッター、Cookie バナー、その他すべてのコンテンツ以外の要素を取り除き、あらゆるウェブページ URL から読みやすく整った Markdown を抽出します。ページの重要な内容だけに絞った、トークン効率の高い出力を生成します。

エージェントが標準的なツールでウェブページを取得すると、生の出力には、価値を加えずにトークンを消費するナビゲーションリンク、プロモーションウィジェット、定型文が大量に含まれることがあります。このスキルは、コンテンツ抽出専用ツールである Defuddle を使ってノイズを取り除き、記事本文、ドキュメントの文章、または主要なコンテンツだけを抽出して返します。

Defuddle がインストールされていない場合も、このスキルは柔軟に対応します。自動インストールを提案するか、出力品質とトークン使用量への影響を明確に伝えたうえで、標準的なウェブ取得に切り替えます。

このスキルは汎用スキルです。あらゆるプロジェクト、あらゆるターミナル環境で動作し、Obsidian や特定のプロジェクト構成を必要としません。

使用するタイミング

次の場合にこのスキルを呼び出します。

• ユーザーが URL を提示し、ページの「読み込み」「取得」「抽出」「内容の取得」を依頼した場合
• ユーザーがオンラインドキュメント、API リファレンス、技術ガイドの分析を求めている場合
• ユーザーがブログ記事、記事、研究論文の URL を共有し、本文の取得を必要としている場合
• ユーザーがオフラインで参照したりメモを取ったりするために、ウェブコンテンツをローカルの Markdown ファイルに保存したい場合
• エージェントが調査や執筆のワークフローで外部コンテンツを参照する必要がある場合
• ユーザーがページを読む前に、ノイズの除去を求めている場合
• 調査セッションで複数の URL が一括処理用に提示された場合

次の場合はこのスキルを使用しないでください。

• URL が .md で終わる場合。これらのファイルはすでに Markdown なので、代わりに WebFetch を直接使用してください
• URL が PDF、DOCX、PPTX、またはバイナリファイルを指している場合。代わりに docling-converter を使用してください
• ユーザーが引用付きの複数ソース調査の統合を必要としている場合。代わりに deep-research を使用してください
• ユーザーがページとのインタラクション（フォーム、ログイン、JavaScript を多用するアプリ）を必要としている場合
• エージェントが認証情報を提供できず、URL に認証が必要な場合
• ユーザーが YouTube 動画の要約を求めている場合。代わりに youtube-summarizer を使用してください

ワークフロー

ステップ 1：入力を検証する

取得する前に、ユーザーが提示した URL を確認します。

1. 入力が有効な HTTP または HTTPS URL であることを確認します。URL でない場合は、「http:// または https:// で始まる有効な URL を指定してください。」と尋ねます。
2. ファイル拡張子を確認します。次の振り分けルールを適用します。
   • .md ファイル → すでに Markdown で抽出は不要なため、WebFetch を直接使用します
   • .pdf、.docx、.pptx、.xlsx ファイル → docling-converter に振り分けます
   • .mp3、.mp4、.wav ファイル → audio-transcriber に振り分けます
   • .png、.jpg、.gif、.svg ファイル → 画像の抽出には対応していないことをユーザーに伝えます
   • その他すべての URL → 抽出を続行します
3. 複数の URL が提示された場合は、件数を確認し、1 件ずつ順番に処理します。

ステップ 2：Defuddle が利用可能か確認する

抽出を試みる前に、簡単な利用可否チェックを実行します。

defuddle --version

Defuddle が利用可能な場合は、ステップ 3a に進みます。

Defuddle がインストールされていない場合は、次の案内をユーザーに提示します。

「Defuddle がインストールされていません。ウェブページから、標準的な取得方法より大幅に高品質な整った Markdown を抽出できます。npm install -g defuddle で今すぐインストールしますか？ 所要時間は約 10 秒です。（はい／いいえ）」

• ユーザーが承諾した場合：npm install -g defuddle を実行し、ステップ 3a に進みます。
• ユーザーが辞退した場合：出力品質が低下する旨を伝えたうえで、ステップ 3b に進みます。

ステップ 3a：Defuddle でコンテンツを抽出する（推奨手順）

Defuddle を使用してページのコンテンツを抽出します。

# Extract and display as Markdown
defuddle parse <url> --md

# Extract and save to a file
defuddle parse <url> --md -o output-filename.md

# Extract specific metadata only
defuddle parse <url> -p title
defuddle parse <url> -p description
defuddle parse <url> -p author
defuddle parse <url> -p domain

出力形式のフラグ：

フラグ	出力	使用する場面
--md	Markdown	すべてのコンテンツでのデフォルトの選択肢
--json	HTML と Markdown を含む JSON	構造化メタデータが必要な場合
（なし）	HTML	使用を避け、代わりに --md を使用してください
-p <name>	単一のメタデータプロパティ	タイトル、著者、説明のみが必要な場合

ユーザーが別の形式を明示的にリクエストしない限り、常に --md を優先してください。

ステップ 3b：WebFetch へのフォールバック（Defuddle を利用できない場合）

Defuddle を利用できず、ユーザーがインストールを断った場合は、標準の WebFetch 機能を使用し、次の注記を出力の先頭に追加します。

注：Defuddle を使わずに取得しています。出力にはナビゲーション要素やコンテンツ以外のテキストが含まれ、トークン使用量が増える可能性があります。よりクリーンな結果を得るには、npm install -g defuddle で Defuddle をインストールしてください。

WebFetch の出力には、可能な範囲で次のクリーンアップを適用します。

• ナビゲーションと思われる行（リンクテキストのみを含む非常に短い行）を削除します
• 過剰な空行を削除します（連続する空行を最大 2 行にまとめます）
• 品質に関する注意を明確に添えて、得られた中で最善のコンテンツを返します

ステップ 4：抽出エラーへの対応

ページでエラーが発生するか、リクエストがブロックされた場合は、明確な対処方法を案内します。

状況	応答
403 Forbidden	「このサイトは自動アクセスをブロックしています。ブラウザーで手動で開いてみてください。」
404 Not Found	「ページが見つかりません。URL が正しいことを確認してください。」
タイムアウト	自動で一度再試行します。再度失敗した場合は、タイムアウトを報告します
ログインが必要	「このページには認証が必要です。先にログインして、コンテンツを手動で共有してください。」
ペイウォールを検出	「このコンテンツはペイウォールの背後にあるため、自動では抽出できません。」
抽出結果が空	WebFetch にフォールバックし、品質が低下することを注記します
SSL が無効	SSL エラーを報告し、そのまま続行するかユーザーに確認します

抽出に失敗した場合、ページのコンテンツを捏造したり、作り上げたりしてはいけません。常に失敗を正直に報告してください。

ステップ 5：出力を整形して提供する

抽出したコンテンツは、統一された形式で提示します。

# [Page Title]

**Source:** [full URL]
**Domain:** [domain.com]

---

[Extracted Markdown content]

ファイルに保存する場合は、保存したことを確認します。

「コンテンツを [filepath] に保存しました。[domain.com] から [word count] 語を抽出しました。」

ユーザーがメタデータ（タイトル、著者、説明）のみをリクエストした場合は、本文全体を含めず、リクエストされた項目だけを返します。

複数の URL の場合は、それぞれの結果を明確な区切りで分け、各セクションに参照元の URL を記載します。

出力形式のリファレンス

Defuddle は複数の出力モードに対応しています。ユーザーのニーズに応じて適切なものを選択してください。

モード	コマンドフラグ	出力形式	最適な用途
Markdown	--md	クリーンな .md テキスト	記事、ドキュメント、ブログ投稿を読む場合
JSON	--json	html と markdown フィールドを含む JSON	構造化メタデータと本文の両方が必要な場合
HTML	（フラグなし）	クリーンアップ済みの生 HTML	使用を避け、読みやすい --md を使用してください
メタデータ	-p <name>	単一の文字列値	タイトル、著者、説明、ドメインのみが必要な場合

-p で指定できるメタデータプロパティ：

• title — ページのタイトル
• description — メタディスクリプション
• author — 記事の著者
• domain — ドメイン名のみ
• url — 正規 URL

ユーザーが別の形式を明示的にリクエストしない限り、常に --md をデフォルトとして使用してください。

他のスキルとの連携

このスキルは、他のスキルと組み合わせるとうまく機能します。

• deep-research の前 — リサーチの統合で引用する個々のページを事前に取得して整形するには、webpage-reader を使用します
• obsidian-note-builder の前 — まず URL から情報を抽出し、整形済みの Markdown を obsidian-note-builder に渡して、リンク付きの保管庫ノートを作成します
• youtube-summarizer の前 — ユーザーが動画ページの YouTube 以外の URL を指定した場合は、代わりに youtube-summarizer に振り分けます
• deep-research の後 — リサーチ中に特定した個々の情報源を取得して詳しく読むには、webpage-reader を使用します

スキルを連携させる場合は、どのステップをどのスキルが担当しているかを必ずユーザーに伝え、ワークフローを理解できるようにしてください。

重要なルール

絶対に行わないでください。

• .md で終わる URL の取得に Defuddle を使用すること — Markdown ファイルには WebFetch を使用します
• このスキルでバイナリファイル（PDF、画像、Office ドキュメント）を取得すること — docling-converter に誘導します
• 抽出に失敗したときに内容を捏造したり、作り上げたりすること — 失敗は常に正直かつ明確に報告します
• 出力の整理中にコードブロック、技術的な内容、整形済みテキストを削除すること — コードフェンスは見つかった状態のまま、すべて保持します
• ユーザーが読みやすい内容を求めている場合に、生の HTML を返すこと — 常に --md フラグを使用します
• 品質の違いをユーザーに伝えずに、黙って WebFetch に切り替えること
• 認証が必要な URL にアクセスできないことを明確に伝えずに、アクセスを試みること
• ユーザーが明示的に要約を求めていない限り、抽出した内容を要約したり、省略したりすること

必ず行ってください。

• 使用するツールや代替手段を決める前に、URL の拡張子を確認します
• 品質の低い抽出方法に切り替える前に、Defuddle のインストールを提案します
• 内容の出所がユーザーにわかるよう、出力にソース URL を含めます
• ユーザーが明示的に要約を求めていない限り、要約せずに内容全体を保持します
• 抽出エラーを明確に報告し、ユーザーが次に取れる具体的な対応を示します
• 複数の URL は順番に処理し、各結果にソース URL を付けて明確に区別します
• ファイルの保存を確認する際は、正確なパスとおおよその単語数を伝えます
• ユーザーが Defuddle のインストールを断り、WebFetch による代替を選んだ場合は、その選択を尊重し、インストールを再度提案せずに進めます

使用例

例 1：ドキュメントページを読む

User: Read this page for me: https://docs.anthropic.com/en/docs/about-claude/models

操作：Defuddle が利用可能か確認 → defuddle parse https://docs.anthropic.com/en/docs/about-claude/models --md を実行 → ソース URL を冒頭に記載し、Claude モデルのページを整形済み Markdown で返します。

結果：ナビゲーションリンク、サイドバーの内容、宣伝要素を除いた、ドキュメントの整形済み Markdown。

---

例 2：記事をローカルファイルに保存する

User: Extract this article and save it to notes/microservices.md:
      https://martinfowler.com/articles/microservices.html

操作：defuddle parse <url> --md -o notes/microservices.md を実行 → 保存を確認します。

結果：「notes/microservices.md にコンテンツを保存しました — martinfowler.com から 4,200 語を抽出しました。」

---

例 3：ページのメタデータのみを取得する

User: What is the title and author of this page?
      https://kentcdodds.com/blog/javascript-to-know-for-react

操作：defuddle parse <url> -p title と defuddle parse <url> -p author を実行 → 2 つのメタデータ値のみを返します。

結果：ページ本文全体を取得せず、タイトルと著者をわかりやすく表示します。

---

例 4：リサーチ用に一括抽出する

User: I am researching LLM evaluation frameworks. Read these three pages:
      - https://docs.ragas.io/en/latest/
      - https://www.trulens.org/
      - https://lilianweng.github.io/posts/2023-03-15-prompt-engineering/

操作：Defuddle で各 URL を順番に処理 → ラベル付きの Markdown セクションを 3 つ返します。

結果：それぞれの先頭にソース URL を記載した、比較や要約にすぐ使える整形済みの抽出結果が 3 つ得られます。

---

例 5：Defuddle が未インストール — インストールを提案する

User: Fetch https://research.google/blog/advances-in-research/ and summarize it

操作：defuddle --version を確認 → 見つからない → インストールを提案します。

応答：「Defuddle がインストールされていません。整形済み Markdown を出力するために、npm install -g defuddle で今すぐインストールしますか？（yes/no）」

ユーザーが yes と答えた場合：インストールして抽出します。no と答えた場合：品質に関する注意を伝えて WebFetch に切り替え、その後、抽出と要約を進めます。