create-theme

スライドテーマを作成する

このスキルは、再利用可能なビジュアルアイデンティティをまとめた、対になる2つのファイルで構成されるテーマバンドルを themes/ に作成します。

1. themes/<id>.md — エージェント向けドキュメントです。配色、タイポグラフィ、レイアウト、固定のタイトル／フッター／アイブロウコンポーネント、モーションについて記載します。作者がテーマを選ぶ際に create-slide が読み込むファイルです。
2. themes/<id>.demo.tsx — 実行可能なミニスライドです（通常のスライドモジュール：export default Page[]）。2〜3ページでテーマを紹介します。開発用UIのテーマパネルがこのファイルを読み込み、テーマのライブプレビューとして表示します。

両ファイルの拡張子より前の名前を同じにすることで、実行時に自動で対応付けられます。

テーマは、スライドの design 定数とは別のものです。テーマのMarkdownは、作成時に使うデザインの方向性です（create-slide が実際のスライドのソースにコピーします）。デモの .tsx は自己完結したプレビューであり、実際のスライドではないため、スライド一覧には表示されません。スライドごとの const design: DesignSystem = { … }（slides/<id>/index.tsx の冒頭で宣言）は、ユーザーがデザインパネルから調整できる実行時のトークンオブジェクトです。Markdownがデザインの方向性を定め、スライドごとの design 定数によってスライドが調整可能になり、デモの .tsx によってテーマがプレビュー可能になります。

作成するのは themes/<id>.md と themes/<id>.demo.tsx のみです。実際のスライドやその他の設定は変更しないでください。テーマで上書きできるキャンバス／タイプスケールのデフォルト設定は、slide-authoring スキルにあります。テーマを作成する前にこれを読み、上書きする内容を明示してください。

Step 1 — 入力元を特定する

テーマは、次の3種類の入力を任意に組み合わせて作成できます。

• 画像資料 — スライドのスクリーンショット、ムードボード画像、ブランド素材のパスやURL。
• 自由形式の説明 — 希望する配色、フォント、雰囲気についての文章。
• 既存のスライド — ビジュアルアイデンティティを取り出して再利用可能なテーマにする slides/<id>/index.tsx。

ユーザーの最初のメッセージですでに入力が明確に指定されている場合は、質問せずに先へ進みます。それ以外の場合は、AskUserQuestion（複数選択）を呼び出して1つ以上の入力元を選んでもらい、必要に応じてパス、スライドID、説明文について追加で質問します。

Step 2 — 元の入力を集める

• 画像：各パスを Read ツールで読み込みます（画像にも対応しています）。主な色を16進数で記録し、フォントのウェイト／スタイル、レイアウトのリズム、装飾モチーフ、繰り返し使われる装飾要素（ヘッダーバー、フッターライン、ページ番号など）を確認します。
• テキスト：明示されたトークン（16進コード、フォント名、モーションを表す動詞）と、暗示されたトーンの言葉（「エディトリアル」「遊び心のある」「ブルータリスト」など）を抽出します。曖昧な表現は、具体的な決定事項に落とし込んでから記述します。
• 既存のスライド：slides/<id>/index.tsx を読み込み、次の要素を取り出します。
  • design.palette オブジェクト（またはファイル先頭にある従来形式の palette 定数）→ 配色セクション。
  • design.fonts／フォント定数、および font-size のパターン → タイポグラフィセクション。
  • 余白／配置のパターン → レイアウトセクション。
  • 繰り返し使われるコンポーネント（TrafficLights、Eyebrow、Footer形式のヘルパー、WindowShell など）→ 固定コンポーネントセクション。
  • @keyframes ブロックと共通の styles 文字列 → モーションセクション。
  • デザインから読み取れる美的な雰囲気 → 美的方向性の段落。

入力同士が食い違う場合（例：画像では青が使われているのに、説明文では緑と指定されている場合）は、どちらを優先するかユーザーに尋ねます。

Step 3 — テーマIDを決める

短く説明的な kebab-case を使います。例：editorial-noir、brutalist-mono、pastel-soft、dev-terminal。テーマIDの重複を避けるため、themes/ を確認します。

Step 4 — themes/<id>.md を作成する

以下の正確なセクション順でファイルを作成します。セクションの本文はテーマに合わせて調整しますが、見出しはすべてのテーマで統一します。

---
name: <Human title, e.g. "Editorial Noir">
description: <one-line elevator pitch>
mode: <dark | light — whichever matches the palette's bg>
---

# <Theme name>

## Palette

| Role   | Value     | Notes                          |
| ------ | --------- | ------------------------------ |
| bg     | `#0f172a` | page background                |
| text   | `#f8fafc` | primary copy                   |
| accent | `#fbbf24` | callouts, eyebrow, key numbers |
| muted  | `#94a3b8` | secondary copy, dividers       |
| ...    | ...       | extend as the theme requires   |

## Typography

- Display font: `<stack>` — weight 800–900 for headlines.
- Body font: `<stack>` — weight 400–500.
- Webfont import (omit for system stacks): `<stylesheet URL>` — see `references/webfonts.md` in `slide-authoring` for loading rules.
- Type-scale overrides (only list what differs from `slide-authoring` defaults):
  - Hero title: 180 px (default 140–200 ✓)
  - Body text: 36 px

## Layout

- Content padding: 120 px from canvas edges (1920 × 1080).
- Alignment: left-aligned, single column.
- Grid notes: optional 12-column overlay at 80 px gutter for content pages.

## Fixed components

These are paste-ready. Copy them verbatim into a slide that uses this theme.

### Title

```tsx
const Title = ({ children }: { children: React.ReactNode }) => (
  <h1
    style={{
      fontSize: 140,
      fontWeight: 900,
      lineHeight: 1.05,
      letterSpacing: '-0.02em',
      margin: 0,
      color: '#f8fafc',
    }}
  >
    {children}
  </h1>
);
```

### Footer

Pull the page number from `useSlidePageNumber()` — never hardcode `pageNum` / `total` props.

```tsx
import { useSlidePageNumber } from '@open-slide/core';

const Footer = () => {
  const { current, total } = useSlidePageNumber();
  return (
    <div
      style={{
        position: 'absolute',
        left: 120,
        right: 120,
        bottom: 60,
        display: 'flex',
        justifyContent: 'space-between',
        fontSize: 24,
        color: '#94a3b8',
      }}
    >
      <span>EDITORIAL NOIR · 2026</span>
      <span>{current} / {total}</span>
    </div>
  );
};
```

### Eyebrow / accents (optional)

```tsx
const Eyebrow = ({ children }: { children: React.ReactNode }) => (
  <div style={{ fontSize: 26, letterSpacing: '0.2em', color: '#fbbf24' }}>
    {children}
  </div>
);
```

## Motion

- Philosophy: static / subtle / rich — pick one and explain in one sentence.
- Reusable keyframes (paste-ready, only if the philosophy is subtle or rich):

```css
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
```

## Aesthetic

One paragraph. What it feels like, the references it draws on, what to avoid (e.g. "no rounded corners; no gradients; no decorative emoji"). Commit to a single direction — minimal, maximalist, editorial, retro, brutalist, soft/pastel, neon, paper/print.

## Example usage

```tsx
const Cover: Page = () => (
  <div style={{ width: '100%', height: '100%', background: '#0f172a', color: '#f8fafc', padding: 120, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
    <Eyebrow>CHAPTER 01</Eyebrow>
    <Title>The Big Idea</Title>
    <p style={{ fontSize: 36, color: '#94a3b8', maxWidth: 1200, marginTop: 32 }}>
      A short subtitle that explains what this slide is about.
    </p>
    <Footer />
  </div>
);
```

Step 4b — themes/<id>.demo.tsx を作成する

デモは通常のスライドモジュールです。slides/<id>/index.tsx と同じ形式ですが、ランタイムがプレビュー専用だと認識できるように themes/ の下に配置します。開発 UI の Themes パネルがこれをインポートし、SlideCanvas（1920×1080）の中に描画します。

契約：

• import { type Page, useSlidePageNumber } from '@open-slide/core';
• テーマの Markdown で定義した Title、Footer、Eyebrow コンポーネントをそのままインラインで記述します。省略や抽象化をせず、別の場所からインポートもしないでください。ユーザーがパネルで見る内容と、create-slide が実際のスライドに貼り付ける内容が一致するよう、デモと Markdown は常に同期させてください。
• Page コンポーネントを 2～3 個エクスポートし、デフォルトの配列もエクスポートします。構成の目安は、カバー（Eyebrow + Title + サブタイトル）、本文の書体とアクセントを試すコンテンツページ 1 枚、そしてクロージングまたは「End」カードです。Markdown の末尾にある「使用例」ブロックを出発点として、内容を広げてください。
• デザインパネルで後から表示する価値のある、ランタイムで調整可能なトークンがテーマにある場合は、export const design: DesignSystem = {...} も追加してください（ベースのインポートと並べて import type { DesignSystem } from '@open-slide/core'; を追加します）。
• アセットファイルをインポートしないでください。@/ からインポートしないでください。スライド専用のヘルパー（実際のスライドにある WindowShell など）も使わないでください。インラインの <style> 内のウェブフォント用スタイルシート @imports は使用できます。デモは Themes パネル内でのみマウントされるため、これは webfonts.md のローダールールに対する意図的な例外です。デモファイルは自己完結させてください。

ひな形：

import { type Page, useSlidePageNumber } from '@open-slide/core';

const Title = ({ children }: { children: React.ReactNode }) => (
  // …same JSX as in themes/<id>.md
);
const Footer = () => {
  const { current, total } = useSlidePageNumber();
  // …
};
const Eyebrow = ({ children }: { children: React.ReactNode }) => (
  // …
);

const Cover: Page = () => (
  // …
);
const Content: Page = () => (
  // …
);
const Closer: Page = () => (
  // …
);

export default [Cover, Content, Closer];

Step 5 — 自己レビュー

完了前に、次のチェックリストを実行してください。

• パレットには最低限 bg／text／accent／muted が含まれ、すべて 16 進数で指定されています。
• Frontmatter に、パレットの背景色と一致する mode が含まれています。
• タイプスケールでヒーロー、見出し、本文、キャプションのサイズを指定しているか、slide-authoring のデフォルトに従うことを明示しています。
• 少なくとも Title と Footer が、具体的なインラインスタイルを含む、そのまま貼り付けて使える React として定義されています。
• モーションのセクションで、static／subtle／rich のいずれか 1 つを明示しています。
• 美的方向性の段落で、統一感のある方向性を 1 つ示しています。
• 2 つのファイルを両方作成しています：themes/<id>.md と themes/<id>.demo.tsx。スライドの変更や設定の変更はありません。
• デモ .tsx が 2～3 ページをエクスポートし、Markdown で定義した Title／Footer／Eyebrow コンポーネントを同じ内容でインラインに記述しています。
• デモ .tsx が Themes パネルで問題なく読み込まれることを確認しています。ファイルを読んで Step 4b の契約と照合してください。サーバーは起動しないでください。

Step 6 — 引き継ぎ

ユーザーに次の内容を伝えてください。

• テーマ ID と 2 つのファイルパス（themes/<id>.md + themes/<id>.demo.tsx）。
• デモが開発 UI の Themes パネルに、ライブカードと詳細ビューとして表示されること（HMR — 再起動は不要）。
• 次回の実行時に /create-slide の選択肢にテーマが表示されること。
• 見た目を一文でまとめた説明（パレット + 美的方向性）。

開発サーバーを実行しないでください。テーマを見せる目的であっても、実際のスライドを変更しないでください。デモ .tsx が見本です。

アンチパターン

• ❌ ラベル付きのコンポーネントスニペット以外に、実行可能なコードを themes/<id>.md に書くこと。Markdown はドキュメントです。
• ❌ Markdown のみ、またはデモのみを作成すること。テーマはセットであり、必ず両方のファイルを作成してください。
• ❌ themes/<id>.demo.tsx を実際のスライドとして扱うこと。これはプレビュー専用でスライド一覧の外に置かれます。slides/ の下には絶対に配置しないでください。
• ❌ デモ内で @/ やスライド固有のヘルパーからインポートすること。デモは自己完結させてください。
• ❌ ユーザーが画像や既存のスライドを提供しているのに、パレットやフォントを創作すること。でっち上げずに、そこから読み取ってください。
• ❌ slides/、packages/、package.json、open-slide.config.ts を編集すること。
• ❌ Fixed components セクションを省略すること。Title と Footer は最もよく再利用されるため、そのまま貼り付けて使える状態にしてください。