Educational Video Creator

Educational Video Creator

Create professional educational videos with Kurzgesagt/回形针 visual style using Remotion.

Prerequisites

This skill requires remotion-best-practices for Remotion technical implementation.

Check and install (MUST complete before Phase 1):

# Check if already installed, install if not
npx skills list 2>/dev/null | grep remotion-best-practices || npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices

Once installed, read the remotion-best-practices skill to load Remotion API details into context. This is essential — without it, Phase 4 code will have incorrect Remotion API usage.

External dependencies (needed for Phase 4.5 audio generation):

# ffmpeg (provides ffprobe for audio duration measurement)
brew install ffmpeg        # macOS
# apt install ffmpeg       # Linux

# edge-tts (Python TTS engine for narration generation)
pip install edge-tts

Project Setup

This skill creates videos in a dedicated remotion_video subdirectory within the current workspace.

First-time setup (recommended — non-interactive):

# Create video project directory
mkdir -p remotion_video
cd remotion_video

# Initialize without interactive prompts
npm init -y
npm install remotion @remotion/cli @remotion/google-fonts @remotion/transitions react react-dom
npm install -D typescript @types/react

# Create minimal project structure
mkdir -p src public/audio/narration

Then create the required entry files:

• src/Root.tsx — Main composition registry
• src/index.ts — Remotion entry point with registerRoot(Root)
• remotion.config.ts — Remotion configuration
• tsconfig.json — TypeScript config

Alternative (interactive — may block in automated environments):

mkdir -p remotion_video && cd remotion_video
npx create-video@latest --blank
npm install

Note: npx create-video may prompt for project name, package manager, etc. In CLI/automation contexts, use the non-interactive method above to avoid blocking.

Existing project:

cd remotion_video
npm install  # Ensure dependencies are installed

Project structure:

your-workspace/
├── remotion_video/           # Video project root
│   ├── src/
│   │   ├── Root.tsx          # Main composition registry
│   │   └── YourVideo/        # Video-specific components
│   │       ├── index.tsx
│   │       ├── scenes/
│   │       └── components/
│   ├── public/               # Static assets
│   └── package.json
└── ... (other workspace files)

Quick Start

1. Setup project → create remotion_video directory if needed
2. Gather requirements → confirm topic, audience, duration
3. Write script → complete narrative with story arc and pacing
4. Create storyboard → break script into visual scenes with animation specs
5. Design visuals → apply style guide, create SVG components
6. Implement animations → code scenes in Remotion
7. Quality assurance → auto-check, auto-fix, auto-start preview

⚠️ Context Recovery Protocol

Every conversation turn may follow a context loss (compaction, new session). Before doing ANY work:

1. Check if remotion_video/PROGRESS.md exists

• If YES → Read it completely to determine current phase and last completed step
• If NO → This is a new project, proceed to Phase 1

1. Read supporting files referenced in PROGRESS.md (only if that phase is marked complete):

• remotion_video/script.md (if Phase 1.5+ completed)
• remotion_video/storyboard.md (if Phase 2+ completed)
• src/<Composition>/constants.ts (if Phase 3+ completed — contains COLORS, SCENES, NARRATION, AUDIO_SEGMENTS)

1. Verify files listed in "Files Created" section actually exist on disk
2. Resume from the first unchecked item in the current phase

Skipping this protocol causes repeated work or file corruption. Always run it first.

Progress Tracking — Mandatory Protocol

⚠️ This protocol is NON-NEGOTIABLE. Skipping updates causes context loss and repeated work.

Maintain remotion_video/PROGRESS.md using progress-template.md. Create it at Phase 1 start. Log decisions in the Decisions table and add every created file to "Files Created".

Checkpoint Rule

Every time you complete a checkbox item in PROGRESS.md, you MUST immediately:

1. Mark the item [x] and add brief notes
2. Update the "Current State" section (Current Phase + Current Step)
3. Then — and only then — proceed to the next item

Do NOT batch multiple items. One item done → one update → next item.

Phase Transition Gate

Before starting any new Phase, you MUST:

1. Read PROGRESS.md and verify ALL items in the previous phase are [x]
2. Update "Current Phase" to the new phase
3. If any previous item is unchecked, complete it first

Workflow

Phase 1: Requirements Gathering

⚠️ First: Complete the Prerequisites section (install remotion-best-practices skill and read it). Then create remotion_video/PROGRESS.md from progress-template.md and fill in Project Info.

Before starting, confirm these essential details with the user:

• Topic: What concept/subject to explain?
• Audience: Who is watching? (children/adults, beginners/experts)
• Language: Chinese/English/other?
• Duration: Short (1-3min), Medium (3-5min), or Long (5-10min)?
• Key points: What must the viewer learn?

For detailed question templates, see requirements-guide.md.

Phase 1.5: Script Writing

⚠️ Checkpoint Rule active: After completing EACH checkbox item for this phase, immediately update PROGRESS.md. Do not batch updates.

Write a complete narrative script before designing the storyboard. This phase focuses purely on storytelling — what to say and how to say it well — without worrying about visual specs, frame numbers, or animation parameters.

IMPORTANT: Write the FULL narration text — every word that will be spoken. Do NOT write summaries, bullet points, or placeholders. The script is the final spoken content.

The script must include:

1. Core message — one-line summary, learning objectives
2. Narrative strategy — apply techniques from script-and-narration.md:

• Entry angle (question / scenario / challenge / story)
• Core metaphor that runs through the entire video
• Knowledge scaffolding order (what depends on what)
• Emotional curve (curiosity → understanding → wonder → satisfaction)

1. Full narration text — complete word-for-word script for every chapter:

• Include emphasis markers (bold for stress, italic for softer tone)
• Mark pauses with [.] (short), [..] (medium), [...] (long), [PAUSE] or [BEAT] (dramatic) — see script-and-narration.md Part 3 for duration semantics
• Add visual intents after each chapter (1-2 sentences describing what viewers should see — enough for Phase 2 to design scenes, but no animation specs)

1. Pacing notes — where to speed up, slow down, and pause
2. Self-review — run through the checklist in script-and-narration.md before presenting to user

Quality gate: Present the complete script to the user for approval. Do NOT proceed to Phase 2 until the user explicitly approves the narrative.

Why script first:

• Separates "what to tell" from "how to show" — two different creative activities
• LLM produces better narratives when not simultaneously calculating frame ranges
• Pure text is cheap to iterate; storyboard with animation specs is expensive to revise
• Users can easily review "is the story good?" without wading through technical details

Output: Save the approved script as remotion_video/script.md

See script-and-narration.md for video structure templates, narrative techniques, writing techniques, and TTS notes.

Phase 2: Storyboard Design