Khan Explainer

Use when the user wants a Khan Academy style explainer video, a blackboard or whiteboard lesson, a hand-drawn chalk-talk animation, a short narrated video that teaches a concept ("explain X in a video", "explainer video", "teach X in 30 seconds"), or a tutorial that draws hand-written arrows, circles and captions over product screenshots ("draw over the UI", "annotated walkthrough"), or clips cut from a YouTube video or podcast where the speaker's real audio plays under a blackboard drawn to it ("khanify this video", "clip this with the Khan visual"), especially when it must be free, local, an

149 stars 31 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add haiderfarooq3/khan-explainer --skill khan-explainer

Manual install

git clone --depth 1 https://github.com/haiderfarooq3/khan-explainer.git /tmp/khan-explainer
mkdir -p ~/.claude/skills
cp -r /tmp/khan-explainer/. ~/.claude/skills/khan-explainer

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Khan Explainer

A pen draws while a voice explains. Three modes, one renderer:

- **Blackboard lesson.** A diagram drawn on a black board, Khan Academy style.
- **Draw-over-UI tutorial.** Arrows, circles and numbered captions drawn over product screenshots.
- **Real-audio clip.** A real person's voice, cut from a video, with the board drawn to their words. See "Real-audio clips".

One scene file in, one MP4 out, in seconds. Free and local: HTML canvas, Playwright, macOS `say`, ffmpeg. No keys.
Every mode renders as chalk on a blackboard or marker on a whiteboard, landscape or vertical.

Made by Haider Farooq ([github.com/haiderfarooq3](https://github.com/haiderfarooq3/khan-explainer)). Free for anyone to use and change (MIT).

**Core principle: the voice drives the clock.** A scene is a list of beats. A beat is one spoken clause plus the drawing that happens while it is said. The renderer speaks each beat first, measures it, and fits that beat's drawing to it. Never hardcode seconds or guess when a word lands.

## Workflow

1. **Script the beats.** One idea per beat, split at commas and full stops. Check the length formula below.
2. **Plan the picture.** Lesson: lay out the whole board. Tutorial: capture the stills and their rectangles. Each has a section below.
3. **Write `scene.js`** in a scratch folder. Copy `examples/ai-agents.js` for a lesson or `examples/ui-tutorial.js` for a tutorial.

Read the full skill on GitHub

Details

Skill name: khan-explainer
Repository: haiderfarooq3/khan-explainer
License: MIT
Repo updated: 11 October 2026

FAQ

What does the Khan Explainer skill do?

How do I install the Khan Explainer skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add haiderfarooq3/khan-explainer --skill khan-explainer. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Khan Explainer popular?

It lives in haiderfarooq3/khan-explainer, which has 149 GitHub stars and 31 forks.

Related skills

HTML to Video

166

wx4766/html-to-video

把 HTML/Canvas 动画逐帧渲染成 MP4（可配乐、可出 GIF、可出透明层）。当用户说「用代码做视频」「HTML 转视频」「导出 MP4/GIF」「做个动态图解/宣传片/数据动画」「逐帧渲染」时使用。自带渲染器与 11 个开箱即用模板（含多镜头讲解片、竖屏 9:16、前后对比、流程图、字幕卡）、图标/人物/运镜素材库，支持透明输出、外部字幕时间轴与 JSON 镜头表，装好依赖后一条命令出片。

Images, Video & Audio13

Hbg Life Simulation

150

Mr-funny/hbg-life-simulation

Create Chinese HBG “模拟人生 / 人生副本” narrative videos with a consistent comic IP, a rapid multi-life opening, continuous natural-speed narration, synchronized short captions, dense static manga storyboards, audible fixed-level BGM, alternating zoom/pan motion in HyperFrames, and a consent-gated localhost-only account-backed Images API through CLIProxyAPI as the preferred image channel. Use for 模拟人生、人生副本、统一主角漫画、快闪职业开头、旁白配图、静态漫画分镜、zoom 推拉、左右平移、Edge TTS、字幕压制、本地反代自己的 Codex 账号、CLIProxyAPI，或把长篇中文人生故事组装成视频。

Images, Video & Audio27

Find Broll

141

louisedesadeleer/b-roll-finder

Source b-roll for a video edit — classify each moment, scope the search, return vetted candidates, place on the word. Use when the user says "find b-roll", "/find-broll", "source clips for this edit", or wants footage/memes/screenshots to lay over a talking-head video.

Images, Video & Audio23

Hyperframes Motion Reel

161

Sunwood-ai-labs/hyperframes-motion-reel-skill

ショーリール品質（Behance / OFFF / Awwwards級）のモーショングラフィックス動画を HyperFrames（HTML + GSAP + SVG + Canvas、Apache-2.0）で制作する。remotion-motion-reel の HyperFrames 版で、Remotion の Company License が不要な構成。テーマ・素材（キャラクター画像、音声など）から世界観・コピー・デザインシステム・タイムライン・サウンドを補完し、120BPM/60fps で拍同期した映像を実装・レンダリングまで行う。「HyperFramesでかっこいい動画」「ライセンスフリーでモーショングラフィックス」「ショーリールをHTMLで」などの依頼時に使用。

Images, Video & Audio24

Social Captions

145

rediumvex/social-media-caption-generator-claude

Write algorithm-optimized captions/descriptions for social media posts and reels. Supports Instagram (Reels, Feed, Carousel), TikTok, Threads, Facebook, and YouTube Shorts. The user sends material (text, image, script, competitor post, screenshot) and gets ready-to-use captions for ALL platforms at once, in English. Use when asked to "write a caption", "write a description", "caption for instagram", "описание к посту", "подпись для рилса", "описание для тикток", "caption for reels", "social media post", or any caption/description writing task. Also triggers when user sends an image, screenshot

Images, Video & Audio18

Ruic Motion Reel

175

HRuiCcc/RuiC-motion-reel

用代码生成 15 秒动态图形（Motion Graphics）成片，默认交付 1920×1080 / 30fps：自研渲染引擎（超采样矢量/文字 + bloom/色差/颗粒）、真 3D 点云渲染、丝网印/riso 四色分色、代码合成配乐，画面与音乐全部由代码产出、不用任何外部美术素材、不用 AE。视觉语言有 16 张牌，默认随机抽一张（轻的、非 3D 的、编辑排版/手绘/纸艺/标本那类一样做），不默认做最炫的那一支。当用户说「用代码做个动效视频/动态图形/motion graphics」「生成一条 15 秒作品集样片/产品片/宣传短片」「按某种风格做视频」「给某个品牌/产品做一条片子」「复刻某条动效片的风格」，或要改已有片子的品牌、配色、节奏、镜头时使用。触发词：动效视频、动态图形、motion graphics、作品集样片、产品片、15 秒视频、1080p30、代码生成视频、ruic-motion-reel。

Images, Video & Audio17

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.