Help us improve
Share bugs, ideas, or general feedback.
From skind-skills
Creates animated explainer videos with Kurzgesagt-inspired style using Remotion. Handles storyboarding, SVG animation, narration generation via edge-tts, and video rendering.
npx claudepluginhub skindhu/skind-skills --plugin skind-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/skind-skills:educational-video-creatorThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create professional educational videos with Kurzgesagt/回形针 visual style using Remotion.
assets/common-icons.tsxassets/design-tokens.tsassets/progress-template.mdassets/scene-template.tsxassets/subtitle-sequence-template.tsxreferences/animation-guide.mdreferences/audio-guide.mdreferences/quality-checklist.mdreferences/requirements-guide.mdreferences/script-and-narration.mdreferences/storyboard-template.mdreferences/style-guide.mdreferences/svg-components.mdreferences/visual-principles.mdscripts/generate-tts.tsscripts/rebuild-timeline.tsscripts/render-keyframes.tsscripts/shared.tsscripts/style-scan.tsGenerates MP4 motion graphics videos from a content brief using HTML/CSS animations rendered frame-by-frame in headless Chromium via Playwright, assembled with FFmpeg.
Builds reusable Manim explainers for technical concepts, graphs, system diagrams, and product walkthroughs. Use when a clean animated explainer is needed instead of a talking-head script.
Creates animated explainer videos from concepts using Manim (Python) with MP4/GIF output, audio overlay, and multi-scene composition.
Share bugs, ideas, or general feedback.
Create professional educational videos with Kurzgesagt/回形针 visual style using Remotion.
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
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 registrysrc/index.ts — Remotion entry point with registerRoot(Root)remotion.config.ts — Remotion configurationtsconfig.json — TypeScript configAlternative (interactive — may block in automated environments):
mkdir -p remotion_video && cd remotion_video
npx create-video@latest --blank
npm install
Note:
npx create-videomay 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)
remotion_video directory if neededEvery conversation turn may follow a context loss (compaction, new session). Before doing ANY work:
remotion_video/PROGRESS.md exists
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)Skipping this protocol causes repeated work or file corruption. Always run it first.
⚠️ 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".
Every time you complete a checkbox item in PROGRESS.md, you MUST immediately:
[x] and add brief notesDo NOT batch multiple items. One item done → one update → next item.
Before starting any new Phase, you MUST:
PROGRESS.md and verify ALL items in the previous phase are [x]⚠️ First: Complete the Prerequisites section (install remotion-best-practices skill and read it). Then create
remotion_video/PROGRESS.mdfrom progress-template.md and fill in Project Info.
Before starting, confirm these essential details with the user:
For detailed question templates, see requirements-guide.md.
⚠️ 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:
[.] (short), [..] (medium), [...] (long), [PAUSE] or [BEAT] (dramatic) — see script-and-narration.md Part 3 for duration semanticsQuality 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:
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.
⚠️ 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:
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.
⚠️ Checkpoint Rule active: After completing EACH checkbox item for this phase, immediately update
PROGRESS.md. Do not batch updates.
Apply the Kurzgesagt/回形针 style. Concrete steps:
constants.ts — Define COLORS, TYPOGRAPHY, SCENES, NARRATION, and estimated AUDIO_SEGMENTS following design-tokens.ts Section 3loadFont() from @remotion/google-fonts (see design-tokens.ts Section 2 for reference)Style principles:
See style-guide.md for complete visual standards. See visual-principles.md for composition and layout.
⚠️ 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:
useCurrentFrame() for all animationsSubtitle & narration rules (critical for Phase 4.5 compatibility):
NARRATION object in constants.ts — never hardcode text directly in scene TSX filesAUDIO_SEGMENTS in constants.ts with approximate timing. Phase 4.5 will overwrite it with real audio-based timingAUDIO_SEGMENTS.sceneKey — never use inline segment arrays with hardcoded frame numbersAUDIO_SEGMENTS 中的 startFrame/endFrame 必须使用场景本地帧号(每个场景从 SCENE_PAD=15 开始),不是全局帧号。因为 AudioLayer 和 SubtitleSequence 都在场景的 <Sequence> 内部运行,useCurrentFrame() 返回的是本地帧号。如果使用全局帧号,后续场景的字幕会延迟或完全不显示rebuild-timeline.ts --write in Phase 4.5 can update timing without modifying any scene filesVisual-narration alignment rules (prevents animation-subtitle desync):
startFrame 必须从 AUDIO_SEGMENTS 对应段的 startFrame 派生,不能凭"视觉节奏"硬编码const liftArrowStart = AUDIO_SEGMENTS.forces[0].startFrame;(升力箭头在旁白说"升力"时出现)const liftArrowStart = 30;(凭感觉写的帧数,和旁白无关)Element sizing rules (prevents "Thumbnail Syndrome" — tiny elements on a large canvas):
Background rules (prevents transparent/checkerboard frames during transitions):
<AbsoluteFill> background layer (using COLORS.background) that sits behind all scenes and never participates in transitionsfade() transitions, both scenes have reduced opacity — without a persistent background, transparent frames appear as a checkerboard pattern in preview and black in rendersVisual richness rules (prevents PPT-like output):
Color rules (critical for Phase 5 style-scan compliance):
COLORS object from constants.ts (e.g., COLORS.accent.rose) — never write hex values directly in TSX filesrgba() for opacity variations (e.g., rgba(0, 0, 0, 0.7) for subtitle backgrounds)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.
⚠️ Checkpoint Rule active: After completing EACH checkbox item for this phase, immediately update
PROGRESS.md. Do not batch updates.
完成动画编码后,生成视频音频并同步时间线:
generate-tts.ts 从 NARRATION 提取文本生成 mp3rebuild-timeline.ts --write 根据实际音频时长更新 constants.tsnewDuration / oldDuration 比例缩放public/audio/bgm.mp3详细步骤、命令参数、AudioLayer 模板见 audio-guide.md。
⚠️ Checkpoint Rule active: After completing EACH checkbox item for this phase, immediately update
PROGRESS.md. Do not batch updates.
完成编码后,执行自动质量检查流程:
详细检查步骤和规则见 quality-checklist.md。
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--log verbose if debugging render issuesThe output file will be at remotion_video/out/video.mp4.
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.
| 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 | TTS 生成、时间线重建、AudioLayer 集成详细步骤 (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 | 执行进度跟踪模板 (全流程) |
| scene-template.tsx | 场景组件模板 (Phase 4) |
| subtitle-sequence-template.tsx | 字幕序列组件模板 (Phase 4) |
| common-icons.tsx | 通用 SVG 图标组件 (Phase 4) |
| generate-tts.ts | 字幕提取 + TTS 音频生成脚本 (Phase 4.5) |
| rebuild-timeline.ts | 音频时长测量 + 时间线重建脚本 (Phase 4.5) |
| style-scan.ts | 代码样式扫描脚本 (Phase 5) |
| render-keyframes.ts | 关键帧批量截图脚本 (Phase 5) |
| shared.ts | 脚本共享函数(内部依赖,无需直接调用) |