スキル自身の言葉で
WebGLヒーロー背景、プレゼンタービュー、オーディエンス画面との同期、スピーカーノート、チャプター区切り、大きな数字のデータページ、画像グリッドを備えた、水平スワイプ型のウェブページデッキを単一の自己完結型HTMLファイルとして生成します。互いに排他的な2つのビジュアル方向性、A（Electronic Magazine x E-ink：セリフ見出し、流動的な背景、暖色系）とB（Swiss International Style：全サンセリフ、12カラムグリッド、グリッドドット背景、IKB・レモンイエロー・レモングリーン・セーフティオレンジのいずれか1色の高コントラストアクセント）があります。
スタイルBの本文ページは、data-layoutでタグ付けされた22個の登録済みレイアウト（S01〜S22）のいずれかを使用する必要があります。トーク、ローンチ、デモデイ用のデッキを、スライドツールを使わずに一度の作業で完成させたいデザイナーおよび開発者向けです。
生成されるもの
- CSS、WebGLシェーダー、ページングJS、プレゼンターモードがすでに組み込まれた、水平ページ送り方式の単一自己完結型ドキュメントとして納品される1ファイルのHTMLデッキです。
- スライドのdata-slide-id値と同じ順序で生成されるSPEAKER_NOTESレコードで、目的、トーク内容、トランジション、および任意のステージング項目を保持します。
- デッキの隣にmarkdownファイルとして保存されたアウトラインで、後の反復作業の土台として使えます。
仕組み
- 01まずアップストリームの更新を確認する
このSkillはリポジトリを取得し、HEADがアップストリームからどれだけ遅れているかを数え、何かをプルする前にユーザーに確認します。
- 02執筆前に7つの質問について合意する
まずスタイルAかBかを決め、その後オーディエンスと場面設定、所要時間、ソース素材、画像やスクリーンショット、テーマパレット、そして厳しい制約について確認します。
- 03選択したテンプレートをコピーする
スタイルAの場合はassets/template.htmlを、スタイルBの場合はassets/template-swiss.htmlを、デッキの配置先にコピーし、隣接するimagesフォルダを作成します。
- 04クラス名の事前チェックを行う
スライドのマークアップを書く前にテンプレートのstyleブロックを読み、使用する各クラスがそこで定義されていることを確認してください。
- 05レイアウトを選ぶ前にテーマのリズムを計画する
レイアウトを選ぶ前に、各ページのテーマクラス（hero dark、hero light、light、dark）を書き出し、整合させてください。
- 06チェックリストに沿って自己確認する
生成後、references/checklist.mdを開いて項目を一つずつ確認し、そのうえでバリデーターとブラウザプレビューを実行してください。