Whiteboard Explainer Skill

What you get

1080×1920 (9:16) or 1920×1080 (16:9) / 30 fps whiteboard MP4 and a cover image
Hand-drawn wobble lines, marker growth, highlighter strokes and an eraser cross-out animation
Synchronous Canvas 2D animation project, captions and source
Volcengine TTS narration with scene timing aligned to the audio

You will need

Node.js 22+, FFmpeg and FFprobe
HyperFrames 0.8.181 (downloaded on demand)
Optional Volcengine TTS credentials and voice ID (falls back to local macOS say when not configured)

Good fit

Distributed systems, middleware and microservice topology changes
High-concurrency problems, deadlock analysis and algorithm walkthroughs
Whiteboard-style design reviews and short videos from tech blog posts

Not for

Live-action footage or full 3D rendering
Videos where every scene looks the same and nothing evolves

You say

“Use Whiteboard Explainer to make a hand-drawn technical architecture video. Follow the interactive storyboard protocol: confirm the single-node, cluster-topology and data-flow scenes in turn, then render and run the visual checks.”

After installing, say something like this to your agent with your own topic and assets. It asks only for what is missing.

FAQ

Do I need an account?

No. Copy the install prompt into your agent, or download the free ZIP.

What does it cost to run?

The Skill is free. It needs the tools listed under “You will need”. Any voice, model or media service you choose bills you directly; FeedSkills does not include provider credits.

Can I use the videos commercially?

Videos you make are yours to use, including commercially. The Skill package is licensed as: MIT. Fonts, music, footage and services you add keep their own terms.

Which agents does it work with?

Agents that read SKILL.md files, such as Codex or Claude Code. What FeedSkills has actually tested is listed under Tested scope below.

Tested scope

Version: 0.2.2
Acceptance: Acceptance for this version is still pending. It remains installable; check what has been tested before relying on it.
Tested: Example renders at 1080×1920 and 1920×1080 / 30 fps produced with HyperFrames 0.8.181; narration via user-provided Volcengine TTS voice; includes an automated check that adjacent scenes differ visually.
Runs on: Claude Code · Codex · macOS · Node.js 22+ · FFmpeg
License: MIT

Details

Make the explanation visible

Bring one question, the audience and supporting sources. Your Agent breaks the explanation into beats and draws the relationships as they are explained: a process changes state, a comparison gains labels, or a causal chain builds step by step.

The package preserves Simon’s scene DSL and progressive stroke renderer. It produces an editable scene project, beat stills, video, conditional captions, covers and a publishing draft. Publishing remains a separate action.

Voice and service choices

Scenes and video render locally with Node.js, Playwright and FFmpeg after installation. Volcengine narration requires your own account and may incur charges. The macOS voice fallback is useful for checking the local pipeline and timing, but it is a different voice path and does not produce word-timed captions. Optional image generation uses your configured tool and quota. No music, stock media or provider account is included.

Revise one idea, reuse the workflow

Keep projects outside the installed Skill. Scene names and beat boundaries identify local revisions; save the old output before changing a diagram or narration. For another subject, write a new question and scene source rather than swapping only the title.

Check every changed diagram, caption region and transition. Technical render checks, listening, factual review and provider calls are recorded separately; see the tested scope for what this version has demonstrated.

Preview availability

A video preview for version 0.2.x is not available yet. The earlier 0.1.0 demonstration is not presented as a preview of this version.