Communityライティング&編集github.com

RinDig/lecture-deck

ストーリーボードから高品質なアニメーションHTML講義・ワークショップ用スライドを、任意のテーマで作成します。

lecture-deck とは?

このスキルは、講義、ワークショップ、またはプレゼンテーション用のスライドデッキを、ストーリーボードから完全なHTMLファイルとして生成するためのものです。各スライドは「1画面1主張」を原則とし、その主張を説明する図、キャプション、そして詳細なスピーカーノートで構成されます。生成されるHTMLファイルはキーボードナビゲーション、スピーカーノート、概要表示、印刷、クリップボードへのコピー機能、そして画面下部のモードストリップ(スライド、画面共有、ブレイクアウト、等)を備えた、自己完結型のファイルです。このスキルはPythonスクリプト群で構成され、テーマに基づいてスライドを構築し、PNGレンダリングで視覚的なチェックを行い、テキストのレジスター(文体や語彙の一貫性)を自動検証する一連のワークフローを含みます。3つのテーマが同梱されており、図、アニメーション、一貫したキャラクター(講師やシステムの図)を簡単に再利用できるキットが提供されるため、開発者やテクニカルトレーナーが一貫性のある高品質なプレゼンテーション教材を効率的に作成するのに役立ちます。PowerPointが必須のピッチデッキやデータダッシュボードの作成には適していません。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/RinDig/lecture-deck-skill/tree/main

Installed? Explore more ライティング&編集 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

レクチャーデッキ

1画面に1つの主張、1つの機構を示す図、1つのキャプション、それ以外はすべてノートに。デッキはPythonのスクリーンモジュールからテーマに従って構築され、チェック用にPNGにレンダリングし、送出前にレジスタチェックを実施します。

リクエストを受け取ったら

  1. 会場を尋ねるか推測する:誰が、何人、どこで、どのくらいの時間、参加者の既知事項、誰が話し誰が会場を進行するか。進行表(ホストのタイミング表)があれば、それを所与とします。
  2. まずreference/storyboard-template.mdを使用してstoryboard.mdを書きます。目標、番号付き主張としての議論、モード付き進行表、そして各スクリーンごとに画像とブリッジを1エントリとします。ヘッダーだけを引数として読み、次にブリッジだけを読んでください。ここで順序を修正します。
  3. 10画面を超えるものについては、ストーリーボードを構築前に批評します(流れ、聴衆のレベル、各図が主張を説明しているか、概要のカバレッジ)。変更点を反映します。
  4. スクリーンをスキャフォールドして構築します(reference/workflow.md、reference/kit-api.md)。長いデッキではスクリーンをモジュールに分割し、並行して構築します。
  5. すべてのスクリーンをレンダリングし、すべてのコンタクトシートを確認します。オーバーフロー、クリッピング、判読不能なテキスト、説明ではなく装飾になっている画像を修正します。
  6. --dumpでレジスタチェックを実行し、テキストをフラットに読みます。修正し、変更があったものを再レンダリングし、クリーンになるまで繰り返します。
  7. HTMLを納品し、プレースホルダー(日付、名前、準備ができていない可能性のあるプラットフォーム)を指定し、プレゼンテーション方法(矢印、N、O、B、F、印刷)を説明します。

良いデッキにするルール

  • ロードルール。 ヘッダーは主張です。1枚の画像。最大1つのキャプション。脚注は検証済みの引用のみ。練習用およびロジスティクススクリーンにのみキュー。深い内容はSAYとIF THE ROOM IS AHEADに、そのまま記述します。
  • 画像は機構を示す。 どのヘッダーの下にも置ける画像は装飾です。実際のものを描く:チャット、ファイル、フォルダ、曲がる人、満ちていくビン。スピーカーの話す順序に合わせて、anim、draw、grow、rise、slide_in、dropで構築します。複雑でも説明できれば問題ありません。
  • 一貫したキャスト。 すべての人、システム、リジッドボックスにfigure、machine、rigidを使用し、聴衆がデッキ全体で同じ図に出会うようにします。
  • 色ではなく役割。 HIGHLIGHTは主題でありnow;COOLはシステム;WARMは書かれたもの;SOFTは相手方;NEUTRALはギャップ;LIVEはモードドットのみ。どのテーマでも機能します。
  • モードストリップ。 すべてのスクリーンはmode(kind, label, who)で始まります:スライド、共有、ブレイクアウト、ソロ、ハンドオフ、休憩。聴衆は誰が画面を持っているかを常に知り、スピーカーはいつアプリを切り替えたり引き継ぐべきかを常に知ります。進行バーは同じ色を使用します。
  • レジスタ。 主張で開き、完全な文で、説明し、パフォーマンスしない。リビールラインなし、デッキあたり1つを超える「XではなくY」なし、ポイントを決める断片なし、強制的な三つ組なし、ダッシュなし、AIの決まり文句なし、聴衆向け画面にメソッド用語なし。検証済みの引用のみ。聴衆セグメントごとに1つの例、毎回同じ順序。詳細はreference/writing.md。
  • ノートは講義である。 スピーカーの声でのSAY、ホスト用の時間付きDO NOW、LOOK FOR、IF STUCK、IF THE ROOM IS AHEAD、そして次のヘッダーにつなぐBRIDGE。
  • 実サイズで確認する。 レンダラーの静的モードは、すべてのアニメーション要素を最終状態で表示します。ブラウザペインでは見えない欠陥が、1280×720で表示されます。

コマンド

python scripts/new_deck.py path/to/deck --title "Session one" --theme eduba --left "PROGRAMME" --right "SESSION 1"
python scripts/build_deck.py path/to/deck            # deck/out/<name>.html を書き出す
python scripts/build_deck.py path/to/deck --theme slate   # 別のテーマで2つ目のファイル
python scripts/render.py path/to/deck/out/<name>.html     # 各スクリーンのPNG + コンタクトシート、静的モード
python scripts/check_text.py path/to/deck/out/<name>.html --dump

要件:Python 3.9以上、レンダリング用のChromium(Playwrightのもの、Chrome、またはEdge;またはDECK_CHROMEを設定)、コンタクトシート用のPillow。フォントは起動時にGoogle Fontsから読み込みます;テーマにフォールバックスタックが含まれています。

ファイル

  • scripts/deckkit/kit.py ヘルパー、定数、キャスト、共通画像。scripts/deckkit/shell.py ページシェル。scripts/deckkit/themes/*.json テーマ。
  • reference/workflow.md ループ · reference/writing.md レジスタ · reference/kit-api.md すべてのヘルパー · reference/themes.md 役割とテーマの作成方法 · reference/storyboard-template.md。
  • examples/demo/ キットのほとんどを実演する9画面のデッキ;各テーマで構築してバリエーションを確認。

関連スキル