explainer-video
This skill should be used when the user asks to "make an explainer video", "turn this into a short explainer", "write a script and storyboard for a product video", "produce a how-it-works/onboarding video", "sync narration and captions", or "build a 30–90s animated explainer". Covers script→storyboard→scene build→narration/caption sync→edit→polish.
1How It Works & Mechanism
Define the explainer video as an 'argument' rather than a feature tour: lock down the narrative before moving any pipeline step, and require a single-sentence core thesis—if it cannot be condensed, cut scope rather than shrinking it.
An explainer is an argument, not a feature tour.
Script-first: VO is the spine; visuals only explain the sentence currently being spoken. Write words and calculate timing first, then sketch storyboards and animate.
Write and time the words before you storyboard or animate — it is far cheaper to cut a sentence than a built scene.
Break the narrative arc into five beats, each paired with the viewer's internal monologue (Problem → Stakes → Solution → How → Payoff/CTA); enforce a single metaphor rooted in the audience's world, forbidding mid-way metaphor swaps.
| Problem | Name the pain in their words | "That's me." |
The pipeline is a fixed six-step sequence (Script → Storyboard → Build scenes → Narration & captions → Edit → Polish); the storyboard stage enforces one idea per scene and maps each VO line to a single visual intent.
2. **Storyboard** — one idea per scene.
Duration is derived mathematically from VO: ~2.3 words/sec (140 wpm) baseline, slowing to ~2.0 for technical sentences. Scene length = word count / speech rate + breathing room; reference values: 30s ≈ 69 words, 60s ≈ 138 words, 90s ≈ 207 words.
`scene_seconds = line_words / pace + 0.4` (breathing room).
Captions are treated as essential (muted autoplay by default), constrained to ≤2 lines, ≤42 chars/line, on-screen ≥1.0s, and required to share a single timing array with cut points in Remotion to prevent drift.
In Remotion, drive captions from the same timing array used for scene cuts so they never drift.
Deliverable is a Remotion project + frame-by-frame rendered MP4: all animations are frame-driven (no Date.now / Math.random / timers); use calculateMetadata when duration depends on props; validation follows still → inspect → encode.
A Remotion project with the composition registered (`<Composition>` + zod `schema` + `defaultProps`), all motion frame-driven (no timers / `Date.now()` / `Math.random()`).
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | npx remotion still / render / compositions(帧渲染与编码) |
| package | Remotion + zod(composition 注册与 props schema)+ React |
| cli | ffmpeg / ffprobe(contact-sheet.sh 与 probe-mp4.sh) |
| cli | npx -y playwright(仓库根 seek-shot.sh,网页层兄弟 skill 用) |
| api | 无第三方业务 API;配音由用户自备或宿主侧 TTS 产出,skill 只要求把 VO 作为本地静态资源挂载 |
4Recommended Governance & Evidence
- scripts/: Execution of local scripts or commands: npx remotion still / render / compositions (specified in SKILL.md and scripts/README.md)
- 网络端点: Declared external network access: fetches fonts from Google Fonts at render time if @remotion/google-fonts is used following remotion-recipes in the same pack
- 本地工作目录: File read/write and artifact output: out/*.mp4 (final renders), out/*.gif, out/f-*.png (still frames)
5Second-Pass Verification
- [ok] 外部依赖调用点复核(npx remotion / ffprobe / @remotion/google-fonts) — SKILL.md Verify loop 实际给出 `npx remotion still Explainer out/f-start.png --frame=0 --props='{...}'` 与 `npx remotion render Explainer out/explainer.mp4`;仓库根 scripts/probe-mp4.sh 确为 ffprobe 实现。@remotion/google-fonts 出现在同 pack 的 wrapped-video/references/remotion-recipes.md,本 skill 只写 `<Audio src={staticFile()}>`,故未把它记为本 skill 的行为。
- [ok] 无凭证 / 无业务 API 反查 — SKILL.md 与 reference 中无密钥、无 endpoint、无上传动作;`staticFile()` 指向项目内静态资源而非远端。判橙依据仅为远程包依赖,非凭据读取。
- [ok] 帧驱动纪律的内部一致性 — SKILL.md 的输出契约、Before-you-finish 第 4 条与另两份文档的「no Date.now() / Math.random() / timers」主张互相一致,并与 Remotion 的逐帧快照渲染模型相符(帧驱动才可 seek、可复现)。
- [ok] VO 数学与叙事两张表的自洽性 — SKILL.md 五拍表(讲「为什么与顺序」)与 Script formula 表(Problem 20% / Solution 15% / How 45% / Payoff 20%,讲「占比预算」)口径可对齐:How 占比最大对应「slowest — hold each step to read」;60s≈138 词与 2.3 w/s 自洽(60×2.3≈138)。
- [ok] 跨目录 / 跨 skill 引用可解析性 — 正文引用的 `scripts/contact-sheet.sh`、`scripts/probe-mp4.sh` 位于仓库根(单装本 skill 目录会悬空,需装整个 repo);把单场景网页动效分流到同 repo 的 diagram-animation,该 skill 确实存在于本 repo 的 skills/ 下,引用可解析。
- [ok] 功能声明 vs 实际能力 — frontmatter 宣称覆盖 script→storyboard→scene build→narration/caption sync→edit→polish 全链,正文六步流水线与 reference 的模板/计时表/字幕规范逐项兑现;未见夸大——未声称能自动配音或自动剪素材。
6Verdict & Scenarios
ae5f4f77121acf12…