SimonTalk portfolio cover wall with photographic investigation thumbnails and cream hand-drawn whiteboard thumbnails.
Project screenshotsAbout this Skill
whiteboard-video is the hand-drawn explainer workflow in Simon Skills. It turns researched narration into scenes rendered with rough.js, animates strokes in Chromium through Playwright, and uses FFmpeg to assemble video and subtitles. The author describes short landscape episodes of about two minutes, with stickers or official logos, configurable branding and two cover orientations.
Why we picked it
This workflow includes an actual scene DSL and local rendering CLI. Narration, visual elements and covers live in the episode's scenes.js, while shared configuration controls pen motion, subtitles, voice and branding. It is useful for repeatable explainers whose diagrams and wording need to stay editable.
What it helps with
- Short educational explainers that benefit from diagrams appearing alongside narration.
- Creators combining hand-drawn text, arrows, generated stickers and product logos.
- Teams maintaining recurring episodes through editable scene data and shared brand configuration.
Narration becomes editable scenes
Write and check narration before drawing. Each episode's scenes.js defines the spoken beats, visual elements and cover layout. Shared configuration handles brand, subtitle position, pen timing and audio settings. Preview stills expose overlaps and reserved subtitle or watermark areas before the full render.
The CLI generates word-timed speech, renders strokes, assembles video and prepares subtitles, two covers and publishing copy. Scenes can also export Excalidraw files for compatible editing workflows. The Skill prepares the delivery package; it does not post to social platforms automatically.
Production Skill READMEProduction Skill instructionsShared video-common module
Install the production Skill and its shared module
Clone the repository and run the linking command from its root. Keep the repository in place so the links continue to work. Install video-common beside the production Skill: its ../video-common/ references require sibling directories. The commands below use SkillHey's shared Agent directory catalog.
| Command | What it helps with |
|---|---|
git clone https://github.com/trustfuture/simon-skills.git
cd simon-skills | Download the complete repository and enter its root. |
mkdir -p ~/.claude/skills
for s in whiteboard-video video-common; do
ln -sfn "$PWD/skills/$s" ~/.claude/skills/$s
done | Claude Code: install both sibling folders. Final entry: ~/.claude/skills/whiteboard-video/SKILL.md. |
mkdir -p ~/.agents/skills
for s in whiteboard-video video-common; do
ln -sfn "$PWD/skills/$s" ~/.agents/skills/$s
done | Codex CLI: install both sibling folders. Final entry: ~/.agents/skills/whiteboard-video/SKILL.md. |
Simon Skills repository and installationProduction Skill READMEShared video-common module
Configure the renderer and inspect a first episode
Install dependencies inside skills/whiteboard-video and configure its .env from the supplied example. Set brand, narration, subtitle and directory options in config.json. The README supplies a complete sample episode for checking the local environment; generated stickers and TTS use your configured services.
| Command | What it helps with |
|---|---|
cd skills/whiteboard-video
npm install
cp .env.example .env | From the cloned repository, install the renderer and create the local TTS configuration. |
bin/wb new "My first explainer"
bin/wb stills "My first explainer"
bin/wb build "My first explainer" | Create an episode, edit its scenes.js, inspect stills and then build with the configured services. |
A useful first request
Use whiteboard-video to explain why a personal plan can fail after the first week. Keep it around two minutes, use our brand and a calm conversational voice, cite the factual claims and show scene stills before rendering. Deliver the video, subtitles, landscape and portrait covers, and publishing copy.
Author examples, branding and license
The first gallery image is the requested hero-wall.jpg cover wall. The second retains the author's cover example; the third is the user-supplied screenshot of nine covers for this workflow. Display images are resized to WebP and retain their original branding. New projects can configure their own brand.
Code and documentation use the repository's MIT license. The README separately identifies font and third-party material terms, and reserves the author's published portfolio for display. Keep required license notices and use suitable assets when producing your own episodes.
Simon Skills repository and installationProduction Skill READMEAuthor's hero cover wallRepository MIT license
Before you use it
- A local coding agent with filesystem access and shell execution. The author documents Claude Code and Codex; browser-only chat cannot run this production pipeline.
- Both production Skills require the sibling video-common module and a configured Volcano Engine TTS account. AI services, speech synthesis and supplied media have their own costs and terms.
- Node.js 20.12+, FFmpeg and Playwright Chromium. Codex CLI is used for the optional image-generation step and needs its own login and quota.
- The author tested macOS. Linux is described as likely to work, with the wb open command requiring adaptation. Music is supplied separately; the pipeline can render without it.
Supported agents
Frequently asked questions
Does it publish the finished video automatically?
The upstream workflow stops at the finished video and publishing package. You review it and choose where and when to publish.
Is video-common optional?
Both production Skills reference its files using sibling paths. Install it beside the production Skill and keep the repository available.
Sources & references
Original sources are linked below. Practical starting points are editorial suggestions from SkillHey.
