使い方ガイドへスキップ
md-slides作者 Alireza Rezvani

MD Slides スキル。

Claude Code と Codex のための PPT とスライドデッキスキル:Markdown デッキをブランド化されたスライドに変換します。

  • Presentations
  • HTML slides
alirezarezvani/claude-skills · markdown-html/skills/md-slides/SKILL.mdSKILL.md
--- name: md-slides description: Converts a markdown deck (slides separated by `---` HR boundaries or by `# ` H1 headings, with optional `<!-- notes: ... -->` presenter notes blocks) into a single-file HTML presentation with arrow-key / space / PgDn / PgUp / Home / End / P / Esc keyboard navigation, presenter mode (split view with current slide + speaker notes + clock + next-slide preview), URL-hash deep linking, and `@media print` page-per-slide … --- ## When to invoke ## Pipeline ## What ships in the HTML ## Hard rules ## Forcing-question library (Matt Pocock grill discipline) ## Distinct from
上流ファイルから 2026-09-14 に読み込まれた前付けとセクション見出し · 全 6,506 文字

01 できること

Claude Code と Codex における md-slides スキルの動作内容

概要、ワークフロー、出力。いずれもスキルの SKILL.md から読み取った内容です。

SKILL.md より2026年9月14日読取 · 実行記録ではありません

スキル自身の言葉で

md-slides は、markdown形式のデッキを、任意のブラウザで動作する単一ファイルのHTMLプレゼンテーションに変換します。デッキとは、--- のHR区切りまたは # のH1見出しでスライドを分割したもので、任意で <!-- notes: ... --> のプレゼンターノートブロックを含められます。標準ライブラリのみを使う3つのPythonスクリプト(slide_splitter.py、presenter_notes_parser.py、deck_html_renderer.py)によるパイプラインで処理されます。

出力には、キーボードナビゲーション、URLハッシュによるディープリンク、プログレスバーとスライド番号、時計と次スライドプレビューを備えたプレゼンターモード、そして1ページ1スライドのPDF書き出し用の印刷用スタイルシートが含まれます。md-documentのmarkdownパーサーを再利用し、config_loader.py経由でデザインシステムのトークンを読み込みます。スライドの境界が不明瞭な入力、1スライドのみのデッキ、100行未満のファイル、--strict-notes の50%カバレッジを満たさないデッキは処理を拒否します。

生成されるもの

  • 解決済みのデフォルト出力ディレクトリに deck-{slug}.html として書き出されるレンダリング済みHTMLデッキで、名前が重複した場合は -2、-3 のように番号が付加されます。
  • 分割されたスライドを保持する中間JSONファイルと、その後にノートを付加したスライドのJSONファイルです。
  • 印刷用スタイルシートを通じてブラウザから印刷することで生成される、1ページ1スライドのPDFです。
プロンプト例を見る ↗

仕組み

  1. 01
    デッキを順序付けられたスライドに分割する

    slide_splitter.py は元のmarkdownを読み込み、--- のHR行またはH1見出しで分割します。デフォルトでは境界のスタイルを自動検出し、順序付けられたスライドリストを書き出します。

  2. 02
    各スライドにプレゼンターノートを付加する

    presenter_notes_parser.py は各スライドのノートブロックを走査し、そのスライドに紐付けます。これにより、プレゼンターモードの右側パネルに表示する内容が用意されます。

  3. 03
    単一ファイルのHTMLデッキをレンダリングする

    deck_html_renderer.py はスライドとデザインシステムのトークンを組み合わせてデッキを出力します。コマンドラインでタイトルと出力先のパスを指定します。

  4. 04
    デザインシステムのトークンを適用する

    デザインシステムから12個のブランドCSSカスタムプロパティが提供され、design_style によってスライドレイアウトの密度が変わります。

  5. 05
    デッキではない入力を拒否する

    このスキルは、入力に明確なスライド境界がない場合、単一のスライドになってしまう場合、または --strict-notes によるノート網羅率ゲートを通過しない場合、変換ではなく終了します。

02 適合性を確認

md-slides スキルを使用するタイミング

Claude Code または Codex で、PPT とスライドデッキのこの種類のジョブの場合に md-slides スキルを使用してください。適合性と制限は、スキル自身のファイルから取得されています。

適している場合

  • オーケストレーターが入力を SLIDES と分類し、ここにルーティングしました。
  • 誰かがスラッシュコマンドで markdown ファイルに対して直接このスキルを呼び出します。
  • その markdown には既に 3 個以上の --- HR 行、または短い本文を伴う 5 個以上の H1 見出しがあります。
  • このデッキはライブで発表されるものであり、それはまさに発表者ノートが重要になる場面であり、自分のペースで読む場合はノートは任意になります。

境界を知る

  • その入力はデッキではなく長文の仕様書であり、md-document に渡すべきです。
  • その入力はコードレビューであり、md-review に属します。
  • これはグラフィックデザインツールではありません。Keynote や PowerPoint がその領域を担い、これはブラウザから投影される markdown 作成のデッキを扱います。

提供すべきもの

  • markdown デッキファイルそのパスは --input で slide_splitter.py に渡され、分割結果は --output で JSON ファイルに書き出されます。
  • 境界のスタイルスライドは --- HR 境界か H1 見出しのいずれかで区別できる必要があり、これによりスプリッターが切り分ける対象を持てます。
  • 任意の発表者ノートノートはスライド内の HTML コメントブロックとして提供され、パイプラインの 2 番目のステップでパースされ、各スライドに紐付けられます。

03 スキルの内部

md-slides スキルが Claude Code と Codex に与えるルール

SKILL.md がエージェントに設定する 8 つの具体的な指示・既定値・制限 — 結果を変える部分です。

  1. 境界の要件

    自動モードでは、ソースに少なくとも 3 個の HR 行、または少なくとも 5 個の H1 見出しが必要です。どちらもない場合、このスキルは拒否し、入力は代わりに md-document に渡されるべきです。

  2. 単一スライドの出力を禁止する

    1 枚のスライドにレンダリングされるデッキは、デッキではなくポスターとして終了コード 5 で拒否されます。

  3. 最低 100 行のソース

    すべてのコンバーターに適用される同じ Shihipar しきい値を用いて、100 行未満の入力は拒否されます。

  4. オンボーディングゲート

    このスキルは、すべてのコンバーターが用いる同じゲートにより、オンボーディングなしでは実行を拒否します。

  5. 厳密なノート網羅率

    --strict-notes を指定すると、このスキルはノートが付いているスライドが 50% 未満のデッキを拒否します。これは発表者モード用に整っていないためであり、この拒否は終了コード 7 で終了します。

  6. 長すぎるスライドに警告する

    ソース行数が40行を超えるスライドでは、信号対雑音比についてのソフトな警告が表示されます。デッキ自体は生成されますが、その行数が明示されます。

  7. 出力をシングルファイルのまま維持する

    すべてのCSSとJSはインライン化されており、唯一の外部リソースはGoogle Fontsのcssです。Prism.jsは既定でバンドルされるのではなく、--syntaxを通じてオプトインで有効化されます。

  8. フレームワークランタイムなし

    デッキはvanilla JSとキーボードイベントハンドラのみを使用し、React、Vue、Svelteのランタイムは一切関与しません。

04 実際に使う

Claude Code または Codex に md-slides をインストール

npx skills add コマンドを実行し、エージェントで最初のタスクを実行して、結果をチェックリストで確認します。

Claude Code、Codex または Your Agent に md-slides を追加

プロジェクトで実行してください。インストーラーが、どのエージェントに追加するかを尋ねます。

Terminal
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-slides

markdown-html/skills/md-slides/SKILL.md用の汎用skills CLI形式です。リポジトリによっては独自のパスが記載されている場合があります。

スキルに初めての PPT・スライドデッキタスクを与える

スキル自身の用語で記述されています。角括弧の部分はご自身の内容に置き換えてください。

Starter prompt
Convert [deck.md] into a presentation. It uses --- HR boundaries for slides and each slide has a <!-- notes: ... --> block. Title it "[Talk title]" and run it with --strict-notes, since it will be presented live rather than read on its own. Write the result to [output/deck.html].

出典:SKILL.md をスキル自身の用語に沿って記述。

最初の結果を確認

SKILL.md 自体が正しい結果として示しているもの:

  • ブラウザでデッキを開き、キーを一通り試してください:矢印キー、SpaceとPgDnで進む、PgUpで戻る、HomeとEndでジャンプ、Pでプレゼンターモードを切り替え、Escで終了します。
  • ディープリンクをテストしてください:#3はスライド3にジャンプするはずで、ブラウザの戻る・進むでスライドを移動できるはずで、共有されたdeck.html#5はスライド5で直接開くはずです。
  • 右下隅のスライドカウンター(「3 / 12」のように表示される)が、デッキの枚数と一致しているか確認してください。
  • reduced-motionのメディアクエリが尊重されているか確認してください。動きを減らすことを希望する視聴者に対してはアニメーションが解除されるはずです。

OpenDesignでSKILL.mdのリンクからmd-slidesをインポートします:Plugins → Add → Skill → Import from link、その後トップバーで選択してください。

05 オープンソースで追跡可能

ソース、ライセンス、検証

このページの情報の出所と、最終確認日時です。

Repository
github.com/alirezarezvani/claude-skills ブランチ main
スキルファイル
markdown-html/skills/md-slides/SKILL.md 検証時にコンテンツチェックサムを記録; コミット 19392f7
License
MIT LICENSE より。
リポジトリスター数
25,934 GitHub スナップショットは 2026-09-14 に alirezarezvani/claude-skills リポジトリ全体を対象に取得されました。このカタログには 5 つのスキルが含まれています。md-slides の評価や使用回数ではありません。
OpenDesign により検証済み
2026-09-14 ソースファイル、パス、ライセンステキスト、スター数を確認済み。OpenDesign 本体にはバンドルされていません(2026-08-28 確認)。このページには実行記録がありません。

SKILL.md の中身

  1. いつ呼び出すかルーティングの兆候、およびどの入力を拒否するべきか、または別の場所に送るべきかを示します。
  2. パイプライン分割、ノートの解析、デッキのレンダリングを行う3つのコマンドです。
  3. HTMLに含まれる内容ナビゲーション、ディープリンク、プレゼンターモード、印刷用スタイルシート、トークン、パーサーの再利用です。
  4. 厳格なルール拒否の基準、ソフトな警告、シングルファイル出力の制約です。
  5. 強制質問集(Matt Pocockのグリル規律)ソースファイルを変換する前に決めるべき5つの質問です。
  6. 区別される点md-document、md-review、ランディングページ、Keynoteとの違いです。
  7. 出力される成果物出力パスの解決方法と、衝突時のサフィックス規則です。
  8. 参考資料デッキの規約の背後にあるソースと典拠です。
スキル自身による説明
「Markdown デッキ(`---` 水平線境界または `# ` H1 見出しでスライドを分割し、オプションで `<!-- notes: ... -->` プレゼンターノートブロックを含む)を、矢印キー / space / PgDn / PgUp / Home / End / P / Esc によるキーボードナビゲーション、プレゼンターモード(現在のスライド + スピーカーノート + 時計 + 次スライドプレビューの分割ビュー)、URL ハッシュディープリンク、および PDF エクスポート用の `@media print` スライド単位ページングを備えた単一ファイル HTML プレゼンテーションに変換します。markdown-html-orchestrator が入力を SLIDES と分類したとき、または /cs:md-slides 経由で直接呼び出されたときに発動します。スライド本体のレンダリングには md-document の Markdown パーサーを再利用し、config_loader.py 経由で design-system トークンを読み取ります。入力に明確なスライド境界がない場合、1 スライドのデッキを生成する場合、または `--strict-notes` がオンでノートカバレッジが 50% 未満の場合は拒否します。オーケストレータールーティング後に使用します。」

SKILL.md からのフロントマターの説明。完全なファイルは約 6,506 文字です。GitHub で完全なファイルを読む。

06 インストールする前に

md-slidesスキルに関する質問

回答は 2026-09-14 時点で読んだ SKILL.md に基づくもので、記録された実行結果によるものではありません。

このスキルを実行できるコーディングエージェントはどれですか?

このファイルには、対応ツールとしてclaude-code、codex-cli、cursor、antigravity、opencode、gemini-cliが記載されており、markdown-html-orchestratorが入力をSLIDESと分類した場合にもトリガーされます。

Markdownに明確なスライドの区切りがない場合はどうなりますか?

このスキルは推測することなく拒否し、コード6で終了します。文書化されている次の手順は、そのファイルをmd-documentにルーティングすることです。md-documentは個別のスライドではなく、1つの連続した文書を処理します。

デッキからPDFを取り出すにはどうすればよいですか?

印刷用スタイルシートを使用します。ブラウザから印刷すると1スライドにつき1ページのPDFが生成されるため、書き出しに別途ツールは不要です。

MD Slides

実際の PPT およびスライドデッキのタスクで md-slides を実行してください。

OpenDesign をダウンロードし、SKILL.md リンクから md-slides をインポートし、上記のプロンプトを貼り付けて、結果の前に計画を確認します。

ターミナル
npx skills add https://github.com/alirezarezvani/claude-skills --skill md-slides

OpenDesign デスクトップ版

ひとつのデザインシステムで、すべての制作物をブランドらしく

完全な Vibe Design Workspace で、同じブランドルールを Web サイト、スライド、操作できるプロトタイプ、ダッシュボード、画像、HTML 動画に展開できます。ローカルの Codex、Claude Code、Cursor などを接続して無料で制作しましょう。

  • Web、スライド、プロトタイプ、ダッシュボード、画像、動画
  • 140+ のデザインシステムと完全なテンプレート/スキルライブラリ
  • ローカル Codex と 21+ のコーディングエージェントを接続 · 無料
無料ダウンロード

macOS と Windows に対応