generate-video

---
name: generate-video
description: "Generates product demo videos and release walkthroughs via Remotion. Use when creating video documentation or animated demos."
when_to_use: "generate video, product demo video, release walkthrough, Remotion, animated demo"
allowed-tools: ["Read", "Write", "Edit", "Grep", "Glob", "Bash", "Task", "AskUserQuestion", "WebFetch"]
disable-model-invocation: true
argument-hint: "[demo|arch|release]"
context: fork
---

# Generate Video Skill

A collection of skills responsible for automatically generating product explanation videos.

---

## Overview

This skill is used internally by the `/generate-video` command.
It executes the flow of codebase analysis → scenario proposal → parallel generation.

## Feature Details

| Feature | Details |
|---------|--------|
| **Best Practices** | See [references/best-practices.md](${CLAUDE_SKILL_DIR}/references/best-practices.md) |
| **Codebase Analysis** | See [references/analyzer.md](${CLAUDE_SKILL_DIR}/references/analyzer.md) |
| **Scenario Planning** | See [references/planner.md](${CLAUDE_SKILL_DIR}/references/planner.md) |
| **Parallel Scene Generation** | See [references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md) |
| **Visual Effects Library** | See [references/visual-effects.md](${CLAUDE_SKILL_DIR}/references/visual-effects.md) |
| **AI Image Generation** | See [references/image-generator.md](${CLAUDE_SKILL_DIR}/references/image-generator.md) |
| **Image Quality Assessment** | See [references/image-quality-check.md](${CLAUDE_SKILL_DIR}/references/image-quality-check.md) |

## Prerequisites

- Remotion is set up (`/remotion-setup`)
- Node.js 18+
- (Optional) `GOOGLE_AI_API_KEY` - for AI image generation

## `/generate-video` Flow

```
/generate-video
    │
    ├─[Step 1] Analysis (analyzer.md)
    │   ├─ Framework detection
    │   ├─ Key feature detection
    │   ├─ UI component detection
    │   └─ Project asset analysis (Plans.md, CHANGELOG, etc.)
    │
    ├─[Step 2] Scenario Proposal (planner.md)
    │   ├─ Auto-determine video type
    │   ├─ Scene composition proposal
    │   └─ User confirmation
    │
    ├─[Step 2.5] Asset Generation (image-generator.md) ← NEW
    │   ├─ Determine if assets are needed (intro, CTA, etc.)
    │   ├─ Generate 2 images with Nano Banana Pro
    │   ├─ Claude assesses quality (image-quality-check.md)
    │   └─ OK → adopt / NG → regenerate (up to 3 times)
    │
    └─[Step 3] Parallel Generation (generator.md)
        ├─ Parallel scene generation (Task tool)
        ├─ Integration + transitions
        └─ Final rendering
```

## Execution Steps

1. User runs `/generate-video`
2. Verify Remotion setup
3. Analyze codebase with `analyzer.md`
4. Propose scenario with `planner.md` + user confirmation
5. Parallel generation with `generator.md`
6. Completion report

## Video Types (by funnel stage)

| Type | Funnel Stage | Approx. Length | Auto-detection Criteria | Core Structure |
|------|-------------|----------------|------------------------|---------------|
| **LP/Ad Teaser** | Awareness → Interest | 30-90s | New project | Pain → Result → CTA |
| **Intro Demo** | Interest → Consideration | 2-3 min | UI changes detected | Complete 1 use case |
| **Release Notes** | Consideration → Conviction | 1-3 min | CHANGELOG updated | Before/After focused |
| **Architecture Overview** | Conviction → Decision | 5-30 min | Major structural changes | Production use + evidence |
| **Onboarding** | Retention & Adoption | 30s - several min | First-time setup | Shortest path to Aha moment |

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

## Scene Templates

### 90-second Teaser (for LP/ads)

| Time | Scene | Content |
|------|-------|---------|
| 0-5s | Hook | Pain or desired outcome |
| 5-15s | Problem+Promise | Target user and promise |
| 15-55s | Workflow | Signature workflow |
| 55-70s | Differentiator | Basis for differentiation |
| 70-90s | CTA | Next step |

### 3-minute Intro Demo (for consideration)

| Time | Scene | Content |
|------|-------|---------|
| 0-10s | Hook | Conclusion + pain |
| 10-30s | UseCase | Use case declaration |
| 30-140s | Demo | Full walkthrough on actual screens |
| 140-170s | Objection | Address one common concern |
| 170-180s | CTA | Call to action |

### Common Scenes

| Scene | Recommended Duration | Content |
|-------|---------------------|---------|
| Intro | 3-5s | Logo + tagline |
| Feature Demo | 10-30s | Playwright capture |
| Architecture Diagram | 10-20s | Mermaid → animation |
| CTA | 3-5s | URL + contact |

> Detailed templates: [${CLAUDE_SKILL_DIR}/references/best-practices.md](${CLAUDE_SKILL_DIR}/references/best-practices.md#templates)

## Audio Sync Rules (Important)

Strictly follow these rules for narrated videos:

| Rule | Value |
|------|-------|
| Audio start | Scene start + 30f (1-second wait) |
| Scene length | 30f + audio length + 20f padding |
| Transition | 15f (overlap with adjacent scenes) |
| Scene start calculation | Previous scene start + previous scene length - 15f |

**Pre-check**: Verify audio length with `ffprobe` before designing scenes

> Details: [${CLAUDE_SKILL_DIR}/references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md#audio-sync-rules-important)

## BGM Support

| Item | Recommended Value |
|------|------------------|
| With narration | bgmVolume: 0.20 - 0.30 |
| Without narration | bgmVolume: 0.50 - 0.80 |
| File location | `public/BGM/` |

> Details: [${CLAUDE_SKILL_DIR}/references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md#bgm-support)

## Subtitle Support

| Rule | Value |
|------|-------|
| Subtitle start | Same as audio start |
| Subtitle duration | Audio length + 10f |
| Font | Base64 embedding recommended |

> Details: [${CLAUDE_SKILL_DIR}/references/generator.md](${CLAUDE_SKILL_DIR}/references/generator.md#subtitle-support)

## Visual Effects Library

A collection of effects for impactful videos:

| Effect | Use Case |
|--------|----------|
| GlitchText | Hook, titles |
| Particles | Background, CTA convergence |
| ScanLine | Analysis in-progress effect |
| ProgressBar | Parallel processing display |
| 3D Parallax | Card display |

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

## Notes

- If Remotion is not set up, guide users to `/remotion-setup`
- Number of parallel generations auto-adjusts based on scene count (max 5)
- Generated videos are output to the `out/` directory
- AI-generated images are saved to `out/assets/generated/`
- When `GOOGLE_AI_API_KEY` is not set, image generation is skipped (existing assets or placeholders are used)

• SKILL.md 7 KB
• package.json 1 KB
• assets/backgrounds/backgrounds.json 5 KB
• assets/sounds/sounds.json 6 KB
• references/MIGRATION-11.2.md 8 KB
• references/analyzer.md 4 KB
• references/asset-customization.md 11 KB
• references/best-practices.md 9 KB
• references/direction-guide.md 15 KB
• references/generator.md 26 KB
• references/image-generator.md 9 KB
• references/image-patterns.md 14 KB
• references/image-quality-check.md 7 KB
• references/naming-conventions.md 6 KB
• references/planner.md 8 KB
• references/visual-effects.md 11 KB
• remotion/tsconfig.json 1 KB
• remotion/components/BackgroundLayer.tsx 7 KB
• remotion/components/EmphasisBox.tsx 6 KB
• remotion/components/ProgressIndicator.tsx 7 KB
• remotion/components/README.md 9 KB
• remotion/components/TransitionWrapper.tsx 6 KB
• remotion/components/index.ts 1 KB
• schemas/README.md 8 KB
• schemas/animation.schema.json 5 KB
• schemas/assets.manifest.schema.json 6 KB
• schemas/character.schema.json 16 KB
• schemas/direction.schema.json 4 KB
• schemas/emphasis.schema.json 9 KB
• schemas/scenario.schema.json 4 KB
• schemas/scene.schema.json 8 KB
• schemas/validate-schemas-basic.js 3 KB
• schemas/validate-schemas.js 7 KB
• schemas/video-script.schema.json 8 KB
• schemas/visual-patterns.schema.json 14 KB
• schemas/examples/scenario-example.json 2 KB
• schemas/examples/scene-example.json 2 KB
• schemas/examples/video-script-example.json 5 KB
• schemas/examples/visual-patterns/comparison-example.json 1 KB
• schemas/examples/visual-patterns/concept-example.json 2 KB
• schemas/examples/visual-patterns/flow-example.json 2 KB
• schemas/examples/visual-patterns/highlight-example.json 1 KB
• scripts/README.md 7 KB
• scripts/generate-schemas.js 6 KB
• scripts/load-assets.js 14 KB
• scripts/merge-scenes.js 15 KB
• scripts/render-video.js 14 KB
• scripts/template-registry.js 10 KB
• scripts/validate-scenario.js 8 KB
• scripts/validate-scene.js 4 KB
• scripts/validate-video.js 13 KB
• src/schemas/animation.ts 4 KB
• src/schemas/assets.manifest.ts 3 KB
• src/schemas/character.ts 6 KB
• src/schemas/direction.ts 3 KB
• src/schemas/emphasis.ts 5 KB
• src/schemas/index.ts 1 KB
• src/schemas/scenario.ts 3 KB
• src/schemas/scene.ts 5 KB
• src/schemas/video-script.ts 9 KB
• src/schemas/visual-patterns.ts 8 KB
• src/types/README.md 4 KB
• src/types/components.ts 6 KB
• src/types/index.ts 1 KB
• src/utils/README.md 6 KB
• src/utils/converters.js 6 KB
• src/utils/converters.ts 6 KB
• src/utils/index.ts 1 KB
• templates/intro-3min.json 9 KB
• templates/teaser-90s.json 7 KB
• templates/image-prompts/comparison.txt 1 KB
• templates/image-prompts/concept.txt 2 KB
• templates/image-prompts/flow.txt 3 KB
• templates/image-prompts/highlight.txt 3 KB
• tests/asset-loader.test.js 12 KB
• tests/character-schema.test.js 8 KB
• tests/converters.test.js 8 KB
• tests/determinism.test.js 11 KB
• tests/merge-scenes.test.js 17 KB
• tests/schema-validation.test.js 4 KB
• tests/validation-integration.test.js 13 KB
• tests/visual-patterns.test.js 12 KB
• tests/e2e/merge-e2e.test.js 13 KB
• tests/e2e/render.test.js 6 KB
• tests/fixtures/minimal-video-script.json 1 KB