simple-deck

Simple Deck Skill

シードとレイアウトライブラリを使って、横方向にスワイプできる単一ファイルの HTML デッキを作成します。

リソースマップ

simple-deck/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: tokens + slide primitives + proven nav script (READ FIRST)
└── references/
    ├── layouts.md          ← 8 paste-ready slide layouts + theme-rhythm rules
    └── checklist.md        ← P0/P1/P2 self-review (rhythm spot-check at bottom)

ワークフロー

ステップ 0 — 事前確認

1. assets/template.html を、<style> ブロックと <script> ブロックの最後まで通読します。 スクリプトは iframe 固有の5つの問題（実際のスクローラーの検出、キャプチャフェーズのリスナーの二重設定、自動フォーカス、scrollIntoView を使わないこと、位置の保持）を解決しています。書き換えてはいけません。
2. references/layouts.md を読み、8種類のレイアウトを把握します。 特に「Theme rhythm」セクションに注意してください。デッキが単調に感じられるのを防ぐルールです。
3. 有効な DESIGN.md を読みます — そこにあるトークンを、シードの6つの :root 変数に対応付けます。

ステップ 1 — シードをコピー

assets/template.html をプロジェクトのルートに index.html としてコピーします。6つの :root 変数を有効なデザインシステムのトークンに置き換えます。ページの <title> を置き換えます。

ステップ 2 — スライドを作成する前に、スライド数とテーマのリズムを決める

デフォルトは6枚です。ただし、ブリーフで別途指定されている場合を除きます。

対象者／形式	スライド数
製品概要／ライトニングトーク（5～10分）	6
ピッチデッキ（15分）	8～10
投資家向けアップデート／長めのトーク（20～30分）	12～18

次に、HTML を書く前にリズムを書き出します。たとえば8枚の場合：

01  hero light center  Cover
02  light              Problem
03  hero dark center   Big stat
04  light              Three points
05  dark               Pipeline
06  hero light center  Quote
07  light              Before / after
08  hero dark center   Ask

バランスのよい構成には、次の条件があります：

• 同じテーマが3枚以上連続しない
• hero dark と hero light がそれぞれ1枚以上ある（8枚以上の場合）
• 3～4枚ごとに息抜きのスライドを挟む

スライドの HTML を書く前に、このリズムのスケッチをユーザーに見せてください。早い段階なら、ユーザーも手軽に方向性を変えられます。

ステップ 3 — 貼り付けて内容を埋める

予定した各スライドについて、layouts.md から対応する <section> を body にコピーします。角括弧内のテキストを、具体的な内容に置き換えます。埋め草や lorem は使いません。 スライドが空っぽに感じられる場合は、レイアウトが適切ではありません。別のレイアウトを選んでください。

各スライドに、記述した順序で data-screen-label="01 Cover"、"02 Problem" などの属性を付けます。（シードの最初の3枚にはすでに設定されています。このパターンを続けてください。）

ステップ 4 — 自己チェック

references/checklist.md に沿って確認します。最後にある「Theme rhythm spot-check」は必須です：

grep 'class="slide' index.html

結果のクラスリストを確認します。light × 4 in a row と表示されている場合は、1枚を dark に変更します。8枚以上のデッキに hero dark がない場合は、ビッグスタットまたはクロージングのスライドを1枚、hero dark に変更します。

ステップ 5 — プロジェクトファイルを作成

完成したデッキの HTML を index.html に書き込みます。

その後、index.html の名前を挙げ、デッキの内容を説明する短い通常のアシスタント要約を送ります。チャットに HTML ソース全体を出力したり、ソースコードの <artifact> ブロックを出力したりしてはいけません。

厳守事項

• すべてのスライドにテーマクラスを設定します（light | dark | hero light | hero dark）。class="slide" だけの指定は、デグレードです。
• 同じテーマを3枚以上連続させません。
• Display は var(--font-display) を使ったセリフ体にします。 .h-hero／.h-xl／.h-md ではすでに適用されています。
• アクセントカラーはスライドごとに1つにし、使用は最大2回までにします。
• ナビゲーションスクリプトを書き換えてはいけません。 検証済みです。
• scrollIntoView() は使いません。 iframe で動作しなくなります。
• すべてのスライドに data-screen-label を設定します。