本文へ移動
cccskills
無料GitHub で公開

notion-pdf

NotionページをPDFファイルに変換するスキル。Notion MCPでページ内容を取得し、見栄えのよいPDFとして出力する。ユーザーがNotionページのURL・ID・タイトルを指定してPDF化・PDF変換・PDF出力・印刷用出力を依頼した場合に使用する。

「このNotionページをPDFにして」「NotionページをPDFに変換して」「Notionを保存したい」「このページを印刷したい」「ドキュメントをPDFで共有したい」といった表現で起動する。

ユーザーの発言にNotionページのURLが含まれていてPDF化の意図がある場合は、明示的にPDFと言っていなくても積極的にこのスキルの使用を検討する。

インストール方法を見る

含まれるファイル(9)

  • SKILL.md6.8 KB
  • LICENSE.txt1.0 KB
  • references/block-to-html.md6.7 KB
  • references/html-template.md5.7 KB
  • scripts/html-to-pdf.mjs8.9 KB
  • scripts/package-lock.json32.7 KB
  • scripts/package.json218 B
  • scripts/vendor/PRIMER_CSS_LICENSE1.1 KB
  • scripts/vendor/primer.css728.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Notion → PDF 変換スキル

NotionページをNotion MCPで取得し、スタイリングされたPDFに変換する。

前提条件

  • Notion MCP が接続されていること(mcp_notion_API-* ツールが使用可能)
  • Node.js がインストールされていること
  • Chrome/Chromium が環境にあること(自動検出される)

ワークフロー

ステップ1: 対象ページの特定

ユーザーからNotionページの情報を受け取る。

  • URLが提供された場合: URLからページIDを抽出する
    • 形式: https://www.notion.so/.../<title>-<page-id> または https://www.notion.so/<page-id>
    • URLの末尾32文字(ハイフンなし16進数)がページID
    • ハイフン付きUUID形式(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)はそのまま使用可能
  • IDが提供された場合: そのまま使用
  • タイトルが提供された場合: mcp_notion_API-post-search で検索し、候補をユーザーに提示して選んでもらう
  • 曖昧な場合: どのページか確認する

ステップ2: ページ内容の取得(インクリメンタル処理)

コンテキスト制限に対応するため、ブロック取得とHTML変換をバッチ単位で交互に行う。全ブロックのJSONをメモリに保持しない。

  1. mcp_notion_API-retrieve-a-page でページメタデータ(タイトル、プロパティ)を取得
  2. HTMLファイルを作成し、テンプレートの <head> 〜 <article class="markdown-body"> + <h1>タイトル</h1> を書き込む
  3. mcp_notion_API-get-block-children で子ブロックを1ページ分取得
  4. 取得したブロックを即座にHTMLに変換し、ファイルに追記する
  5. has_children: true のブロックは子ブロックを取得して変換(再帰の深さ上限: 5階層)
  6. レスポンスに has_more: true がある場合は start_cursor で次ページを取得し、手順4〜5を繰り返す
  7. 全ブロック処理後、</article> + スクリプトタグ + </body></html> を書き込んで閉じる

リストのグルーピング: 連続するリストアイテムの <ul> / <ol> ラッパーの開閉は、前回バッチの末尾ブロックタイプを記憶して管理する。

子ページを含める場合は、child_page タイプのブロックIDで再帰的にステップ2を実行する。

ステップ3: HTML生成

取得したブロックデータをもとにHTMLを生成する。

  • HTMLテンプレートは references/html-template.md を参照
  • ブロック → HTML変換ルールは references/block-to-html.md を参照

重要なポイント:

  • data-color-mode="light" 属性が必須(Primer CSSのテーマ変数を有効化)
  • mermaid コードブロックがある場合のみ mermaid <script> タグを挿入(CDN非対応環境でのタイムアウト防止)
  • 数式(equation ブロック / rich_text 内の type: "equation")がある場合のみ KaTeX の CSS + <script> タグを挿入
  • 画像は <img src="url"> としてそのまま含める(PDF変換スクリプトがダウンロード・Base64埋め込みを処理する)
  • トグルは <details open> で常に展開状態にする(PDFでは折りたたみ不可)
  • テーブルは <table> + <thead> / <tbody> で構成

生成したHTMLを作業ディレクトリに保存する。ファイル名: {ページタイトル}.html

ステップ4: PDF変換

スキルディレクトリの scripts/html-to-pdf.mjs を使用してPDFに変換する。puppeteer-core で HTML を開き、CSS読み込みと mermaid 図・KaTeX 数式のレンダリングを待ってからPDF化するスクリプト。

Chrome/Chromium バイナリは環境から自動検出される(CHROME_PATH 環境変数でも指定可能)。HTML内の CDN URL は、scripts/vendor/ にローカルファイルがあれば自動的にローカルパスに置換される(Primer CSS は vendor/primer.css に同梱済み)。

スキルディレクトリのパスは、このファイル(SKILL.md)が存在するディレクトリ。

# 依存パッケージのインストール(node_modules が存在しない場合のみ)
npm install --prefix <skill-dir>/scripts

# PDF生成
node <skill-dir>/scripts/html-to-pdf.mjs <input.html> <output.pdf> [--format=A4]

オプション:

  • --format=A4(デフォルト)/ --format=Letter 等
  • --margin=20mm(デフォルト)

ステップ5: 完了

  1. 生成されたPDFのパスをユーザーに報告
  2. 一時HTMLファイルを削除
  3. 追加ページの変換が必要か確認

オプション

ユーザーが指定可能。指定がなければデフォルトを使用し、事前に聞かない。

オプションデフォルト説明
出力ファイル名ページタイトル.pdfPDFのファイル名
用紙サイズA4A4, Letter 等
子ページ含むfalseサブページも含めるか

エラーハンドリング

  • Notion MCPが未接続: mcp_notion_API-* ツールが使えない場合、MCP接続設定を確認するよう案内する
  • ページが見つからない: URL/ID/タイトルの再確認を促す。検索結果が複数ある場合は候補を提示
  • puppeteer-core未インストール: npm install --prefix <skill-dir>/scripts の実行を提案
  • Chrome が見つからない: CHROME_PATH 環境変数の設定か Chrome/Chromium のインストールを案内
  • 画像取得失敗: PDF変換スクリプトが画像ダウンロードに失敗した場合、その画像は空白になるがPDF生成は続行。ログの Warning をユーザーに報告
  • ブロック取得のページネーション: 100ブロック超のページでは has_more を確認し、全ブロック取得するまで繰り返す
  • 再帰の深さ超過: ネスト5階層を超えた場合はそれ以上の子ブロック取得をスキップし、「(省略)」と表示する

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

cc-sdd-restack-after-merge

無料日本語概要

stacked PRの下位PRがマージされた後に上位branchをrestack(rebase/cherry-pick再構成)する際に使用。「restackして」「上位PRを更新して」「restack after merge」「PRのbaseを更新」「スタックを整理」という依頼でトリガーする。対象sliceの特定→rebase→変更ファイル確認と代表テスト実行→force-with-leaseでpush→PR base更新→auto-merge判定の順で進める。

studiogadget/skills32026年5月25日 更新

cc-sdd-review-slice-stack

無料日本語概要

cc-sdd実装用統合ブランチのコミット群(ベースブランチとの差分)をreview slice単位のstacked PRに再構成する際に使用。「review sliceに分割」「stacked PRを作成」「PRをスタックして」「レビュー用にPRを分けて」「review slice stack」という依頼でトリガーする。dry-run(既定)でslice計画を提示し、apply指示で実際にブランチ・PRを作成する。

studiogadget/skills32026年5月25日 更新

ci-stable-log-testing

無料日本語概要

CI環境で安定動作するPythonテスト(特にstructlogのログ検証)を書く際に使用。「CIで失敗する」「capture_logsが不安定」「ログアサーションがCIだけ落ちる」「caplogフォールバック」「ANSI混入」「xdistでログが取れない」という課題で起動。capture_logs→caplogフォールバック→ANSI正規化→アサーション設計の流れで堅牢なテストを書く。

studiogadget/skills32026年5月25日 更新

create-issue

無料日本語概要

GitHub Issueを作成してGitHubに投稿するスキル。「Issueを作成」「Issue作成」「Issueにして」「Issueとして投稿」「GitHubにIssue」「create issue」「open issue」「バグ報告」「機能追加をIssueに」「改善提案をIssueに」などの依頼でトリガーする。コンテキスト収集→Issue本文生成→ラベル存在確認・作成→gh issue create投稿の流れでIssueを作成する。

studiogadget/skills32026年5月25日 更新

docker-deployment-guide

無料日本語概要

Dockerベースのアプリケーションのデプロイメント手順書(Markdown)を作成するスキル。「デプロイ手順書」「デプロイメント手順」「deployment guide」「本番環境への配置手順」「サーバーへの配置手順」などの依頼でトリガーする。Docker Composeビルド→イメージ転送→サーバー配置→設定→動作確認→cron設定の流れで手順書を生成する。

studiogadget/skills32026年5月25日 更新

hibernate-pc

無料日本語概要

タスク完了後にPCを休止状態にする。Use when: ユーザーが「休止」「hibernate」「タスク完了後に休止状態」「作業後にPCをスリープ/休止」と明示的に指示した場合のみ。正常終了時だけでなく、エラーや未解決事項が残っていても、明示指示があれば最後に休止へ移行する。Windows only.

studiogadget/skills32026年5月25日 更新

studiogadget のスキルをすべて見る

このスキルの問題を報告する