SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillseducational-video-creator

educational-video-creator

Design & creation

View repository

Updated 10-16 08:35

About this skill

Educational Video Creator

Use Remotion to create professional educational videos in the visual style of Kurzgesagt / Huixingzhen (回形针).

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
  2. 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)
  3. Verify files listed in "Files Created" section actually exist on disk
  4. 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)
  3. 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)
  4. Pacing notes — where to speed up, slow down, and pause
  5. 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

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

Convert the approved script into a production-ready storyboard. The script provides what to say; the storyboard defines how to show it.

Input: Completed script (approved in Phase 1.5)

Tasks:

  1. Break script chapters into visual scenes (5-15 scenes)
  2. Assign narration text from the script to each scene
  3. Design visual layers for each scene (background / midground / foreground / UI)
  4. Add frame-level animation specifications (spring, easing, timing)
  5. Define visual-narration sync points
  6. Plan the asset inventory (SVG components, colors, typography)

The cognitive load is much lower than creating everything from scratch — the narrative is already decided, so you only need to focus on visual execution.

Output: Save the completed storyboard as remotion_video/storyboard.md for design traceability and iteration reference.

See storyboard-template.md for templates. See script-and-narration.md Part 4 for subtitle formatting and TTS notes.

Phase 3: Visual Design

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

Apply the visual style of Kurzgesagt / Huixingzhen (回形针). Concrete steps:

  1. Choose color palette — Select from design-tokens.ts Section 1 or create a custom palette matching the topic
  2. Create constants.ts — Define COLORS, TYPOGRAPHY, SCENES, NARRATION, and estimated AUDIO_SEGMENTS following design-tokens.ts Section 3
  3. Set up fonts — Use Remotion's loadFont() from @remotion/google-fonts (see design-tokens.ts Section 2 for reference)
  4. Create shared SVG components — Build reusable visual elements (icons, illustrations, decorative elements) following svg-components.md
  5. Design scene layouts — Plan visual layers (background / midground / foreground / UI) per scene following visual-principles.md

Style principles:

  • Flat design with subtle gradients
  • Bold, saturated color palette
  • Geometric shapes with rounded corners (rx/ry)
  • Clean sans-serif typography

See style-guide.md for complete visual standards. See visual-principles.md for composition and layout.

Phase 4: Animation Production

⚠️ Checkpoint Rule active: After completing EACH checkbox item for this phase, immediately update PROGRESS.md. Do not batch updates. Log key file paths in "Files Created".

Implement scenes using Remotion:

  1. Create SVG components for visual elements
  2. Use useCurrentFrame() for all animations
  3. Apply appropriate easing (spring for natural motion)
  4. Add scene transitions

Subtitle & narration rules (critical for Phase 4.5 compatibility):

  • All narration text must be stored in the NARRATION object in constants.ts — never hardcode text directly in scene TSX files
  • Create an estimated AUDIO_SEGMENTS in constants.ts with approximate timing. Phase 4.5 will overwrite it with real audio-based timing
  • Subtitle components must reference AUDIO_SEGMENTS.sceneKey — never use inline segment arrays with hardcoded frame numbers
  • AUDIO_SEGMENTS in startFrame/endFrame must use scene-local frame numbers(each scene starts from SCENE_PAD=15),not global frame numbers. Because both AudioLayer and SubtitleSequence run inside the scene's <Sequence> internally,useCurrentFrame() returns the local frame number. If global frame numbers are used, subtitles in subsequent scenes will be delayed or not displayed at all
  • This ensures rebuild-timeline.ts --write in Phase 4.5 can update timing without modifying any scene files

Visual-narration alignment rules (prevents animation-subtitle desync):

  • Each visual element corresponding to narration content (icon appearance, arrow expansion, chart drawing, etc.), its startFrame must be derived from AUDIO_SEGMENTS of the corresponding segment in startFrame Derive, and cannot be hardcoded based on "visual rhythm"
  • Correct pattern:const liftArrowStart = AUDIO_SEGMENTS.forces[0].startFrame;(lift arrow appears when narration says "lift")
  • Incorrect pattern:const liftArrowStart = 30;(frame counts written by feel, unrelated to narration)
  • Purely decorative animations (background particles, ambient atmosphere) are not subject to this constraint and can be freely timed
  • Phase 4 uses estimated AUDIO_SEGMENTS; after Phase 4.5 rebuild-timeline updates the real timings, because the code references variables rather than hardcoded numbers, the visual animations will automatically sync
  • Refer to animation-guide.md "Narration-Synced Animation" section for the implementation pattern

Element sizing rules (prevents "Thumbnail Syndrome" — tiny elements on a large canvas):

  • Refer to visual-principles.md "Content Area Utilization" to ensure content fills the canvas (core content ≥ 60% of safe area)
  • For default component sizes, refer to svg-components.md(icons ≥96px, flow nodes ≥160px tall, labels ≥40px)
  • Charts/flowcharts should occupy most of the content area, avoiding shrinking into thumbnails on a 1920×1080 canvas

Background rules (prevents transparent/checkerboard frames during transitions):

  • The main composition must have a persistent <AbsoluteFill> background layer (using COLORS.background) that sits behind all scenes and never participates in transitions
  • Each scene component must also have its own solid background as the first child element
  • During fade() transitions, both scenes have reduced opacity — without a persistent background, transparent frames appear as a checkerboard pattern in preview and black in renders
  • See animation-guide.md "Preventing Transparent Frames" for the implementation pattern

Visual richness rules (prevents PPT-like output):

  • Each scene must have at least one non-text visual main element(SVG illustration, chart, animated graphic, etc.). Pure text labels + blocks are not qualified visual content
  • Flowcharts/causal chains must use icons or illustrations together with text, and cannot just use solid-color blocks containing text. Refer to svg-components.md "Illustrated Flow Node" pattern
  • Each scene should have an ambient atmosphere layer(particles, glow, texture, etc.), refer to style-guide.md Ambient Effects section
  • SVG illustrations should reflect the Kurzgesagt style: rounded geometric shapes (rx/ry), flat but layered (multiple overlapping paths), soft gradients (linearGradient/radialGradient), appropriate strokes
  • Refer to visual-principles.md "Show, Don't Tell" principle: concepts that can be expressed with diagrams should not use text blocks
  • Refer to scene-template.tsx The SVG airplane illustration of ForceDiagramScene as the minimum quality standard for concrete illustrations

Color rules (critical for Phase 5 style-scan compliance):

  • All colors must be referenced via the COLORS object from constants.ts (e.g., COLORS.accent.rose) — never write hex values directly in TSX files
  • The only exception is rgba() for opacity variations (e.g., rgba(0, 0, 0, 0.7) for subtitle backgrounds)
  • This prevents the common issue where style-scan reports dozens of "color not in approved palette" warnings

See design-tokens.ts Section 3 for the complete constants.ts structure (COLORS, SCENES, NARRATION, AUDIO_SEGMENTS, font loading). See svg-components.md for component patterns. See animation-guide.md for timing and easing.

Phase 4.5: Audio Generation

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

After completing animation coding, generate the video audio and sync the timeline:

  1. Generate TTS audio — use generate-tts.ts to extract text from NARRATION and generate mp3
  2. Rebuild timeline — use rebuild-timeline.ts --write to update constants.ts based on actual audio durations
  3. Adjust animation keyframes — by newDuration / oldDuration scale proportionally
  4. Add background music — royalty-free BGM to public/audio/bgm.mp3
  5. Create AudioLayer — a component that plays narration + BGM
  6. Integrate and verify — AudioLayer must be outside TransitionSeries outside

For detailed steps, command parameters, and AudioLayer templates, see audio-guide.md。

Phase 5: Quality Assurance

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

After completing coding, execute the automated quality check process:

  1. Code scan → check style compliance (font size, color, safe area, etc.)
  2. Screenshot review → render keyframes, visual inspection
  3. Auto-fix → fix issues based on the inspection report, loop until it passes
  4. Start project → after all checks pass, automatically start the Remotion preview

For detailed check steps and rules, see quality-checklist.md。

Phase 6: Final Export

After preview looks correct, render the final video:

cd remotion_video
npx remotion render src/index.ts <CompositionName> out/video.mp4

Options:

  • --codec h264 (default) or --codec h265 for smaller file size
  • --quality 80 to 100 (default: 80)
  • --scale 1 (1080p) — use --scale 2 for 4K if source assets support it
  • Add --log verbose if debugging render issues

The output file will be at remotion_video/out/video.mp4.

Video Structure

Standard educational video structure:

1. Hook (5-10s)      - Attention-grabbing question or statement
2. Intro (10-20s)    - Topic introduction
3. Content (main)    - Core explanation, broken into segments
4. Summary (10-20s)  - Key takeaways
5. Outro (5-10s)     - Call to action or closing

See script-and-narration.md Part 1 for detailed structure templates.

Key Principles

Content Clarity

  • One concept per scene
  • Build complexity gradually
  • Use visual metaphors for abstract ideas

Visual Simplicity

  • Minimal elements on screen
  • Clear visual hierarchy
  • Consistent style throughout

Animation Purpose

  • Every animation serves understanding
  • Avoid decorative motion
  • Sync with narration pace

Reference Files

File When to Use
requirements-guide.md Starting a new video project (Phase 1)
script-and-narration.md Video structure, script writing, narration, subtitle/TTS (Phase 1.5 + 2)
storyboard-template.md Converting script into visual scenes (Phase 2)
style-guide.md Designing visual elements (Phase 3 + 4)
visual-principles.md Layout and composition decisions (Phase 3 + 4)
animation-guide.md Implementing animations (Phase 4)
svg-components.md Creating reusable components (Phase 4)
audio-guide.md Detailed steps for TTS generation, timeline reconstruction, and AudioLayer integration (Phase 4.5)
quality-checklist.md Quality assurance + style check rules (Phase 5)
design-tokens.ts Color palettes, typography presets, constants.ts template (Phase 3)
progress-template.md Execution progress tracking template (full workflow)
scene-template.tsx Scene component template (Phase 4)
subtitle-sequence-template.tsx Subtitle sequence component template (Phase 4)
common-icons.tsx Generic SVG icon component (Phase 4)
generate-tts.ts Subtitle extraction + TTS audio generation script (Phase 4.5)
rebuild-timeline.ts Audio duration measurement + timeline reconstruction script (Phase 4.5)
style-scan.ts Code style scan script (Phase 5)
render-keyframes.ts Batch keyframe screenshot script (Phase 5)
shared.ts Script shared functions (internal dependencies, no need to call directly)