open-slide

自然言語とコーディングエージェントで React スライドを書き切るためのランタイム（MIT）

1 — 概要
位置づけ

各スライドは 1920 × 1080 の固定キャンバス上に描画される任意の React コンポーネントである。制約 DSL ではなく、エージェントが普段どおり TSX を書ける。キャンバス・スケーリング・ページ遷移・ホットリロード・プレゼンモード・静的 HTML と PDF のエクスポートまでをフレームワーク側が担う。

1920×1080キャンバス
Reactページ表現
Vite開発・ビルド
MITライセンス

公開ソースは GitHub の 1weiho/open-slide。npm では @open-slide/cli がスキャフォールド、@open-slide/core がランタイムと Vite プラグインを提供する。

2 — エージェント連携
同梱スキル

初期化されたワークスペースには、スライド作成と実装ルールを読ませるためのエージェントスキルが含まれる。Claude Code 向けに揃えられているが、Codex や Cursor など他のエージェントでも同じリポジトリを編集する使い方が想定されている。

/create-slide トピック・ aesthetic、枚数、テキスト量、モーションの有無を質問し、デッキ ID と構成を決めてから各ページの TSX を生成する。
/slide-authoring 1920×1080 キャンバス、タイポ段階、配色、レイアウト規約など、実装前にエージェントが参照する技術リファレンス。
/apply-comments インスペクタで付けた @slide-comment をソースに反映し、マーカーを消す。
/create-theme 再利用可能なテーマ（パレット・タイポ・レイアウト）を Markdown で定義し、複数デッキから参照できるようにする。
/current-slide 「このページ」「今見ているスライド」など指示語を、具体的な slideId と pageIndex に解決する。
/create-slide の流れ
STEP 1–2
テーマと要件
themes/ からテーマを選ぶか、トピック・ aesthetic・枚数・テキスト密度・モーション有無を質問する。
STEP 3–4
ID と構成
kebab-case の slide id を決め、Cover / Agenda / Content などページ役割のリストを先に組む。
STEP 5–6
ビジュアルと実装
slide-authoring に従い export const design でパレットを宣言し、slides/<id>/index.tsx を書く。
STEP 7
セルフレビュー
1 ページ 1 アイデア、キャンバス端からの余白、タイポ段階が揃っているかを確認する。
3 — スライド契約
ファイル構造

スライドは slides/<kebab-case-id>/index.tsx がエントリ。画像・動画・フォントは同フォルダの assets/ に置く。1 デッキ = 1 TSX + assets のみ（兄弟コンポーネントファイルは作らない）。

// slides/my-deck/index.tsx
import type { Page, SlideMeta } from '@open-slide/core';

const Cover: Page = () => (
  <div style={{ width: '100%', height: '100%' }}>…</div>
);

export const meta: SlideMeta = {
  title: 'My deck',
  createdAt: '2026-05-16T12:00:00Z',
  theme: 'aurora', // 任意: themes/ の id
};

export default [Cover] satisfies Page[];
  • export default は props なし React コンポーネントの非空配列（表示順 = 配列順）。
  • 各ページは 1920×1080 を前提に px 指定。フォントサイズは hero 140–200px、本文 32–44px など段階表を起点にする。
  • meta.createdAt は ISO 8601 文字列リテラル。ホーム画面の「新しい順」ソートに使われる。
4 — ランタイム機能
開発・配布
  • インスペクタ: 開発サーバー上で要素をクリックし、コメントを付与。コメントはソース内の @slide-comment として保持される。
  • アセット: 画像・動画・フォントをデッキ単位で管理。ブランド SVG は svgl カタログから検索して取り込める。
  • プレゼン: 全画面再生、キーボード操作、プレゼンターモード（現在／次スライド、スピーカーノート、タイマー）。
  • エクスポート: 自己完結した静的 HTML サイト、または印刷向け PDF を CLI から出力。
  • スライドマネージャ: 複数デッキをフォルダと絵文字で整理し、ドラッグで並べ替え。
デプロイ

成果物は静的ファイルのみ。Vercel、Cloudflare Pages、Netlify 等の静的ホスティングにそのまま載せられる（サーバ常駐ランタイムは不要）。

5 — CLI
コマンド説明主なフラグ
npx @open-slide/cli init <name> 最小ワークスペースを生成。Vite / React / tsconfig は core に隠蔽される。 —
open-slide dev 開発サーバーを起動。 -p, --port · --host · --open
open-slide build 静的サイトをビルド。 --out-dir（既定 dist）
open-slide preview 本番ビルドをプレビュー。 -p, --port · --host · --open

設定（任意）

ワークスペース直下の open-slide.config.ts でスライドディレクトリやポートを上書きできる。

import type { OpenSlideConfig } from '@open-slide/core';

const openSlideConfig: OpenSlideConfig = {
  slidesDir: 'slides',
  port: 5173,
};

export default openSlideConfig;
6 — 編集ループ
プレビューとコメントの往復

README が示すループを、処理の順序として整理した。

flowchart TD
  A[プレビュー] --> B[要素クリック]
  B --> C["@slide-comment 付与"]
  C --> D["/apply-comments"]
  D --> E[ソース更新]
  E --> A
運用: プレゼンしながら画面上で修正指示を残し、エージェントに一括反映させる。手動で TSX を開く往復より、視覚的フィードバックを優先するワークフロー向け。
7 — モノレポ
flowchart TD Init["npx @open-slide/cli init"] --> WS["User workspace
slides/ · themes/"] WS --> Core["@open-slide/core"] Core --> Vite["Vite plugin
virtual modules"] Core --> UI["Viewer · Present · Inspector"] Core --> CLI2["open-slide dev / build / preview"] Demo["apps/demo"] -.->|"workspace:*"| Core Web["apps/web"] -.->|"docs site"| Core
パスパッケージ役割
packages/core@open-slide/coreホーム、スライドビューア、プレゼン、インスペクタ、Vite プラグイン、open-slide CLI。
packages/cli@open-slide/cliinit スキャフォールドとプロジェクトテンプレート。
apps/demoprivateローカル開発用。workspace 参照で core を dogfood するサンプルデッキ。
apps/webprivate公式ドキュメント／マーケ用 Next.js サイト。

ルートは pnpm ワークスペースと Turbo でオーケストレーション。品質ゲートは Biome（format + lint）と Vitest が担う。

8 — セットアップ

新規デッキ

npx @open-slide/cli init my-slide
cd my-slide
pnpm dev

エージェント運用の制約事項はリポジトリ直下の CLAUDE.md にまとまっている。スライド本体は slides/<id>/index.tsx から編集する。

フレームワーク本体の開発

pnpm install
pnpm dev          # demo が local core を参照
pnpm build
pnpm check        # biome
pnpm test         # vitest
公式