mcpField
M
make-revealjs-presentation

make-revealjs-presentation

github.com/pamelafoxドキュメント128155 回インストール8 週間前に更新
リポジトリ

make-revealjs-presentation について

同梱テンプレートを基にRevealJSのスライドを作成するスキルです。講演やプレゼンテーションの準備向けに、テンプレートの編集、アクセシビリティへの配慮、HTMLの検証を案内します。

主な機能

  1. 01同梱HTMLテンプレートから開始
  2. 02テンプレートのプレースホルダー置換
  3. 03フォントとスタイルの調整
  4. 04アクセシビリティの基本維持
  5. 05HTMLの検証とプレビュー

活用シーン

  1. 01新しい講演スライドの作成
  2. 02テーマに合わせたスライド編集
  3. 03スライドのアクセシビリティ確認

インストール

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

$npx skills add https://github.com/pamelafox/presentation-skills --skill make-revealjs-presentation

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

同梱ファイルassets/index.html

詳細

RevealJS プレゼンテーションを作成する

ユーザーが RevealJS ベースのスライドデッキを希望する場合や、リポジトリの標準テンプレートから新しいトークを作成したい場合に、このスキルを使用します。

デフォルトの進め方

RevealJS のシェルを一から作り直すのではなく、同梱のテンプレートアセットを使用します。

  • テンプレートアセット：./assets/index.html
  • そのファイルを指定された出力先にコピーしてから、コピーしたファイルを編集します。
  • ユーザーから変更の明示的な依頼がない限り、RevealJS の CDN 読み込みと Reveal.initialize(...) ブロックはそのまま維持します。

まずカスタマイズする項目

テンプレートをコピーした後、デッキを拡張する前に、次のプレースホルダーを置き換えます。

  • Talk Title
  • Conference Name · Month Year
  • Your Name
  • Role · Company · website.example
  • filename.html や example.com/... などのリンク例

その後、例のスライドを書き換えるか削除して、デッキをユーザーのトピックに合わせます。

テンプレートの規約

  • テンプレートは意図的にシンプルにし、標準の RevealJS に近い構成にしています。
  • セクション区切りスライドには class="heading-only" を使用します。
  • コードスライドは、<pre><code> ブロックを含む通常のセクションです。
  • コードバッジやコピーボタンのプラグインを使用していて、特定のスライドで無効にする場合は、そのセクションに class="no-code-badge" を追加します。

カスタマイズのヒント

本文フォント

テンプレート上部付近の .reveal ルールで本文フォントを変更します。

.reveal {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

例：

  • 最小限／システムのデフォルト：既存のスタックを維持します
  • サンセリフのウェブフォント：font-family: 'Work Sans', sans-serif;
  • セリフ体のデッキ：font-family: 'Source Serif 4', serif;

ウェブフォントを使用する場合は、<head> に対応する <link rel="stylesheet"> も追加します。

見出しフォント

次の箇所で見出しのフォントを個別に変更します。

.reveal h1,
.reveal h2,
.reveal h3 {
  font-family: inherit;
}

例：

  • 本文と合わせる：inherit を維持します
  • 見出しに変化をつける：font-family: 'Roboto', sans-serif;
  • エディトリアルなスタイル：font-family: 'Fraunces', serif;
テキストサイズ

ここで本文のデフォルトサイズを調整します。

.reveal p,
.reveal li,
.reveal td,
.reveal th {
  font-size: 1em;
}

ユーザーがデッキ全体の文字を大きく、または小さくしたい場合は、この font-size を増減します。

コードブロックのスタイル

コードブロックの全体的なスタイルは、次の箇所で設定します。

.reveal pre { ... }
.reveal pre code { ... }

コードを大きくする、余白を変える、枠線を薄くまたは太くする場合は、これらのルールを調整します。

区切りスライド

区切りスライドの見た目は、section.heading-only と下線のルールで制御します。

.reveal section.heading-only h1::after,
.reveal section.heading-only h2::after,
.reveal section.heading-only h3::after { ... }

ユーザーが区切りスライドをよりプレーンな RevealJS の見出しに近づけたい場合は、そのブロックを削除します。

色のコントラスト

ユーザーが色をカスタマイズする場合は、テキストと背景の組み合わせがアクセシブルなコントラストを保つようにします。

  • 明るい背景には暗いテキスト、暗い背景には明るいテキストを優先します。
  • 本文、スライド番号、リンク、コードブロックには特に注意します。
  • テーマの色、背景の塗り、見出しのスタイルを変更した後は、コントラストを再確認します。

アクセシビリティ

デッキを作成またはカスタマイズする際は、アクセシビリティの基本を維持します。

  • 特にテーマを変更した後も、テキストと背景のコントラストがアクセシブルであることを確認します。
  • リンクに判別可能なテキストがあることを確認します。
  • 意味を伝える画像には代替テキストがあることを確認します。
  • 問題を確認する際は、プラグインが生成する UI とスライドコンテンツを分けて扱います。RevealMenu には現在、既知のアクセシビリティ上の問題があります。生成されるメニューのトリガーに、判別可能なアクセシブル名がない場合があります。ユーザーがこのプラグインを使い続ける場合、スライドコンテンツ自体に問題がなくても、axe の違反として残る可能性があることを伝えます。
axe-core による監査の例

ユーザーが VS Code でアクセシビリティレビューを依頼した場合は、統合ブラウザーでデッキを開き、レンダリングされたページに対して axe-core を実行します。

Playwright のスニペット例：

await page.addScriptTag({
  url: 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js'
});

const results = await page.evaluate(async () => {
  return await window.axe.run(document, {
    runOnly: {
      type: 'tag',
      values: ['wcag2a', 'wcag2aa']
    }
  });
});

結果を報告する際は、次の点に従います。

  • 実際の violations と incomplete のチェックを分けます。
  • 実際の問題ごとに、該当する HTML またはセレクターを正確に示します。
  • デッキ作成者に起因する問題と、プラグインが生成した問題を区別します。
  • Reveal のオーバーレイや変換によって axe の判定が混乱し、コントラストチェックが確定できない場合は、確認済みの失敗として報告せず、そのことを明確に伝えます。

編集ガイドライン

  • カスタムのレイアウトシステムより、プレーンなセクション、見出し、リスト、表、画像、コードブロックを優先してください。
  • ユーザーからより強い視覚的なスタイルを求められない限り、装飾的な CSS を追加しないでください。
  • ユーザーがテーマ付きのプレゼンテーションを希望しない限り、デッキはデフォルトで白地に黒文字にしてください。

検証

デッキの作成または編集後：

  1. HTML ファイルの診断を検証します。
  2. 統合ブラウザーで開きます。
  3. ユーザーからアクセシビリティのレビューを求められた場合は、レンダリングされたページで axe 監査を実行し、実際の違反と判定不能なチェックを分けて報告します。

コメント

Markdown 対応