mcpField
S
simple-deck

simple-deck

github.com/mphinanceドキュメント3284 回インストール3 日前に更新
リポジトリ

simple-deck について

指定テンプレートとレイアウト集を使い、横スワイプ式の単一HTMLスライドデッキを作るスキルです。スライド構成、テーマのリズム、出力前の確認を案内します。

主な機能

  1. 01テンプレートベースのHTMLデッキ
  2. 02再利用できる8種類のレイアウト
  3. 03枚数とテーマリズムの事前計画
  4. 04各スライドのテーマとラベル指定
  5. 05チェックリストによる確認

活用シーン

  1. 01製品概要デッキの作成
  2. 02時間枠のあるピッチ資料の作成
  3. 03投資家向けアップデート資料の準備

インストール

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

$npx skills add https://github.com/mphinance/alpha-skills --skill simple-deck

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

同梱ファイル

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

example.html
README.md
assets/
template.html
references/
checklist.md
layouts.md

詳細

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> ブロック AND <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 が 1 つ以上 AND hero light が 1 つ以上（8 スライド以上の場合）
  • 3～4 スライドごとに交互の呼吸

スライドの HTML を書く前にこのリズムスケッチをユーザーに見せてください — ユーザーは低コストで方向転換できます。

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

計画した各スライドについて、layouts.md から一致する <section> を本文にコピーします。角括弧内のテキストを実際の具体的なコピーに置き換えます。フィラー / 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 つ昇格させます。

ステップ 5 — 成果物を出力する
<artifact identifier="deck-slug" type="text/html" title="Deck Title">
<!doctype html>
<html>...</html>
</artifact>

成果物の前に 1 文。</artifact> の後で停止します。

ハードルール

  • すべてのスライドにテーマクラス（light | dark | hero light | hero dark）。裸の class="slide" = リグレッション。
  • 同じテーマが 3 つ以上連続しない。
  • Display = var(--font-display) による serif。 .h-hero / .h-xl / .h-md はすでに強制しています。
  • スライドごとにアクセントは 1 つ、使用は最大 2 回。
  • ナビゲーションスクリプトを書き換えないでください。 実証済みです。
  • scrollIntoView() は禁止。 iframe が壊れます。
  • すべてのスライドに data-screen-label。

コメント

Markdown 対応