remotion-scaffold

Remotion のスキャフォールド

Remotion の動画プロジェクト用に、基盤となるフォルダー構成、設定ファイル、整理の枠組みを作成します。このスキルはプロジェクトのセットアップのみを対象とし、アニメーションロジックやコンポーネントの実装は生成しません。

このスキルでできること

次のプロジェクト用スキャフォールドを生成します。

1. ディレクトリー構成 — コンポジション、シーン、アセットを整理するフォルダーレイアウト
2. 設定ファイル — 空のテンプレートを含む基本的な constants.ts、types.ts
3. 空のシーンテンプレート — TODO マーカー付きのプレースホルダーシーンコンポーネント
4. アセットディレクトリー — 画像、音声、フォント用に整理されたフォルダー
5. 登録のセットアップ — Root.tsx でのコンポジション登録

対象範囲

対象:

• フォルダー構成の作成
• 空のファイルテンプレートの作成
• 設定のひな形のセットアップ
• ディレクトリー整理のパターン

対象外:

• アニメーションの実装（/remotion-animation を使用）
• シーンコンポーネントのロジック（/remotion-component-gen を使用）
• シーケンスの構成（/remotion-composition を使用）
• コンポーネントの生成（/remotion-component-gen を使用）

入出力形式

入力形式：プロジェクト要件

プロジェクトのセットアップ要件を受け付けます。

自然言語:

Create a new Remotion project scaffold for a 30-second video with 4 scenes.

構造化形式:

## Project Requirements

**Project Name:** ProductDemo
**Duration:** 30 seconds
**Frame Rate:** 30 fps
**Dimensions:** 1920x1080 (16:9)
**Number of Scenes:** 4 (Intro, Features, Demo, CTA)
**Asset Types:** Images, Audio (music + SFX)

出力形式：SCAFFOLD_MANIFEST.md

作成した構成を記録するマニフェストを生成します。

# Scaffold Manifest: ProductDemo

## Status
✅ Directory structure created
✅ Configuration files generated
✅ Scene templates created (empty)
⏳ Ready for implementation

## Generated Structure

src/remotion/compositions/ProductDemo/ ├── index.tsx # ✅ 作成済み - メインコンポジション（空） ├── constants.ts # ✅ 作成済み - 定数テンプレート ├── types.ts # ✅ 作成済み - 型定義 └── scenes/ ├── Scene1Intro.tsx # ✅ 作成済み - 空のテンプレート ├── Scene2Features.tsx # ✅ 作成済み - 空のテンプレート ├── Scene3Demo.tsx # ✅ 作成済み - 空のテンプレート └── Scene4CTA.tsx # ✅ 作成済み - 空のテンプレート

public/ ├── images/ # ✅ 作成済み - 空のディレクトリー ├── audio/ │ ├── music/ # ✅ 作成済み - 空のディレクトリー │ └── sfx/ # ✅ 作成済み - 空のディレクトリー └── fonts/ # ✅ 作成済み - 空のディレクトリー

## File Templates Created

### Main Composition: `index.tsx`
```typescript
import { AbsoluteFill, Sequence } from "remotion";
import { SCENE_TIMING } from "./constants";
import { Scene1Intro } from "./scenes/Scene1Intro";
import { Scene2Features } from "./scenes/Scene2Features";
import { Scene3Demo } from "./scenes/Scene3Demo";
import { Scene4CTA } from "./scenes/Scene4CTA";
import type { ProductDemoProps } from "./types";

export function ProductDemo({}: ProductDemoProps) {
  return (
    <AbsoluteFill>
      {/* TODO: Add composition layout via /remotion-composition */}
      <Sequence
        from={SCENE_TIMING.intro.start}
        durationInFrames={SCENE_TIMING.intro.duration}
      >
        <Scene1Intro />
      </Sequence>

      {/* Additional scenes... */}
    </AbsoluteFill>
  );
}

定数：constants.ts

// TODO: Define color palette
export const COLORS = {
  // Add colors here
} as const;

// TODO: Configure spring animations via /remotion-animation
export const SPRING_CONFIGS = {
  // Add spring configs here
} as const;

// Scene timing (30fps, 30 seconds total = 900 frames)
const FPS = 30;

export const SCENE_TIMING = {
  intro: { start: 0, duration: 5 * FPS },
  features: { start: 5 * FPS, duration: 10 * FPS },
  demo: { start: 15 * FPS, duration: 10 * FPS },
  cta: { start: 25 * FPS, duration: 5 * FPS },
} as const;

型：types.ts

export interface ProductDemoProps {
  // Add custom props here
}

export interface SceneProps {
  // Common scene props
}

シーンテンプレート：scenes/Scene1Intro.tsx

import { AbsoluteFill } from "remotion";

export function Scene1Intro() {
  return (
    <AbsoluteFill>
      {/* TODO: Implement scene via /remotion-component-gen */}
    </AbsoluteFill>
  );
}

次のステップ

1. アニメーションを定義する → /remotion-animation を実行してアニメーション設定を生成します
2. コンポジションを構築する → /remotion-composition を実行して Sequence レイアウトを構成します
3. シーンを実装する → 各シーンで /remotion-component-gen を実行します
4. レンダリングを設定する → /remotion-render-config を実行して出力設定を行います
5. アセットを追加する → /remotion-asset-coordinator を実行してアセットを準備します

設定の概要

設定	値
コンポジション ID	ProductDemo
長さ	30 秒（900 フレーム）
フレームレート	30 fps
寸法	1920x1080（16:9）
シーン	4（Intro、Features、Demo、CTA）
ステータス	スキャフォールド完了、実装準備完了

ファイルの場所

すべてのファイルは次の場所に作成されます。

• コンポジション: /path/to/project/src/remotion/compositions/ProductDemo/
• アセット: /path/to/project/public/

スキャフォールドのチェックリスト

作成チェックリスト：

• コンポジションのフォルダー構成を作成する
• TODO マーカー付きのメインコンポジションファイル（index.tsx）を生成する
• テンプレートとして定数ファイル（constants.ts）を生成する
• 型ファイル（types.ts）を生成する
• 空のシーンコンポーネントファイルを作成する
• アセットディレクトリ（public/images/、public/audio/）を作成する
• コンポジション登録のスケルトンを追加する
• アニメーションの実装（次のステップ：/remotion-animation）
• コンポジションのロジック（次のステップ：/remotion-composition）
• シーンの実装（次のステップ：/remotion-component-gen）

## Directory Structure Patterns

### Pattern 1: Simple Project (1-2 scenes)

src/remotion/compositions/VideoName/ ├── index.tsx # メインコンポジション ├── constants.ts # 設定定数 └── types.ts # TypeScriptの型

### Pattern 2: Multi-Scene Project (3+ scenes)

src/remotion/compositions/VideoName/ ├── index.tsx # メインコンポジション ├── constants.ts # 共通定数 ├── types.ts # 型定義 └── scenes/ ├── Scene1.tsx ├── Scene2.tsx └── Scene3.tsx

### Pattern 3: Complex Project (with audio)

src/remotion/compositions/VideoName/ ├── index.tsx # メインコンポジション ├── constants.ts # 設定 ├── types.ts # 型 ├── audio.ts # オーディオ設定 └── scenes/ └── ...

### Pattern 4: Component Library Project

src/remotion/ ├── components/ │ ├── particles/ │ ├── text/ │ ├── progress/ │ └── transitions/ ├── compositions/ │ └── VideoName/ └── utils/ ├── seededRandom.ts └── timing.ts

## File Templates

### Empty Main Composition

```typescript
import { AbsoluteFill } from "remotion";
import type { VideoNameProps } from "./types";

export function VideoName({}: VideoNameProps) {
  return (
    <AbsoluteFill>
      {/* TODO: Add composition structure via /remotion-composition */}
    </AbsoluteFill>
  );
}

空の定数テンプレート

// TODO: Define via /remotion-animation
export const COLORS = {} as const;
export const SPRING_CONFIGS = {} as const;
export const SCENE_TIMING = {} as const;

空の型テンプレート

export interface VideoNameProps {
  // Add props here
}

空のシーンテンプレート

import { AbsoluteFill } from "remotion";

export function Scene1() {
  return (
    <AbsoluteFill>
      {/* TODO: Implement via /remotion-component-gen */}
    </AbsoluteFill>
  );
}

登録テンプレート

src/remotion/Root.tsx に追加します：

import { Composition } from "remotion";
import { VideoName } from "./compositions/VideoName";

// Add to RemotionRoot component:
<Composition
  id="VideoName"
  component={VideoName}
  durationInFrames={900}  // TODO: Calculate based on requirements
  fps={30}
  width={1920}
  height={1080}
  defaultProps={{}}
/>

動画形式プリセット

一般的な動画形式のクイックリファレンス：

// YouTube (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Instagram Reels / TikTok (9:16)
{ width: 1080, height: 1920, fps: 30 }

// Twitter/X (16:9)
{ width: 1920, height: 1080, fps: 30 }

// Square (1:1)
{ width: 1080, height: 1080, fps: 30 }

アセットディレクトリの構成

標準的なアセットディレクトリ構成：

public/
├── images/
│   ├── logos/
│   ├── backgrounds/
│   └── icons/
├── audio/
│   ├── music/
│   └── sfx/
└── fonts/
    └── [custom-fonts].woff2

スキャフォールドのワークフロー

1. 要件を解析する → プロジェクト名、長さ、シーン、形式を抽出する
2. ディレクトリを作成する → フォルダー構成を生成する
3. 空のテンプレートを作成する → TODO マーカー付きのファイルを作成する
4. 登録を設定する → コンポジションを Root.tsx に追加する
5. マニフェストを生成する → 作成した構成を SCAFFOLD_MANIFEST.md に記録する
6. 引き継ぐ → 実装を担当する専門スキルに案内する

他のスキルとの連携

このスキルはパイプラインの最初のステップです：

remotion-scaffold (this skill)
    ↓ outputs: SCAFFOLD_MANIFEST.md
remotion-animation
    ↓ outputs: ANIMATION_CONFIG.md
remotion-composition
    ↓ outputs: COMPOSITION_STRUCTURE.md
remotion-component-gen (per scene)
    ↓ outputs: SCENE_COMPONENT.md
remotion-render-config
    ↓ outputs: RENDER_CONFIG.md

連携するスキル：

• /motion-designer — プロジェクト要件はデザイン仕様に基づく場合があります
• /remotion-animation — アニメーション設定の次のステップ
• /remotion-composition — コンポジション構成の次のステップ
• /remotion-component-gen — シーン実装の次のステップ
• /remotion-render-config — レンダー設定の最後のステップ

---

このスキルは、Remotion 実装パイプラインの基盤となる、シンプルで最小限のプロジェクトスキャフォールドを提供します。