Reveal.js プレゼンテーション

revealjs-skill は Ryan Brown によるコミュニティ製の Claude Code スキル（MIT）で、自然言語の依頼から reveal.js の HTML プレゼンテーションを作ります。ビルド工程は不要で、生成された HTML をブラウザで開くだけ。PDF への書き出しもできます。リポジトリにはライブのサンプルがあり、2026-09-23 に確認した時点の最新コミットは 2026-05-02 付けでした。

主な機能

• 雛形スクリプト：create-presentation.js が HTML の骨組みを書くので、モデルが定型コードにトークンを使わずに済みます。--structure 1,1,d,3,1,d,1 で単独スライド、縦方向のスタック、セクション区切りを組み合わせられます。
• カスタム CSS テーマ：色、文字、コールアウト、レイアウトを CSS 変数で調整できるベーススタイルシート。まずデザイン方針を述べ、題材に合う配色を選び、文字サイズはすべて pt で指定するよう求めています。
• コンポーネント：多段レイアウト、コールアウトボックス、Chart.js のグラフ、Font Awesome のアイコン、コードハイライト、スピーカーノート、アニメーションとトランジション。
• 品質チェック：check-overflow.js が Playwright でスライドからはみ出す内容を検出し、DeckTape のスクリーンショットを全スライド確認することが必須とされています。?export パラメータでグラフのアニメーションを止め、PDF でもグラフが完全に描画されます。
• ブラウザでの編集：edit-html.js がローカルでデッキを配信し、文字をクリックしてその場で編集し、ファイルに保存できます。

使用シナリオ

• コピーできるコード例を残したい技術発表。
• Chart.js のデータを載せたピッチ資料や四半期レビュー。
• 素の HTML と CSS として Git で管理したいスライド。

料金と入手方法

無料、MIT ライセンスです。はみ出しチェックと PDF 書き出しには Node.js の依存関係（Playwright、Cheerio、DeckTape のフォーク）が必要です。reveal.js 本体は CDN から読み込みます。

はじめに

1. Claude Code で /plugin marketplace add ryanbbrown/revealjs-skill の後に /plugin install revealjs@revealjs-skill を実行します。
2. 依存関係をインストール：npm install --prefix ~/.claude/plugins/cache/revealjs。
3. 「再生可能エネルギーの動向について 10 枚のプレゼンを作って」と依頼し、npx decktape reveal "presentation.html?export" output.pdf で書き出します。

制約：reveal.js を CDN から読み込むため、オフラインで発表するには追加の準備が必要です。DeckTape は --slides フラグを加えた作者個人のフォークを使っているため、今後の更新はそのフォーク次第です。

よくある質問

プラグインの仕組みを使わずにインストールできますか？

できます。skills/revealjs を ~/.claude/skills/ かプロジェクトの .claude/skills/ にコピーし、npm install を実行します。

PowerPoint ファイルを作れますか？

作れません。出力は HTML と CSS で、PDF に書き出せます。リポジトリの examples には PPTX のサンプルもありますが、スキル自体が生成するのは HTML です。

代替案

• Scientific Slides Skill：研究発表向けに AI が画像としてスライドを生成します。
• consulting-pptx-skill：ビジネス向けのネイティブな PowerPoint 資料。
• Web Artifacts Builder Skill：スライド以上のインタラクティブ性が必要な場合の、React ベースのリッチな HTML 作品。

まとめ

Reveal.js Presentations は、実際の文字とコードを持つ、編集可能でバージョン管理しやすい HTML スライドが欲しい開発者や発表者に向いています。聞き手が .pptx を求めるなら PowerPoint 系のスキルを選びましょう。他のプレゼンツールは スキル一覧 へ。