Interactive Slides (Claude Skill) — インストール & ライブデモ

なぜ使うのか

主な機能

3 つのモード: スライドデッキ、スクロールストーリー、インタラクティブデッキ
自己完結型 HTML — 1 つのファイル、任意のブラウザー
GSAP アニメーション、Google フォント、Chart.js (CDN)
ナビゲーション: キーボード/クリック/タッチ/スワイプ/スクロールホイール
pptxgenjs を介したオプションの .pptx エクスポート

ライブデモ

実際の動作

interactive-slides-skill.replay ▶ 準備完了

0/0

インストール

作者のリポジトリ · Claude Skills の公式ドキュメント

ユースケース

実用的な使い方： Interactive Slides

概要資料を投資家資料に変える

👤 ピッチを構築する創設者と PM ⏱ ~30 min beginner

使うタイミング： コンテンツはあります。数分で実際のデッキの形が完成します。

フロー

スキルを発動する

/interactive-slides — モード: スライドデッキ。内容: <概要資料>。テーマ: ミニマルダーク。✓ コピーしました

→ Deck.html を生成します。ブラウザで開きます
セクションを反復する

MRR の折れ線グラフを含む「トラクション」セクションを追加します。✓ コピーしました

→ スライド内にレンダリングされた Chart.js 折れ線グラフ
.pptx をエクスポート

ピッチ.pptx としてエクスポートします。✓ コピーしました

→ 編集可能な .pptx が保存されました。 PowerPoint で完全に編集可能なテキスト

結果： 今日デモして、明日には .pptx として電子メールで送信できるデッキです。

注意点

エクスポートされた .pptx にはアニメーションがありません — HTML アニメーションは往復しません。 HTML はライブトーク用に、.pptx はハンドオフ用に保存してください

組み合わせ： mcp-echarts

スクロールストーリーの説明を作成する

👤 テクニカルライターとマーケター ⏱ ~60 min intermediate

使うタイミング： スクロールトリガーのビジュアルを備えたミディアムスタイルの長編作品が必要です。

フロー

モードを選択してください

モード: スクロールストーリー。内容：この記事。スクロールトリガーのグラフとビジュアルを追加します。✓ コピーしました

→ 出力は、GSAP で固定されたセクションを含むスクロールページです。
ペーシングを調整する

「問題」セクションのピンスクロールを遅くしてください。✓ コピーしました

→ スクラブタイムラインを調整しました

結果： 読者が実際に読み終える魅力的なスクロール作品。

注意点

エフェクトのオーバーロード — セクションごとに 1 つのアニメーション。休息は静かにすべきです

ワークショップ用のインタラクティブなデモデッキ

👤 教育者と DevRel がワークショップを実施 ⏱ ~90 min intermediate

使うタイミング： 小さなインタラクティブな演習をインラインで含むスライドが必要です。

フロー

モード: インタラクティブ

モード: インタラクティブデッキ。入力フィールドとライブ更新する Chart.js を埋め込みます。✓ コピーしました

→ インタラクティブ要素は有線で接続されています。入力時のチャートの更新
投票を追加

クリックをローカルに記録して集計する「1 つ選択」スライドを追加します。✓ コピーしました

→ クリックするとローカルのみのカウンターが更新されます

結果： バックエンドを持たないライブ感のあるデッキ。

組み合わせ

他のMCPと組み合わせて10倍の力を

interactive-slides-skill + mcp-echarts

ECharts 経由でチャートを作成し、デッキに埋め込む

mcp-echarts を使用して収益グラフを SVG としてレンダリングします。「トラクション」スライドに埋め込みます。✓ コピーしました

interactive-slides-skill + claude-code-design-skills

ブランドトークンをデッキテーマに適用する

デッキパレットとタイプにはbrand-acmeトークンを使用します。✓ コピーしました

interactive-slides-skill + magic-ui-mcp

インタラクティブデッキモード用の UI コンポーネントを厳選

インタラクティブモード: トラストロゴスライドに Magic UI マーキーを使用します。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
/interactive-slides (SKILL)	mode + content + theme	すでに持っているコンテンツからデッキやスクロールストーリーが必要なときはいつでも	0

コストと制限

運用コスト

APIクォータ: なし
呼び出しあたりのトークン: 中 - デッキのコンテンツは HTML の長さです
金額: 無料
ヒント: スライドごとの散文は 80 語以内に収めてください。そうしないとデッキが急速に膨張してしまいます。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： なし

データ送信先： GSAP、Google フォント、Chart.js は CDN からロードされます。完全にオフラインにする必要がある場合は、スキルにライブラリをインライン化するように依頼してください。

CDN の依存関係により、受信者はアニメーションを表示するためにネットワークが必要になります。エアギャップデモの場合は、インラインビルドをリクエストしてください。
インタラクティブデッキは状態を localStorage に保存します。デックが公開共有されるかどうかに注意してください。

トラブルシューティング

よくあるエラーと対処法

矢印キーでスライドが進まない

キーボードリスナーがバインドされていることを確認します。一部のブラウザは、HTML ファイルが file:// から提供されるとブロックします。ローカルサーバー: python3 -m http.server を試してください。

確認： Open dev console; inspect keyup handler

不足しているアニメーションを .pptx エクスポートする

アニメーションは HTML のみです。 .pptx はテキストとレイアウトをエクスポートします。ライブには HTML を使用します。電子メールのハンドオフ用の .pptx。

確認： Open the .pptx in PowerPoint; check layout only

オフラインではフォントが正しく見えない

オフラインで使用できるように、base64 データ URI を含む @font-face を埋め込むようにスキルに依頼します。

確認： Open airplane-mode; load the HTML

代替案

Interactive Slides 他との比較

代替案	代わりに使う場面	トレードオフ
mck-ppt-design-skill	HTML ではなく、コンサルティングスタイルの .pptx スライドが必要な場合	インタラクティブ性が低くなります。さらにスライドポリッシュ
mermaid-skill	必要なのは資料ではなく図表です	別のアーティファクト
markmap-mcp-server	マインドマップはデッキよりも適しています	異なる物語の形

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る