mcpField
P
presentation

presentation

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

presentation について

presentationは、講演や発表の準備に使う、単体で動作するHTMLスライド作成スキルです。一括生成と対話式の段階的な生成に対応し、アニメーションやキーボード、クリック、スワイプ操作を利用できます。

主な機能

  1. 01単体で動作するHTMLスライドの作成
  2. 02一括生成と対話式の段階的な作成
  3. 03複数のスライドレイアウトとテーマ
  4. 04アニメーション要素と箇条書きの順次表示
  5. 05キーボード、クリック、スワイプ操作

活用シーン

  1. 01メモやアウトラインからスライドを作成
  2. 02スライドを一枚ずつ確認・調整
  3. 03共有用の自己完結型プレゼンテーションを出力

インストール

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

$npx skills add https://github.com/thedesignproject/agent-skills --skill presentation

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

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

framework-reference.md
learnings.md
README.md
slide-types.md

詳細

プレゼンテーションスキル

CSS アニメーション、キーボード／クリック／スワイプによるナビゲーション、箇条書きの段階的表示、マウスパララックス、洗練されたビジュアルデザインを備えた、単体で動作する HTML スライドデッキを作成します。単一ファイルで依存関係はなく、どこでも動作します。

ステップ 1：モードを選択する

どのように進めたいか、ユーザーに尋ねます。

  • 全体を生成：ユーザーがコンテンツやアウトラインをあらかじめ提供し、Claude がプレゼンテーション全体を一度に生成します。伝えたい内容がすでに決まっている場合に最適です。
  • 対話形式で段階的に作成：Claude がまずフレームワークの骨組みを作成し、その後、スライドを 1 枚ずつ作成します。ユーザーは次に進む前に各スライドを確認します。ストーリーを検討中の場合や、細かく制御したい場合に最適です。

ステップ 2：コンテンツと構成（最も重要なステップ）

コードを書く前に、プレゼンテーションで実際に伝える内容を深く理解します。

ユーザーに資料の提供を依頼します。資料には、次のいずれかを指定できます。

  • トピックに関する文書、アウトライン、メモ
  • 大まかなスライドごとのアウトライン
  • 重要な論点、統計データ、引用
  • リデザインする既存のプレゼンテーション
  • 盛り込みたい内容をすべて書き出したメモ

続いて、ユーザーと一緒にスライドのアウトラインを作成します。

  • 各スライドについて、種類、見出し、本文の内容、特別な要素を決めます
  • ナラティブの流れを提案します：引きつけ → 背景 → 主要な内容 → 詳細 → 締めくくり
  • 箇条書きの段階的表示が役立つスライド（段階的に見せる必要がある情報量の多いコンテンツ）を指摘します
  • 画像やアセットが必要なスライドと、テキストのみでよいスライドを特定します
  • 作業に進む前に、最終的なスライド枚数と順番を確認します

このステップが、プレゼンテーションの成否を左右します。 ここに最も時間をかけてください。

利用可能なスライドの種類
種類クラス用途
タイトル.slide-titleオープニング — 大きな見出し、副題、装飾的な図形
登壇者／プロフィール.slide-speaker発表者の紹介 — アバター、名前、役割、ガラス風カード
質問.slide-familiar聴衆の関心を引く — 中央に大きく配置した質問
箇条書きの段階的表示.slide-learn重要なポイント、アジェンダ — data-bullets による段階的な表示
ツール／バッジのグリッド.slide-setupツール、技術、ロゴ — バッジカードのグリッド
ワークフロー／フロー.slide-flowプロセス、手順 — 矢印でつないだボックス
2 カラム.slide-llmテキスト＋画像 — 左右に分割したレイアウト
チーム／グリッド.slide-speakersチーム紹介 — 名前や役割を添えた写真のグリッド
用語集.slide-gloss用語の定義 — 大きな用語と定義
クロージング／CTA.slide-closing最終スライド — 大きなテキスト、行動喚起

各種類の詳細な HTML テンプレートについては、slide-types.md を参照してください。

ステップ 3：デザインブリーフ

ユーザーからスタイルの方向性を確認します。

  • 色：ブランドカラー、または配色案（役割を指定した 5～6 個の 16 進数値：プライマリー、セカンダリー、アクセント、明るい背景、暗い背景、テキスト）
  • フォント：見出しと本文のフォントファミリー（Google Fonts またはシステムフォント）
  • 雰囲気：ミニマル／エディトリアル／グラスモーフィズム／大胆／コーポレート
  • アセット：埋め込むロゴ、画像、写真

次の内容を含むブリーフを作成します。

  • CSS 変数名と 16 進数値を指定したカラーパレット
  • タイポグラフィのスケール（heading-xl、heading-lg、heading-md、subtitle、body-text）
  • フォントファミリーとウェイト
  • 余白のリズム（スライドのパディング、要素間の間隔）
  • アニメーションのスタイル（控えめか、ダイナミックか）
  • ビジュアルの方向性を 1 文で説明したもの
  • スライドとテーマの対応関係（各スライドに適用する背景色）

CSS、タイポグラフィ、アニメーションのデフォルト設定とテンプレートについては、framework-reference.md を参照してください。

ステップ 4：フレームワークを生成する

<style> と <script> を埋め込んだ、単体で動作する HTML ファイルを 1 つ作成します。

ファイル構成は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Presentation Title]</title>
  [Google Fonts link]
  <style>
    /* Reset, design tokens, slide system, themes, shapes,
       animations, typography, UI chrome, slide-specific styles,
       responsive breakpoint */
  </style>
</head>
<body>
  <div class="presentation">
    
  </div>
  
  <script>
    /* IIFE-based navigation engine */
  </script>
</body>
</html>

CSS アーキテクチャ全体と JS ナビゲーションエンジンのテンプレートについては、framework-reference.md を参照してください。

ステップ 5：スライドを作成する

slide-types.md のテンプレートを使用します。

  • 一括生成モード： ステップ 2 のアウトラインに基づいて、すべてのスライドを一度に作成します
  • 対話モード： スライドを 1 枚ずつ作成します。HTML を記述してユーザーに確認してもらい、調整してから次のスライドに進みます

各スライドで、以下を行います。

  1. テーマクラス（.slide--primary、.slide--secondary、.slide--light）を指定した適切な section.slide を使用します
  2. ナビゲーション UI の色を切り替えるため、data-theme="dark" または data-theme="light" を設定します
  3. すべてのコンテンツ要素に .anim クラスを追加し、登場アニメーションを適用します
  4. 視覚的な読み順に沿って、段階表示の遅延クラス（.anim-d1 から .anim-d8）を適用します
  5. 登場方向を指定した装飾シェイプ（.shape-enter-left など）を追加します
  6. すべてのスライドに、一貫した内容の .slide-footer を含めます
  7. 箇条書きを順に表示するスライドでは、data-bullets="N" を設定し、<li data-bullet="N"> 要素を使用します

ステップ 6：仕上げとレビュー

納品前のチェックリスト：

  • すべてのコンテンツ要素に .anim クラスが設定されている
  • 段階表示の遅延が視覚的な読み順に沿っている
  • 装飾シェイプがコンテンツと重なっていない（z-index によるレイヤー分けを使用）
  • すべてのスライドテーマで色のコントラストが適切である
  • 箇条書きの表示数が data-bullets 属性の値と一致している
  • 768px のブレークポイントでレスポンシブレイアウトが機能する
  • ナビゲーションが機能する：キーボード（矢印キー、Space、PgUp/Dn、Home、End）、クリック（左側 30% ＝ 前へ、右側 70% ＝ 次へ）、タッチ／スワイプ（しきい値 >50px）
  • プログレスバーとスライドカウンターが正しく更新される
  • すべてのスライドでヘッダー／フッターの装飾が統一されている
  • すべてのフォントが正しく読み込まれる（Google Fonts またはフォールバック）

ステップ 7：エクスポート

デフォルト：スタンドアロン HTML — base64 で埋め込んだ画像とアセットを含む単一ファイルです。サーバーは不要で、どこでも動作します。

画像を base64 として埋め込むには：

<img src="data:image/png;base64,[base64-data]" alt="...">

必要に応じて、以下も提案できます。

  • 開発版： 編集しやすい外部画像参照を使用します
  • 個別スライド： モジュール単位で使用できるよう、スライドごとに別の HTML ファイルを作成します

主なパターン

このフレームワークでプレゼンテーションを作成する際のデザインパターン、アニメーションのヒント、実践で得られた知見については、learnings.md を参照してください。

クイックリファレンス
  • イージング： すべてのトランジションに cubic-bezier(0.16, 1, 0.3, 1)（expo-out）を使用します
  • 段階表示： .anim-d1（0.1s）から .anim-d8（1.1s）
  • シェイプ： 絶対位置指定、mix-blend-mode: overlay、浮遊するキーフレームアニメーション
  • グラス： backdrop-filter: blur(28px) ＋ 半透明の白 ＋ 控えめなボーダー
  • タイポグラフィ： プロジェクター／ノート PC／タブレットに応じてサイズを滑らかに調整する clamp()
  • パララックス： マウス移動時に追跡する --mx／--my CSS 変数
  • トランジション： isTransitioning フラグで 700ms のロックアウト

コメント

Markdown 対応