replit-deck

Replit Deck Skill

8 種類の Replit-Slides テーマのいずれかを使用して、横方向にスワイプできる単一ファイルの HTML デッキを作成します。各テーマは完全なビジュアルシステムです。テーマ間でトークンを混在させないでください。

リソース一覧

replit-deck/
├── SKILL.md                ← you're reading this
├── assets/
│   └── template.html       ← seed: 8 themes via [data-theme=*], proven iframe-nav script (READ FIRST)
├── references/
│   ├── themes.md           ← 8 themes: when-to-pick / do / don't / primary layouts
│   ├── layouts.md          ← 10 paste-ready slide layouts, cross-theme
│   ├── components.md       ← shared primitives (eyebrow, kpi-row, image-grid, meta-bar)
│   └── checklist.md        ← P0/P1/P2 self-review + theme lock-in gate
└── examples/               ← four reference decks across the most contrasting themes
    ├── example-helix.html       (SaaS board update · light minimal)
    ├── example-holm.html        (legal fintech memo · cream editorial serif)
    ├── example-atlas.html       (quarterly history chapter · black + vermilion)
    └── example-bluehouse.html   (real estate ROI · navy + gradient cards)

ワークフロー

ステップ 0 — 事前確認（必読）

1. assets/template.html を最初から最後まで読みます。[data-theme] ブロックにはトークンが記載されています。末尾の <script> は 5 つの iframe ナビゲーションのバグを解決するためのものです。書き換えないでください。
2. references/themes.md を読み、ユーザーの要件に合うテーマを1 つ選びます。ユーザーがすでに od.inputs.theme でテーマを選んでいる場合は、それを使用します。
3. references/layouts.md を読み、ここから <section> ブロックをコピーします。
4. references/checklist.md を読みます。出力前に P0 を必ず通過させてください。

ステップ 1 — テーマを 1 つに決める

TodoWrite または計画セクションで、選んだテーマとその理由を明記します。選択後は、すべてのスライドでそのテーマのトークンだけを使用します。デッキの途中で切り替えてはいけません。<body data-theme="helix"> 属性を唯一の真実の情報源にします。

テーマ	選ぶ条件
helix	SaaS の取締役会向け報告、製品指標、ニュートラルでモダンな印象
holm	法務メモ、投資家向け事前資料、落ち着きのある／機関投資家向けの印象
vance	アートポートフォリオ、デザインカタログ、写真家／彫刻家
bevel	ファッションキャンペーン、ルックブック、Y2K／エディトリアルな雰囲気
world-dark	政策レポート、金融分析、上質なダークテーマ
world-mint	world-dark の明るいバリエーション — ESG、ウェルネス金融、サステナビリティ
atlas	長編ナラティブ、章立てのデッキ、博物館／アーカイブの美学
bluehouse	消費者向け製品、不動産、ライフスタイル、カラフルなカード

ステップ 2 — HTML を書く前にスライドのリズムを計画する

デフォルトは 6 枚です。HTML を書く前に、リズムを記述します。例（helix、6 枚）：

01  cover           hero + title + subtitle
02  kpi-row-6       6 metrics with ▲/▼ deltas
03  split-insight   left stat + right paragraph
04  chapter-plate   section divider
05  three-up        three parallel columns
06  closing         one bold number or CTA

これをユーザーに見せます。この段階での方向転換は容易です。

ステップ 3 — シードをコピーしてテーマを設定する

1. assets/template.html をプロジェクトのルートに index.html としてコピーします。
2. <body data-theme="<chosen>"> を設定します。
3. <title> を置き換えます。
4. body 内のプレースホルダースライドを削除します（シードにはデモスライドが 3 枚含まれています）。クローム（カウンター／進行状況／ヒント）は残します。

ステップ 4 — レイアウトを貼り付け、実際の文言を入力する

計画した各スライドについて、references/layouts.md から該当する <section> をコピーします。すべての [REPLACE] を具体的な文言に置き換えます。プレースホルダーを残したり、lorem を使用したりしてはいけません。スライドが空っぽに感じられる場合は、別のレイアウトを選びます。

各スライドに、プレゼンテーション順で data-screen-label="01 Cover"、"02 Metrics" などのタグを付けます。

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

出力前に references/checklist.md を使って、P0 のテーマ固定ゲートと 5 つの観点による 1～5 の評価（思想／階層／実行／具体性／節度）を内部で行います。いずれかの観点が 3 以下なら、出力前にやり直します。

P0 のテーマ固定 grep は必須です。

grep -E 'data-theme|style="--' index.html | head

個別のスライドに style="--accent:..." やテーマの上書きが見つかった場合は、元に戻します。デッキに使用するテーマは 1 つだけです。

ステップ 6 — 成果物を出力する

<artifact identifier="deck-<slug>" type="text/html" title="<Deck title>">
<!doctype html>
<html>...</html>
</artifact>

成果物の前に 1 文だけ添えます。</artifact> の後は何も出力しません。

厳守事項

• デッキごとにテーマは 1 つだけです。 data-theme は <body> に設定し、スライドごとに上書きしてはいけません。
• 数値は実数値のみとし、実数値がなければ記載しません。 指標を捏造してはいけません。正直なプレースホルダーとして — またはグレーのブロックを使用します。
• 表示用フォントはテーマに従います。 helix／world-dark／world-mint／bluehouse ではサンセリフの Display、holm／vance／atlas ではセリフの Display、bevel では Y2K の Display を使用します。入れ替えてはいけません。（正式な情報源は assets/template.html にある各テーマの --font-display トークンです。この一覧とテンプレートが食い違う場合は、テンプレートを優先します。）
• アクセントはスライドごとに最大 1～2 回までです。 グラデーションを多用してはいけません。
• ナビゲーションスクリプトを書き換えてはいけません。 解決される 5 つの iframe のバグは、見ただけではわかりません。
• HTML ファイルは 1 つにまとめます。 CSS はすべてインラインにします。外部フォントは使用しません。各テーマのシステムフォントスタックは意図的に選ばれています。
• すべてのスライドに data-screen-label を設定します。
• Replit のロゴ／ブランドロックアップは使用しません。 これらはテンプレートのスタイルであり、Replit ブランドのデッキではありません。

replit-deck と類似スキルの使い分け

スキル	選ぶ場合
simple-deck	プロジェクトの DESIGN.md のトークンに準拠した、シンプルな単一テーマのデッキを作成する場合。ホストのブランドを主張するのではなく、合わせる必要がある場合に適しています。（designSystemRequired: true。）
magazine-web-ppt	エディトリアルな「マガジン × 電子ペーパー」の美学（WebGL の流体背景、セリフ体のタイトル、章のプレート）を採用する場合。依頼内容が基調講演／ローンチ／共有スタイルのデッキを求め、Monocle／WIRED／Kinfolk／Domus を指定している場合に適しています。
replit-deck	依頼内容で Replit-Slides のギャラリーの美学が明示されている場合、またはトークンが固定された 8 種類のビジュアルアイデンティティ（SaaS ボード、エディトリアルメモ、ギャラリーカタログ、Y2K キャンペーン、ポリシーレポート、ミュージアムの章、コンシューマーカード）のいずれかが必要な場合に適しています。DESIGN.md への依存はありません。

追加の指示なしに「デッキを作って」とだけ言われた場合は、simple-deck をデフォルトにしてください。デザインシステムが尊重されます。replit-deck は、依頼内容で美学が明示されている場合や、テーマが指定されている場合にのみ選んでください。

---

対象範囲と出典

• 8 つのテーマは、スナップショット取得時点の replit.com/slides ランディングページのギャラリー全体です。 厳選された一部ではなく、現在 replit.com/slides で公開されているすべてのテーマカード（helix、holm、vance、bevel、world-dark、world-mint、atlas、bluehouse）がここに含まれています。Replit が 9 つ目のテンプレートを公開しても、このスキルには自動的に反映されません。
• スナップショットの日付：2026-04-29。 すべての 16 進数値は、その日に実際の replit.com/slides の PNG から ImageMagick でサンプリングしたもので、推測した色や記憶に基づく置き換えはありません。正確なサンプリング手順については、references/themes.md の Contributing a new theme を参照してください。
• メンテナンス：一度限りのスナップショットであり、追跡はしません。 Replit Slides は稼働中の製品であり、変更される可能性があります。このスキルは自動同期されません。Replit の色が更新されたり、テーマが追加されたりしたことに気づき、ここに反映したい場合は、nexu-io/open-design に replit-deck: re-sync to replit.com/slides (YYYY-MM-DD) というタイトルで issue を作成し、更新後のスクリーンショットを添付してください。上流を監視する担当者は決まっていません。
• Replit のブランディングはありません。 これらはギャラリースタイルのテンプレートであり、Replit ブランドのデッキではありません。チェックリスト（P0）では、Replit のロゴやワードマークを挿入することを禁止しています。

---

ブラウザー／ランタイムのサポート

• 対象：最新のデスクトップブラウザー（Chrome 110 以降／Safari 16 以降／Firefox 115 以降）と、最新のモバイル版 Safari／Chrome。
• 使用する機能：CSS scroll-snap（横方向）、color-mix()、CSS カスタムプロパティ、text-wrap: balance。いずれも Baseline の対応率は 93% 以上です。
• 非対応：IE 11、Safari 15 未満、color-mix() に対応していないブラウザー（古い Safari をサポートするには --accent-soft のフォールバックが必要ですが、このスキルの対象範囲外です）。
• モバイル：横方向の scroll-snap は iOS Safari 16 以降と Android Chrome で動作します。キーボード操作は仕様上、デスクトップのみです。
• ナビゲーションスクリプトの動作：skills/simple-deck のスクリプトをそのまま再利用しています。iframe への埋め込み（デーモンのプレビュー画面）、二重リスナーの競合、フォーカスの喪失、再読み込み後の位置の保持に対応しています。書き換えないでください。

---

検証

このスキルはファイルシステムのスキャン時にデーモンへ自動登録されます（手動での接続設定は不要です）。このスキルを追加した後、localhost:7456 で稼働中のデーモンに対して次のとおり確認済みです。

$ curl -s localhost:7456/api/skills \
    | node -e "const d=JSON.parse(require('fs').readFileSync(0,'utf-8')); \
               console.log(JSON.stringify(d.skills.find(s=>s.id==='replit-deck'), null, 2));"
{
  "id": "replit-deck",
  "name": "replit-deck",
  "description": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's\nlanding-page template gallery. Eight distinct themes …",
  "triggers": [
    "replit deck",
    "replit slides",
    "replit 风格 ppt",
    "replit style deck",
    "helix deck",
    "holm memo",
    "atlas chapter",
    "bluehouse",
    "bevel campaign"
  ],
  "mode": "deck",
  "platform": null,
  "scenario": "product",
  "previewType": "html",
  "designSystemRequired": false,
  "defaultFor": [],
  "upstream": null,
  "featured": null,
  "fidelity": null,
  "speakerNotes": null,
  "animations": null,
  "examplePrompt": "Single-file horizontal-swipe HTML deck in the style of Replit Slides's landing-page template gallery.",
  "hasBody": true
}

4 つすべてのサンプルデッキ（examples/example-{helix,holm,atlas,bluehouse}.html）がブラウザーで直接開きます。キーボード操作（←／→／Space／Home／End）と横方向の scroll-snap は、Chrome 129 と Safari 18 で動作します。