Home / All Skills / Content & Media Creation / explainer-video
Content & Media Creation · iart-ai/explainer-video-skills

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.

L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Author iart-aiGitHub iart-ai/explainer-video-skills ↗Stars 26License MIT(仓库根 LICENSE:MIT License / Copyright (c) 2026 iart.ai;.claude-plugin/plugin.json 声明 "license": "MIT",GitHub API license.spdx_id = MIT)Commit 3e2d411b72
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

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.

skills/explainer-video/SKILL.md
An explainer is an argument, not a feature tour.
This rule is the origin of all subsequent constraints, such as 'script-first', 'problem before solution', and 'a single governing metaphor throughout'.

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.

skills/explainer-video/SKILL.md
Write and time the words before you storyboard or animate — it is far cheaper to cut a sentence than a built scene.
Codifying the cost difference between 'rewriting a sentence' and 'rebuilding a scene' into an enforced procedural sequence is the core engineering judgment of this skill.

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.

skills/explainer-video/SKILL.md
| Problem | Name the pain in their words | "That's me." |
The 'internal monologue' column turns abstract structural beats into testable writing goals.

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.

skills/explainer-video/SKILL.md
2. **Storyboard** — one idea per scene.
No backtrack loops are permitted among the six steps, reflecting the cost philosophy of 'lock the copy before building scenes'.

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.

skills/explainer-video/references/script-to-screen-workflow.md
`scene_seconds = line_words / pace + 0.4` (breathing room).
Turns 'how long should the video be' from an intuitive guess into a pre-computable metric before building.

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.

skills/explainer-video/SKILL.md
In Remotion, drive captions from the same timing array used for scene cuts so they never drift.
The 'single timing source' is its concrete mechanism to prevent caption drift, not just an abstract principle.

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.

skills/explainer-video/SKILL.md
A Remotion project with the composition registered (`<Composition>` + zod `schema` + `defaultProps`), all motion frame-driven (no timers / `Date.now()` / `Math.random()`).
Frame-driven discipline is the critical separation from 'web animation': renders snapshot discrete frames, whereas wall-clock animations will flicker or freeze.

2Core Capabilities

01Five-beat narrative arc + rhythmic formulas per beat (fast cuts on Problem/Stakes, punchy Solution, slowest on How, freeze/hold on CTA)
02VO timing math & scene length derivation (2.3 w/s baseline, visual beats ≥1.0s, reverse-calculating word counts from target duration)
03Fillable storyboard template (timecode + VO + visuals + key motion + transition cues + asset manifest)
04Scene-level inline techniques: diagrammatic progressive reveal, kinetic typography keywords, bar growth + counters
05Caption engineering: SRT/VTT rules, max line and character limits, min on-screen duration, and Remotion single timing array-driven sync
06Cross-scene style system locking (unified type scale, single color syntax, consistent easing curve, spec sheet with SAFE zones)
07Remotion rendering & verification loop: still frames for 3 points (using real props instead of defaultProps) → human visual check → encode
08Incidental README demo GIF generation (reusing render capabilities via --codec=gif)

3External Dependencies

KindDependency / Endpoint
clinpx remotion still / render / compositions(帧渲染与编码)
packageRemotion + zod(composition 注册与 props schema)+ React
cliffmpeg / ffprobe(contact-sheet.sh 与 probe-mp4.sh)
clinpx -y playwright(仓库根 seek-shot.sh,网页层兄弟 skill 用)
api无第三方业务 API;配音由用户自备或宿主侧 TTS 产出,skill 只要求把 VO 作为本地静态资源挂载

4Recommended Governance & Evidence

Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
  • 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)
Audit Notes: The assessment target is the skill's own directory (skills/explainer-video/: SKILL.md + references/ + empty 0-byte README.md; no custom scripts, no credential reads, no direct disk writes). The orange tier is triggered by the execution chain: the output contract mandates rendering MP4s via `npx remotion still/render`. npx fetches and executes the Remotion CLI and @remotion/* packages from the npm registry, running the project code locally inside a bundle and headless Chromium. This matches the evaluation paradigm: 'dependency on third-party plugins, mirrors, or remote packages' (precedent: remotion-video in the same pack was rated orange for the same reason). The skill itself does not access credentials/env vars, invokes no business APIs, and contains no scraping or exfiltration behavior, so it is not red tier. Trigger condition: occurs only during actual rendering/exporting (pure scriptwriting or storyboarding does not trigger it); if the project locks Remotion into local node_modules and renders offline, the attack surface reduces to 'local execution of project code'.

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

  • Codifies the massive cost difference between 'rewriting a line' vs. 'rebuilding a scene' into an enforced script-first pipeline sequence
  • Pairs narrative beats with the audience's internal monologue, turning abstract structure into verifiable scriptwriting targets
  • Pre-computable duration: formulaic derivation based on VO rate + breathing room prevents mid-production cuts
  • A concrete architectural solution for caption drift rather than vague guidelines: cuts and captions share a unified timing array
  • Best for: Ideal for 30–90 second product, concept, or process explainer videos with voiceover and captions. Best when starting from a single core thesis and needing a reproducible pipeline that ties together script, storyboard, scene construction, captions, and export. Especially suited for production requiring batch re-rendering (variable data or multi-language localization) and an 'estimate-before-building' workflow.
    Not for: Not suitable for voiceover-free, purely visual shorts (use scene-level skills like diagram-animation, isometric-animation, or whiteboard-animation instead); not suitable for long-form or multi-act videos (strictly anchored to 30–90s single-message videos); not suitable for style experiments prioritizing visual flair over message delivery—every rule serves to communicate a single proposition clearly.
    Install Agent-Ready
    ① Verified Mirror 2026-09-28
    Option A · Direct DownloadDownload explainer-video.tar.gz
    sha256: ae5f4f77121acf12…
    Option B · Copy Guide for Agent
    install.json
    Agents automatically download and verify mirrors from this JSON guide.
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 3e2d411b72.