Hostlife22

Toon Explainer — Testing skill for Claude Code

Testing community

Agent skill and Canvas engine that turns a narrated script into a cartoon explainer video: bean-head characters, painted backgrounds, crowds, maps, fire and rain, rendered to MP4 with Playwright and F.

How to install Toon Explainer

This entry records only its repository, not the path inside it, so there is no exact command to give. Open Hostlife22/toon-explainer and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Toon Explainer does

Agent skill and Canvas engine that turns a narrated script into a cartoon explainer video: bean-head characters, painted backgrounds, crowds, maps, fire and rain, rendered to MP4 with Playwright and FFmpeg.

Alternatives in Testing

  • Cc10x — The Loop Engine for Claude Code — engineer the loop, not the prompt 163 ★
  • Baro — A CLI that turns a goal into a pull request - and a sandbox for testing concurrent AI coding agents on the Moz 120 ★
  • Test Mdl — Test MDL Script 115 ★

README

toon-explainer

Turn a narrated script into a cutout-cartoon explainer video with a coding agent. toon-explainer is a skill and a portable HTML Canvas engine for the look of history and science YouTube channels: bean-head characters in three-quarter view, painted skies, foreground framing, bold outlined lettering, maps, crowds, fire, rain and punch zooms.

**Script → JSON spec → deterministic Canvas render → MP4**

Nine rendered frames from the story films: a rocket explodes on the pad as its chief shields his eyes, a volcano with a face starts to erupt, a thief in a guard's uniform eyes a ruby heart, a girl stands on an out-of-bounds grid, an island turns out to be a smiling turtle, a soldier gapes at a GUN JAMMED popup, a horned shadow with red eyes in the dark, a grinning spiky virus, and a gentleman flips over a banana peel

[Quick start](#quick-start) · [Showcase](#showcase) · [Gallery](https://hostlife22.github.io/toon-explainer/) · [Toolkits for any topic](#toolkits-for-any-topic) · [What the engine draws](#what-the-engine-draws) · [From script to film](#from-script-to-film) · [Documentation](#documentation)

Quick start

Use with your coding agent

Install the skill:

npx skills add Hostlife22/toon-explainer

Give your agent a storyboard and a brief:

Use toon-explainer to animate this script. Cold, investigative tone, 3/4-view characters, a foreground plane in every shot. Render a contact sheet first.

The [skill](SKILL.md) turns each storyboard shot into a spec shot, picks a shot recipe for every line, renders a contact sheet for review and then the film. It also re-times the film to a recorded voiceover.

Render locally

Install [uv](https://docs.astral.sh/uv/) and FFmpeg, then clone the repository and install Chromium:

git clone https://github.com/Hostlife22/toon-explainer.git
cd toon-explainer
uv run --with playwright playwright install chromium

Preview an exa

Related Skills

Canvas Explainer Videos — Testing skill for Claude Code

Canvas Explainer Videos

Generate narrated explainer videos purely from code - one Canvas HTML file draws every frame, Web Audio synthe

Testing community
Motion Explainer — Testing skill for Claude Code

Motion Explainer

A Claude Code skill for making narrated motion-graphics explainer videos entirely in code with Remotion: resea

Testing community
Pich — Testing skill for Claude Code

Pich

Drop a raw video, get a finished Reel. /pich turns a talking-head clip into a captioned, edited vertical video

Testing community
AI Film Director — Testing skill for Claude Code

AI Film Director

Agent Skill that turns Claude (or any Agent Skills–compatible agent) into an AI film director: script → projec

Testing community
Fire Planner — Testing skill for Claude Code

Fire Planner

FIRE planning knowledge base for Claude Code — multi-currency, all FIRE variants, stress testing, and internat

Testing community
Rule Conditions — Testing skill for Claude Code

Rule Conditions

Generate a custom Alfresco rule condition evaluator with parameter definitions, Spring bean registration, and

Testing community

Related Agents

Demo Producer — Development agent for Claude Code

Demo Producer

Storyteller and producer for polished product demo videos. Turns your narrative into a scripted, narrated, mus

Development community
YouTube Video Assembler — Development agent for Claude Code

YouTube Video Assembler

Turns a finished episode's script.md + visuals/.png + visuals/.mp4 + an already-generated voiceover.wav into a

Development community
Video Director — Development agent for Claude Code

Video Director

A specialized video production director that orchestrates the full pipeline from concept to rendered MP4. Dele

Development community