remotion-spec-translator

Remotion仕様トランスレーター

モーションデザイン仕様から動作するRemotionコードに至るまでの、翻訳パイプライン全体を統括します。このスキルは、翻訳の各工程を専門スキルに委任するコーディネーターとして機能します。

このスキルの機能

以下の手順で翻訳を統括します。

1. パイプラインの調整 — 専門スキルを適切な順序で呼び出します
2. 仕様の解析 — 各スキルに必要な要件を抽出します
3. 引き継ぎの管理 — あるスキルの出力が次のスキルに渡されるようにします
4. 完全性の検証 — すべてのシーンが実装されていることを確認します
5. ワークフローの記録 — パイプラインの進行状況を追跡します

対象範囲

対象範囲内：

• パイプラインの統括と調整
• 仕様の解析と要件の抽出
• スキルの委任と順序決定
• 進行状況の追跡と検証
• ワークフローの記録

対象範囲外：

• 直接的なコード生成（専門スキルに委任します）
• 実装の詳細（コンポーネント／アニメーションスキルが担当します）
• 手動でのファイル作成（スキャフォールドスキルが担当します）

入出力形式

入力形式：VIDEO_SPEC.md

完全なモーションデザイン仕様（/motion-designerからの出力）を想定しています。

# Video Title: ProductDemo

## Overview
- Duration: 30 seconds
- Frame Rate: 30 fps
- Aspect Ratio: 16:9 (1920x1080)
- Total Scenes: 4

## Color Palette
Primary: #FF6B35 - Ember Orange
Secondary: #4ECDC4 - Teal
Background: #0A0A0A - Black
Text: #FFFFFF - White

## Scene 1: Intro (0s - 5s)
Visual Description: Centered logo with smooth entrance
Animation Details:
- Logo: Scale 0.8 → 1.0, Spring (damping: 200)
- Subtitle: Fade in with upward slide

## Scene 2: Features (5s - 15s)
Visual Description: Three feature cards stagger in
Animation Details:
- Cards: Stagger delay 10 frames, slide from left

## Scene 3: Demo (15s - 25s)
Visual Description: Product screenshot with highlights
Animation Details:
- Screenshot: Fade in, scale 0.95 → 1.0
- Highlights: Sequential pulse effect

## Scene 4: CTA (25s - 30s)
Visual Description: Call-to-action with button
Animation Details:
- Text: Fade in
- Button: Scale bounce effect

## Assets
- Logo: public/images/logo.svg (400x400)
- Product screenshot: public/images/product.png (1200x800)

出力形式：TRANSLATION_COMPLETE.md

統括サマリードキュメントを生成します。

# Translation Complete: ProductDemo

## Status
✅ Pipeline execution complete
✅ All scenes implemented
⏳ Ready for render

## Pipeline Execution Summary

### Step 1: Scaffold Generation (/remotion-scaffold)
✅ Complete
- Created: Project structure
- Output: SCAFFOLD_MANIFEST.md
- Files: index.tsx, constants.ts, types.ts, 4 scene templates

### Step 2: Animation Configuration (/remotion-animation)
✅ Complete
- Created: Animation parameters
- Output: ANIMATION_CONFIG.md
- Configs: Spring settings, interpolations, timing

### Step 3: Composition Structure (/remotion-composition)
✅ Complete
- Created: Sequence layout
- Output: COMPOSITION_STRUCTURE.md
- Timing: All scene durations calculated

### Step 4: Scene Implementation (/remotion-component-gen)
✅ Complete - 4/4 scenes
- Scene 1 (Intro): SCENE_COMPONENT.md → Scene1Intro.tsx
- Scene 2 (Features): SCENE_COMPONENT.md → Scene2Features.tsx
- Scene 3 (Demo): SCENE_COMPONENT.md → Scene3Demo.tsx
- Scene 4 (CTA): SCENE_COMPONENT.md → Scene4CTA.tsx

### Step 5: Render Configuration (/remotion-render-config)
✅ Complete
- Created: Render settings
- Output: RENDER_CONFIG.md
- Target: YouTube (H.264, CRF 18)

## Generated Files

src/remotion/compositions/ProductDemo/ ├── index.tsx # ✅ すべてのシーンを含むコンポジション ├── constants.ts # ✅ 色、スプリング、タイミング ├── types.ts # ✅ TypeScriptインターフェース └── scenes/ ├── Scene1Intro.tsx # ✅ 実装済み ├── Scene2Features.tsx # ✅ 実装済み ├── Scene3Demo.tsx # ✅ 実装済み └── Scene4CTA.tsx # ✅ 実装済み

## Next Steps

1. **Add assets** to public/ folders
   - Logo: public/images/logo.svg
   - Product screenshot: public/images/product.png

2. **Test in preview**
   ```bash
   npm run dev

3. タイミングが仕様と完全に一致することを確認します

4. 準備ができたらレンダリングを実行します

   npm run render:youtube
   

5. 調整が必要な場合はレビューして反復します

アセットのチェックリスト

仕様で必要なアセット：

• public/images/logo.svg (400x400)
• public/images/product.png (1200x800)

アセットの調達方法については、/remotion-asset-coordinatorを使用してください。

品質チェックリスト

• すべてのシーンを実装済み
• タイミングが仕様と一致
• アニメーションを設定済み
• パレットの色を適用済み
• コンポジションの構造が完成
• アセットを追加
• プレビューをテスト
• 最終レンダリングを完了

翻訳の概要

入力： VIDEO_SPEC.md（モーションデザイン仕様） パイプライン： 5つの専門スキルを順番に実行 出力： 完全に動作するRemotionコンポジション ステータス： 実装完了、アセットとテストは未完了

## Orchestration Workflow

The pipeline executes in this sequence:

VIDEO_SPEC.md (入力) ↓ ステップ1：/remotion-scaffold ↓ 出力：SCAFFOLD_MANIFEST.md + フォルダー構造 ステップ2：/remotion-animation ↓ 出力：ANIMATION_CONFIG.md + アニメーション定数 ステップ3：/remotion-composition ↓ 出力：COMPOSITION_STRUCTURE.md + シーケンスレイアウト ステップ4：/remotion-component-gen（シーンごと） ↓ 出力：SCENE_COMPONENT.md × N シーン ステップ5：/remotion-render-config ↓ 出力：RENDER_CONFIG.md + レンダリングコマンド ↓ TRANSLATION_COMPLETE.md (出力)

## Skill Delegation Strategy

### When to Delegate

1. **Parse spec** → Extract requirements for each skill
2. **Check dependencies** → Ensure prerequisites met
3. **Call skill** → Provide focused input
4. **Capture output** → Store for next skill
5. **Validate** → Confirm output quality
6. **Proceed** → Move to next step

### Delegation Examples

```typescript
// Step 1: Scaffold
const scaffoldInput = {
  projectName: "ProductDemo",
  duration: 30,
  fps: 30,
  dimensions: "1920x1080",
  scenes: ["Intro", "Features", "Demo", "CTA"]
};
// Call: /remotion-scaffold

// Step 2: Animation
const animationInput = {
  springConfigs: extractSpringConfigs(spec),
  interpolations: extractInterpolations(spec),
  timing: extractAnimationTiming(spec)
};
// Call: /remotion-animation

// Step 3: Composition
const compositionInput = {
  scenes: [
    { name: "intro", durationSeconds: 5 },
    { name: "features", durationSeconds: 10 },
    { name: "demo", durationSeconds: 10 },
    { name: "cta", durationSeconds: 5 }
  ],
  fps: 30
};
// Call: /remotion-composition

// Step 4: Component Gen (per scene)
for (const scene of spec.scenes) {
  const componentInput = {
    sceneName: scene.name,
    visualDescription: scene.visual,
    animationDetails: scene.animation,
    assets: scene.assets
  };
  // Call: /remotion-component-gen
}

// Step 5: Render Config
const renderInput = {
  platform: "YouTube",
  quality: "high",
  format: "MP4"
};
// Call: /remotion-render-config

仕様解析ヘルパー

スプリング設定の抽出

function extractSpringConfigs(spec: string) {
  // Parse animation details for spring parameters
  // Look for: damping, stiffness, mass values
  // Return: SPRING_CONFIGS object
}

シーンのタイミングの抽出

function extractSceneTiming(spec: string) {
  // Parse scene headers for timing (0s - 5s)
  // Calculate frame numbers
  // Return: Scene timing array
}

カラーパレットの抽出

function extractColorPalette(spec: string) {
  // Parse Color Palette section
  // Extract hex codes and names
  // Return: COLORS object
}

アセットリストの抽出

function extractAssets(spec: string) {
  // Parse Assets sections per scene
  // Collect all required assets
  // Return: Asset checklist
}

進行状況の追跡

オーケストレーターがパイプラインの進行状況を追跡します。

Pipeline Progress: ProductDemo
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

✅ Step 1/5: Scaffold (remotion-scaffold)
✅ Step 2/5: Animation (remotion-animation)
✅ Step 3/5: Composition (remotion-composition)
⏳ Step 4/5: Scenes (remotion-component-gen) - 2/4 complete
⬜ Step 5/5: Render Config (remotion-render-config)

Current: Implementing Scene 3 (Demo)
Next: Scene 4 (CTA)

エラー処理

情報の不足

仕様に必要な情報が不足している場合：

• 不足箇所を特定します（例：スプリング設定がない）
• 可能な場合は妥当なデフォルト値を使用します
• 前提条件を出力に記録します
• ユーザーによる確認が必要な項目として通知します

スキルの失敗

委任したスキルが失敗した場合：

• コンテキストとともにエラーを記録します
• 可能な場合は復旧を試みます
• 影響がない場合は次のステップに進みます
• 最終サマリーで問題を報告します

不完全な仕様

仕様が不完全な場合：

• 利用可能な情報を解析します
• TODOマーカーを付けて生成します
• 不足している要件を一覧表示します
• 仕様の改善案を提案します

検証チェックリスト

翻訳を完了とする前に、以下を確認してください。

• 仕様書のすべてのシーンにコンポーネントがある
• アニメーション設定が仕様書のパラメーターと一致している
• シーンのタイミングの合計が全体の再生時間と一致している
• カラーパレットが抽出され、適用されている
• アセットリストが生成されている
• レンダリング設定の対象プラットフォームが正しい
• 重要なセクションに TODO マーカーがない

ベストプラクティス

1. 徹底的に解析する — 仕様書からすべての詳細を抽出します
2. 適切に委任する — 各タスクに適したスキルを使用します
3. コンテキストを維持する — 関連情報をスキル間で引き継ぎます
4. 出力を検証する — 各スキルの結果を確認します
5. 明確に記録する — 実施した内容を説明します
6. 進捗を追跡する — パイプラインのステータスを表示します
7. エラーに対処する — 失敗を適切に処理します

他のスキルとの連携

このスキルはパイプラインをオーケストレーションします。

remotion-spec-translator (this skill - ORCHESTRATOR)
    ↓ coordinates
remotion-scaffold → remotion-animation → remotion-composition → remotion-component-gen → remotion-render-config

連携先：

• /motion-designer — このスキルの VIDEO_SPEC.md を使用します
• /remotion-scaffold — スキャフォールディングを委任します
• /remotion-animation — アニメーション設定を委任します
• /remotion-composition — コンポジションの構造を委任します
• /remotion-component-gen — シーンの実装を委任します（シーンごと）
• /remotion-render-config — レンダリング設定を委任します

起動フレーズ：

• 「仕様をコードに変換」
• 「動画仕様を実装」
• 「仕様から Remotion を生成」
• 「デザインから Remotion プロジェクトを構築」

---

このスキルは、インテリジェントなオーケストレーションと委任を通じて、モーションデザイン仕様を完全に動作する Remotion プロジェクトへ体系的に変換します。