skill

explainer-shorts

Vertical (9:16) explainer videos from a Markdown script. Every frame, sound and note generated by code.

xiaoye-motdore/explainer-shortscommunitylistedunreviewed

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/xiaoye-motdore/explainer-shorts itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 22, 2026

"The output format I am most bullish on is fully custom / bespoke explainer videos generated on any arbitrary topic." — Andrej Karpathy, Oct 2 2026

This skill makes those videos in 9:16, ready for TikTok, Reels, Shorts, Douyin and Xiaohongshu.

You write about 30 lines of Markdown. The engine handles layout, reading-speed timing, camera moves, handwriting, doodles, sound, loudness and encoding.
Everything is code. It uses no stock footage, no video-generation model and no text-to-speech. Web Audio synthesizes the pencil scratches, pops, bells and music bed from the same timeline as the picture.
Chinese first, English works too. Text is revealed character by character, CJK punctuation is never left alone at the start of a line, and the Chinese fonts are installed on first run.
Made for facts. The linter warns when a screen states a number without a ^ source line.
Three looks, or your own: notebook (French school notebook, blue ink, red pen), night (dark sky, white kinetic type, gold) and chalk (blackboard). A new look is one CSS file.

Install

In Claude Code:

/plugin marketplace add xiaoye-motdore/explainer-shorts
/plugin install explainer-shorts@explainer-shorts

To install without the plugin system, copy skills/explainer-shorts/ into ~/.claude/skills/.

Requirements: Node 20+, ffmpeg, and Chrome or Chromium (run setup --browser if you have neither). On first run the skill downloads its fonts and renderer (about 120 MB) into ~/.cache/explainer-shorts.

Status: v0.1. Tested on Linux. macOS and Windows should work but have not been tested yet; issues are welcome.

Use

Ask Claude:

Make a 45-second vertical video explaining why the sky is blue.

Claude writes the script, lints it, looks at a contact sheet of frames, then renders. You can also run the CLI yourself:

node skills/explainer-shorts/scripts/es.mjs lint    my-topic.md   # duration + warnings
node skills/explainer-shorts/scripts/es.mjs preview my-topic.md   # 12-frame contact sheet
node skills/explainer-shorts/scripts/es.mjs render  my-topic.md   # MP4 + covers

A script

---
title: Why is the sky blue?
theme: night
author: your-name
---

# Sunlight is white.
# Why is the sky blue?
> Ask a physicist, get one word.

## The guess
~~It reflects the ocean?~~
~~Air is blue?~~
!! Scattering

## The rule
[rule] Scattering ∝ 1/λ⁴
= (700 / 450)⁴ ≈ 5.9
> Blue scatters ~6× more than red.
^ Rayleigh scattering
...
!! So: blue.

Line	On screen
`# text`	Hook / title, written in
`## text`	New screen; the camera moves
`text` · `- text`	Line · bullet
`> text`	Margin note
`~~text~~`	Wrong guess, struck through
`!! text`	Big reveal; numbers count up
`[label] text`	Stamped label
`= text`	Formula, typed out
`^ text`	Source line
`...`	Pause; the music drops out
```svg	Doodle drawn stroke by stroke

The full syntax is in reference/format.md.

Themes

This is the same script rendered as notebook, night, chalk, and a custom rice-paper theme (examples/themes/xuan.css).

A theme is one CSS file. It sets colours, fonts and backgrounds, plus a few engine switches: handwriting or kinetic type, which sound palette, which music. To use your own, put theme: ./my-theme.css in the front matter. See reference/themes.md.

Output

File
`name.mp4`	H.264 1080×1920 at 30 fps, AAC 48 kHz, music + sound effects, −16 LUFS, −1.5 dBTP true peak
`name.no-music.mp4`	Same picture with sound effects only, so you can add platform music
`name.cover-9x16.png`, `name.cover-3x4.png`	Covers
`name.report.json`	Duration, frame count, render time, loudness, warnings

Measured on a 2-vCPU cloud VM with no GPU:

Video	Frames	Render time
60 s, notebook	1,811	168 s
65 s, night	1,959	118 s

How it works

script.md ─► parser ─► timing (reading speed) ─┬─► headless Chromium: layout, measure, camera plan
                                               │      └─► renderAt(t) per frame ─► JPEG ─► ffmpeg (H.264)
                                               └─► Web Audio OfflineAudioContext: SFX + music from the same events
                                                      └─► two-pass loudness normalisation ─► mux

Frames are deterministic: renderAt(t) is a pure function of time, so any frame can be rendered on its own. Previews take seconds.

Roadmap

Narration with ElevenLabs or a local TTS, with the text timed to the voice
Background scripts for animated backgrounds (shaders, 3D) in themes
Built-in chart blocks (bar, line, counter)

License

MIT. The fonts are LXGW WenKai, Caveat, Noto Sans SC, Space Grotesk and IBM Plex Mono, all under the SIL Open Font License. They are installed from npm on first run, not bundled in this repository.