create-video-start

動画作成の開始

Remotion 動画パイプライン全体を連結するマスターオーケストレーターのスキルです。1 つのクリエイティブブリーフを受け取り、各専門スキルを順番に自動で呼び出し、出力を次のスキルに渡します。

このスキルでできること

動画作成パイプライン全体をオーケストレーションします。

1. motion-designer → クリエイティブブリーフから VIDEO_SPEC.md を作成
2. remotion-scaffold → プロジェクト構成をセットアップ
3. remotion-animation → アニメーション設定を生成
4. remotion-composition → Sequence レイアウトを作成
5. remotion-component-gen → 各シーンのコンポーネントを生成
6. remotion-render-config → 出力設定を構成
7. remotion-asset-coordinator → アセットマニフェストを準備

パイプラインの実行

呼び出されたら、次の順序でパイプラインを実行します。

ステップ 0：セットアップ

パイプラインの成果物を保存する作業ディレクトリを作成します。

# Create pipeline working directory
PIPELINE_DIR=".remotion-pipeline/$(date +%Y%m%d_%H%M%S)"
mkdir -p "$PIPELINE_DIR"
echo "Pipeline artifacts: $PIPELINE_DIR"

ステップ 1：Motion Designer → VIDEO_SPEC.md

クリエイティブブリーフからモーションデザイン仕様を生成します。

# Invoke motion-designer skill
claude -p "You are using the /motion-designer skill.

Create a detailed VIDEO_SPEC.md for this creative brief:

$CREATIVE_BRIEF

Output a complete motion design specification with:
- Overview (duration, fps, dimensions)
- Color palette with hex codes
- Scene-by-scene breakdown with timing
- Animation details for each element
- Audio specifications

Write the spec to: $PIPELINE_DIR/VIDEO_SPEC.md" \
  --allowedTools "Read,Write,Edit,Bash"

チェックポイント： VIDEO_SPEC.md が存在し、必要なセクションがすべて含まれていることを確認します。

ステップ 2：Remotion Scaffold → SCAFFOLD_MANIFEST.md

プロジェクトのフォルダー構造を作成します。

# Invoke remotion-scaffold skill
claude -p "You are using the /remotion-scaffold skill.

Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)

Create the Remotion project scaffold:
1. Create folder structure for the composition
2. Create empty template files
3. Setup asset directories
4. Register composition in Root.tsx

Write manifest to: $PIPELINE_DIR/SCAFFOLD_MANIFEST.md
Write actual files to the project." \
  --allowedTools "Read,Write,Edit,Bash,Glob"

チェックポイント： スキャフォールドのディレクトリとファイルが存在することを確認します。

ステップ 3：Remotion Animation → ANIMATION_CONFIG.md

アニメーション設定を生成します。

# Invoke remotion-animation skill
claude -p "You are using the /remotion-animation skill.

Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)

Generate animation configurations:
1. Spring configs for each animation type
2. Interpolation mappings
3. Timing constants
4. Stagger delay patterns

Write to: $PIPELINE_DIR/ANIMATION_CONFIG.md

Output TypeScript constants that can be copied to constants.ts" \
  --allowedTools "Read,Write,Edit"

チェックポイント： ANIMATION_CONFIG.md にスプリング設定とタイミングが含まれていることを確認します。

ステップ 4：Remotion Composition → COMPOSITION_STRUCTURE.md

Sequence レイアウトを生成します。

# Invoke remotion-composition skill
claude -p "You are using the /remotion-composition skill.

Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)

Generate composition structure:
1. Sequence ordering for all scenes
2. Transition timing between scenes
3. Duration calculations
4. Scene timing constants

Write to: $PIPELINE_DIR/COMPOSITION_STRUCTURE.md

Output the main composition JSX structure." \
  --allowedTools "Read,Write,Edit"

チェックポイント： COMPOSITION_STRUCTURE.md に Sequence レイアウトが含まれていることを確認します。

ステップ 5：Remotion Component Gen → SCENE_COMPONENT.md（シーンごと）

各シーンのコンポーネントを生成します。

# For each scene in the spec, invoke remotion-component-gen
for SCENE_NUM in $(seq 1 $TOTAL_SCENES); do
  claude -p "You are using the /remotion-component-gen skill.

Based on Scene $SCENE_NUM from this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)

And these animation configs:
$(cat $PIPELINE_DIR/ANIMATION_CONFIG.md)

Generate the complete Scene${SCENE_NUM} component:
1. Full TSX implementation
2. Animation logic using the configs
3. Proper imports and types
4. AbsoluteFill wrapper

Write to: $PIPELINE_DIR/SCENE_${SCENE_NUM}_COMPONENT.md
Also write the actual .tsx file to the scenes/ folder." \
    --allowedTools "Read,Write,Edit,Glob"
done

チェックポイント： すべてのシーンコンポーネントが生成されていることを確認します。

ステップ 6：Remotion Render Config → RENDER_CONFIG.md

レンダリング設定を生成します。

# Invoke remotion-render-config skill
claude -p "You are using the /remotion-render-config skill.

Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)

Generate render configuration:
1. Output format and codec settings
2. Quality settings
3. Resolution confirmation
4. Render command examples

Write to: $PIPELINE_DIR/RENDER_CONFIG.md" \
  --allowedTools "Read,Write,Edit"

ステップ 7：Remotion Asset Coordinator → ASSET_MANIFEST.md

アセット準備ガイドを生成します。

# Invoke remotion-asset-coordinator skill
claude -p "You are using the /remotion-asset-coordinator skill.

Based on this VIDEO_SPEC.md:
$(cat $PIPELINE_DIR/VIDEO_SPEC.md)

And this SCAFFOLD_MANIFEST.md:
$(cat $PIPELINE_DIR/SCAFFOLD_MANIFEST.md)

Generate asset manifest:
1. List all required assets
2. Recommend sources for each
3. Provide preparation instructions
4. Generate import code snippets

Write to: $PIPELINE_DIR/ASSET_MANIFEST.md" \
  --allowedTools "Read,Write,Edit,WebSearch"

ステップ 8：最終出力の組み立て

すべての出力を最終サマリーにまとめます。

# Create final summary
claude -p "Create a PIPELINE_COMPLETE.md summary that:

1. Lists all generated files
2. Provides next steps for the developer
3. Includes quick-start commands
4. Notes any TODOs that need manual attention

Pipeline artifacts:
- VIDEO_SPEC.md: $(cat $PIPELINE_DIR/VIDEO_SPEC.md | head -20)
- SCAFFOLD_MANIFEST.md: $(cat $PIPELINE_DIR/SCAFFOLD_MANIFEST.md | head -20)
- ANIMATION_CONFIG.md: $(cat $PIPELINE_DIR/ANIMATION_CONFIG.md | head -20)
- COMPOSITION_STRUCTURE.md: $(cat $PIPELINE_DIR/COMPOSITION_STRUCTURE.md | head -20)
- Scene components: $(ls $PIPELINE_DIR/SCENE_*_COMPONENT.md)
- RENDER_CONFIG.md: $(cat $PIPELINE_DIR/RENDER_CONFIG.md | head -20)
- ASSET_MANIFEST.md: $(cat $PIPELINE_DIR/ASSET_MANIFEST.md | head -20)

Write to: $PIPELINE_DIR/PIPELINE_COMPLETE.md" \
  --allowedTools "Read,Write,Edit,Glob"

入力形式

クリエイティブブリーフ（自然言語）

Create a 30-second product demo video for Vello, an AI task management app.
Show the main features: smart scheduling, team collaboration, and AI suggestions.
Use modern, clean aesthetic with the brand colors (orange #FF6B35, dark background).
Include upbeat background music and subtle sound effects for transitions.
Target platform: YouTube and Twitter.

構造化されたブリーフ

## Video Brief

**Product:** Vello - AI Task Management
**Duration:** 30 seconds
**Style:** Modern, clean, tech-forward
**Brand Colors:**
  - Primary: #FF6B35 (Orange)
  - Background: #0A0A0A (Dark)
  - Accent: #4ECDC4 (Teal)

**Key Messages:**
1. Smart AI scheduling
2. Team collaboration
3. Instant AI suggestions

**Scenes:**
1. Logo intro (5s)
2. Feature showcase (15s)
3. Social proof (5s)
4. CTA (5s)

**Audio:**
- Background: Upbeat electronic
- SFX: Subtle whooshes, clicks

**Target Platforms:** YouTube, Twitter

出力形式

PIPELINE_COMPLETE.md

# Pipeline Complete: [Video Name]

## Execution Summary

| Step | Skill | Output | Status |
|------|-------|--------|--------|
| 1 | motion-designer | VIDEO_SPEC.md | ✅ |
| 2 | remotion-scaffold | SCAFFOLD_MANIFEST.md | ✅ |
| 3 | remotion-animation | ANIMATION_CONFIG.md | ✅ |
| 4 | remotion-composition | COMPOSITION_STRUCTURE.md | ✅ |
| 5 | remotion-component-gen | SCENE_*_COMPONENT.md | ✅ |
| 6 | remotion-render-config | RENDER_CONFIG.md | ✅ |
| 7 | remotion-asset-coordinator | ASSET_MANIFEST.md | ✅ |

## Generated Files

### Pipeline Artifacts

.remotion-pipeline/20240123_143052/ ├── VIDEO_SPEC.md ├── SCAFFOLD_MANIFEST.md ├── ANIMATION_CONFIG.md ├── COMPOSITION_STRUCTURE.md ├── SCENE_1_COMPONENT.md ├── SCENE_2_COMPONENT.md ├── SCENE_3_COMPONENT.md ├── SCENE_4_COMPONENT.md ├── RENDER_CONFIG.md ├── ASSET_MANIFEST.md └── PIPELINE_COMPLETE.md

### Project Files Created

src/remotion/compositions/VideoName/ ├── index.tsx ✅ メインコンポジション ├── constants.ts ✅ 色、スプリング、タイミング ├── types.ts ✅ TypeScript インターフェース └── scenes/ ├── Scene1Intro.tsx ✅ 実装済み ├── Scene2Features.tsx ✅ 実装済み ├── Scene3Proof.tsx ✅ 実装済み └── Scene4CTA.tsx ✅ 実装済み

public/ ├── images/ 📁 アセット用 ├── audio/ │ ├── music/ 📁 音楽用 │ └── sfx/ 📁 効果音用 └── fonts/ 📁 フォント用

## Quick Start

```bash
# Preview the video
npm run dev

# Open Remotion Studio
# Navigate to http://localhost:3000

# Render final video
npx remotion render src/index.tsx VideoName output.mp4

次のステップ

必須の作業

1. public/audio/music/ にBGMを追加
2. public/audio/sfx/ に効果音を追加
3. public/images/ に製品画像を追加
4. constants.ts の色を確認してカスタマイズ

任意の改善

• QA チェックには /remotion-video-reviewer を実行します
• レンダリングを最適化するには /remotion-performance-optimizer を実行します

レンダリングコマンド

RENDER_CONFIG.md より：

# YouTube (1080p, high quality)
npx remotion render src/index.tsx VideoName youtube-output.mp4 \
  --codec h264 --crf 18

# Twitter (optimized file size)
npx remotion render src/index.tsx VideoName twitter-output.mp4 \
  --codec h264 --crf 23

# Preview frames
npx remotion still src/index.tsx VideoName preview.png --frame=150

パイプラインの所要時間

• 実行時間の合計：約3～5分
• モーションデザイン：約45秒
• スキャフォールド：約15秒
• アニメーション設定：約20秒
• コンポジション：約15秒
• シーンコンポーネント：シーンあたり約30秒
• レンダリング設定：約10秒
• アセットマニフェスト：約20秒

## Execution Instructions

When this skill is invoked:

1. **Parse the creative brief** from the user's input
2. **Create pipeline directory** with timestamp
3. **Execute each step sequentially** using `claude -p` for skill invocation
4. **Validate output** after each step before proceeding
5. **Handle errors gracefully** - if a step fails, report and offer to retry
6. **Assemble final summary** with all artifacts and next steps

### Error Handling

If any step fails:

```bash
# Retry pattern
MAX_RETRIES=2
RETRY_COUNT=0

while [ $RETRY_COUNT -lt $MAX_RETRIES ]; do
  # Attempt skill invocation
  if claude -p "..." --allowedTools "..."; then
    break
  fi
  RETRY_COUNT=$((RETRY_COUNT + 1))
  echo "Retry $RETRY_COUNT of $MAX_RETRIES"
done

if [ $RETRY_COUNT -eq $MAX_RETRIES ]; then
  echo "Step failed after $MAX_RETRIES retries"
  # Log error and continue with partial output
fi

統合に関するメモ

このスキルは、以下のサブスキルを連携させます。

スキル	呼び出し方法	出力
/motion-designer	claude -p "..."	VIDEO_SPEC.md
/remotion-scaffold	claude -p "..."	SCAFFOLD_MANIFEST.md + ファイル
/remotion-animation	claude -p "..."	ANIMATION_CONFIG.md
/remotion-composition	claude -p "..."	COMPOSITION_STRUCTURE.md
/remotion-component-gen	claude -p "..."（×N）	SCENE_*_COMPONENT.md + ファイル
/remotion-render-config	claude -p "..."	RENDER_CONFIG.md
/remotion-asset-coordinator	claude -p "..."	ASSET_MANIFEST.md

各 claude -p の呼び出しには、以下が含まれます。

• スキルのコンテキストと指示
• 前のステップからの関連出力
• 出力ファイルのパス
• そのステップで使用できるツール

使用例

# Invoke with natural language brief
/create-video-start Create a 30-second demo video for our AI task app Vello

# Invoke with detailed brief
/create-video-start <<EOF
Product: Vello AI Task Manager
Duration: 45 seconds
Style: Modern tech, dark theme
Scenes: Intro, Features (3), Testimonial, CTA
Brand: Orange #FF6B35, Dark #0A0A0A
Target: YouTube, LinkedIn
EOF

スキルの依存関係

以下のスキルをインストールする必要があります。

• /motion-designer - 動画仕様の作成
• /remotion-scaffold - プロジェクト構成の設定
• /remotion-animation - アニメーション設定
• /remotion-composition - シーケンスのレイアウト
• /remotion-component-gen - シーンコンポーネントの生成
• /remotion-render-config - レンダリング設定
• /remotion-asset-coordinator - アセットの準備

---

このオーケストレーターはスキル間の手動での引き継ぎをなくし、1つのクリエイティブブリーフから動画プロジェクト全体を作成します。