/ ディレクトリ / プレイグラウンド / Interactive Slides
● コミュニティ sylvial928 ⚡ 即起動

Interactive Slides

作者 sylvial928 · sylvial928/interactive-slides

コンテンツを美しい自己完結型のアニメーション HTML プレゼンテーション (スライド デッキ、スクロール ストーリー、またはインタラクティブ デッキ) に変換し、オプションで .pptx をエクスポートします。

interactive-slides は、任意のブラウザで開くことができる単一の HTML ファイルを生成するクロード コード スキルです。 3 つのプレゼンテーション モード (クラシックなスライド デッキ、長編スクロール ストーリー、探索的なインタラクティブ デッキ)。 GSAP + Google Fonts + Chart.js は CDN で読み込まれます。 キーボード/クリック/タッチ/スワイプ/スクロール ナビゲーションはすべてすぐに機能します。 オプションの pptxgenjs エクスポートでは、編集可能な .pptx が生成されるため、PowerPoint を使用している関係者に引き渡すことができます。

なぜ使うのか

主な機能

ライブデモ

実際の動作

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

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "interactive-slides-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "interactive-slides-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/sylvial928/interactive-slides",
        "~/.claude/skills/interactive-slides"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json
{
  "context_servers": {
    "interactive-slides-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/sylvial928/interactive-slides",
          "~/.claude/skills/interactive-slides"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add interactive-slides-skill -- git clone https://github.com/sylvial928/interactive-slides ~/.claude/skills/interactive-slides

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方: Interactive Slides

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

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

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

前提条件
  • ノード + pptxgenjs (オプション、.pptx エクスポートのみ) — npm i -g pptxgenjs
  • スキルがインストールされています — ~/.claude/skills/interactive-slides に git clone します
フロー
  1. スキルを発動する
    /interactive-slides — モード: スライドデッキ。 内容: <概要資料>。 テーマ: ミニマルダーク。✓ コピーしました
    → Deck.html を生成します。 ブラウザで開きます
  2. セクションを反復する
    MRR の折れ線グラフを含む「トラクション」セクションを追加します。✓ コピーしました
    → スライド内にレンダリングされた Chart.js 折れ線グラフ
  3. .pptx をエクスポート
    ピッチ.pptx としてエクスポートします。✓ コピーしました
    → 編集可能な .pptx が保存されました。 PowerPoint で完全に編集可能なテキスト

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

注意点
  • エクスポートされた .pptx にはアニメーションがありません — HTML アニメーションは往復しません。 HTML はライブトーク用に、.pptx はハンドオフ用に保存してください
組み合わせ: mcp-echarts

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

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

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

フロー
  1. モードを選択してください
    モード: スクロールストーリー。 内容:この記事。 スクロールトリガーのグラフとビジュアルを追加します。✓ コピーしました
    → 出力は、GSAP で固定されたセクションを含むスクロール ページです。
  2. ペーシングを調整する
    「問題」セクションのピンスクロールを遅くしてください。✓ コピーしました
    → スクラブタイムラインを調整しました

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

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

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

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

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

フロー
  1. モード: インタラクティブ
    モード: インタラクティブデッキ。 入力フィールドとライブ更新する Chart.js を埋め込みます。✓ コピーしました
    → インタラクティブ要素は有線で接続されています。 入力時のチャートの更新
  2. 投票を追加
    クリックをローカルに記録して集計する「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 からロードされます。 完全にオフラインにする必要がある場合は、スキルにライブラリをインライン化するように依頼してください。

トラブルシューティング

よくあるエラーと対処法

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

キーボード リスナーがバインドされていることを確認します。 一部のブラウザは、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-skillHTML ではなく、コンサルティング スタイルの .pptx スライドが必要な場合インタラクティブ性が低くなります。 さらにスライドポリッシュ
mermaid-skill必要なのは資料ではなく図表です別のアーティファクト
markmap-mcp-serverマインドマップはデッキよりも適しています異なる物語の形

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

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