Generate Video

---
name: generate-video
description: "Auto-generate product demo videos. Internal/manual workflow only; use from an explicit /generate-video command or a parent media workflow. Requires Remotion setup."
description-en: "Auto-generate product demo videos. Internal/manual workflow only; use from an explicit /generate-video command or a parent media workflow. Requires Remotion setup."
description-ja: "プロダクトデモ動画を自動生成。明示的な /generate-video または親メディアワークフローからのみ使う。通常発話からの自動起動はしない。Remotion セットアップが必要。"
allowed-tools: ["Read", "Write", "Edit", "Grep", "Glob", "Bash", "Task", "AskUserQuestion", "WebFetch"]
disable-model-invocation: true
user-invocable: false
argument-hint: "[demo|arch|release]"
context: fork
---

# Generate Video Skill

プロダクト説明動画の自動生成を担当するスキル群です。

## 起動契約

このスキルは `user-invocable: false` かつ `disable-model-invocation: true` です。
通常のユーザー発話（例: 「動画を作って」）で Claude が自動選択する前提にはしません。

- 明示的な `/generate-video` コマンド、または親メディアワークフローから内部的に起動される時だけ使います。
- `allowed-tools` は Claude Code 用です。Claude ではユーザー確認に `AskUserQuestion` を使えます。
- Codex mirror では同等の確認は `request_user_input` 相当の計画モード入力に読み替えます。通常実行でそのツールがない場合は、既定値を提示して停止せず進め、重要な未確定事項だけユーザーへ確認します。
- `disable-model-invocation: true` は「説明文だけを見てモデルが勝手に起動しない」という意味です。slash や親 workflow から明示起動された場合は本文手順に従います。

---

## 概要

`/generate-video` コマンドの内部で使用されるスキルです。
コードベース分析 → シナリオ提案 → 並列生成のフローを実行します。

## 機能詳細

| 機能 | 詳細 |
|------|------|
| **ベストプラクティス** | See [references/best-practices.md](${CLAUDE_SKILL_DIR}/references/best-practices.md) |
| **コードベース分析** | See [references/analyzer.md](${CLAUDE_SKILL_DIR}/references/analyzer.md) |
| **シナリオプランニング** | See [references/planner.md](${CLAUDE_SKILL_DIR}/references/planner.md) |
| **並列シーン生成** | See [references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md) |
| **視覚効果ライブラリ** | See [references/visual-effects.md](${CLAUDE_SKILL_DIR}/references/visual-effects.md) |
| **AI画像生成** | See [references/image-generator.md](${CLAUDE_SKILL_DIR}/references/image-generator.md) |
| **画像品質判定** | See [references/image-quality-check.md](${CLAUDE_SKILL_DIR}/references/image-quality-check.md) |

## Prerequisites

- Remotion がセットアップ済み（`/remotion-setup`）
- Node.js 18+
- （オプション）`GOOGLE_AI_API_KEY` - AI画像生成用

## `/generate-video` フロー

```
/generate-video
    │
    ├─[Step 1] 分析（analyzer.md）
    │   ├─ フレームワーク検出
    │   ├─ 主要機能検出
    │   ├─ UIコンポーネント検出
    │   └─ プロジェクト資産解析（Plans.md, CHANGELOG等）
    │
    ├─[Step 2] シナリオ提案（planner.md）
    │   ├─ 動画タイプ自動判定
    │   ├─ シーン構成提案
    │   └─ ユーザー確認
    │
    ├─[Step 2.5] 素材生成（image-generator.md）← NEW
    │   ├─ 素材必要判定（イントロ、CTA等）
    │   ├─ Nano Banana Pro で2枚生成
    │   ├─ Claude が品質判定（image-quality-check.md）
    │   └─ OK → 採用 / NG → 再生成（最大3回）
    │
    └─[Step 3] 並列生成（generator.md）
        ├─ シーン並列生成（Task tool）
        ├─ 統合 + トランジション
        └─ 最終レンダリング
```

## 実行手順

1. ユーザーが `/generate-video` を実行
2. Remotion セットアップ確認
3. `analyzer.md` でコードベース分析
4. `planner.md` でシナリオ提案 + ユーザー確認
5. `generator.md` で並列生成
6. 完了報告

## 動画タイプ（ファネル別）

| タイプ | ファネル | 長さ目安 | 自動判定条件 | 構成の芯 |
|--------|----------|----------|--------------|----------|
| **LP/広告ティザー** | 認知〜興味 | 30-90秒 | 新規プロジェクト | 痛み→結果→CTA |
| **Introデモ** | 興味→検討 | 2-3分 | UI変更検出 | 1ユースケース完走 |
| **リリースノート** | 検討→確信 | 1-3分 | CHANGELOG更新 | Before/After重視 |
| **アーキテクチャ解説** | 確信→決裁 | 5-30分 | 大規模構造変更 | 実運用+証拠 |
| **オンボーディング** | 継続・活用 | 30秒-数分 | 初回セットアップ | Aha体験への最短パス |

> 詳細: [references/best-practices.md](${CLAUDE_SKILL_DIR}/references/best-practices.md)

## シーンテンプレート

### 90秒ティザー（LP/広告向け）

| 時間 | シーン | 内容 |
|------|--------|------|
| 0-5秒 | Hook | 痛み or 望む結果 |
| 5-15秒 | Problem+Promise | 対象ユーザーと約束 |
| 15-55秒 | Workflow | 象徴ワークフロー |
| 55-70秒 | Differentiator | 差別化の根拠 |
| 70-90秒 | CTA | 次の一手 |

### 3分Introデモ（検討向け）

| 時間 | シーン | 内容 |
|------|--------|------|
| 0-10秒 | Hook | 結論+痛み |
| 10-30秒 | UseCase | ユースケース宣言 |
| 30-140秒 | Demo | 実画面で完走 |
| 140-170秒 | Objection | よくある不安1つ潰す |
| 170-180秒 | CTA | 行動喚起 |

### 共通シーン

| シーン | 推奨時間 | 内容 |
|--------|----------|------|
| イントロ | 3-5秒 | ロゴ + タグライン |
| 機能デモ | 10-30秒 | Playwrightキャプチャ |
| アーキテクチャ図 | 10-20秒 | Mermaid → アニメーション |
| CTA | 3-5秒 | URL + 連絡先 |

> 詳細テンプレート: [${CLAUDE_SKILL_DIR}/references/best-practices.md](${CLAUDE_SKILL_DIR}/references/best-practices.md#テンプレート)

## 音声同期ルール（重要）

ナレーション付き動画では以下を厳守:

| ルール | 値 |
|--------|-----|
| 音声開始 | シーン開始 + 30f（1秒待機） |
| シーン長さ | 30f + 音声長さ + 20f余白 |
| トランジション | 15f（隣接シーンとオーバーラップ） |
| シーン開始計算 | 前シーン開始 + 前シーン長 - 15f |

**事前確認**: `ffprobe` で音声長さを確認してからシーン設計

> 詳細: [${CLAUDE_SKILL_DIR}/references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md#音声同期ルール重要)

## BGM サポート

| 項目 | 推奨値 |
|------|--------|
| ナレーションあり | bgmVolume: 0.20 - 0.30 |
| ナレーションなし | bgmVolume: 0.50 - 0.80 |
| ファイル配置 | `public/BGM/` |

> 詳細: [${CLAUDE_SKILL_DIR}/references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md#bgm-サポート)

## 字幕サポート

| ルール | 値 |
|--------|-----|
| 字幕開始 | 音声開始と同じ |
| 字幕duration | 音声長 + 10f |
| フォント | Base64埋め込み推奨 |

> 詳細: [${CLAUDE_SKILL_DIR}/references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md#字幕サポート)

## 視覚効果ライブラリ

インパクトのある動画向けエフェクト集:

| エフェクト | 用途 |
|-----------|------|
| GlitchText | Hook、タイトル |
| Particles | 背景、CTA収束 |
| ScanLine | 解析中演出 |
| ProgressBar | 並列処理表示 |
| 3D Parallax | カード表示 |

> 詳細: [references/visual-effects.md](${CLAUDE_SKILL_DIR}/references/visual-effects.md)

## Notes

- Remotion未セットアップの場合は `/remotion-setup` を案内
- 並列生成数はシーン数に応じて自動調整（max 5）
- 生成された動画は `out/` ディレクトリに出力
- AI生成画像は `out/assets/generated/` に保存
- `GOOGLE_AI_API_KEY` 未設定時は画像生成をスキップ（既存素材 or プレースホルダー使用）