# AI use cases for Khan Explainer (haiderfarooq3/khan-explainer)

Repo: [haiderfarooq3/khan-explainer](https://github.com/haiderfarooq3/khan-explainer) | Use cases: 4 | Page: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/

A Claude Code skill that turns a written description into a Khan Academy style explainer video, with a pen drawing on a board while a voice explains, rendered locally to MP4.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Make a Khan-style explainer video from one sentence: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/explainer-video-from-a-topic/
- Draw arrows and steps over screenshots for a product tutorial: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/tutorial-drawn-over-product-screenshots/
- Cut a YouTube video or podcast into vertical shorts: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/narrated-clips-from-a-youtube-video/
- Make a lesson board in Arabic, Urdu, Hebrew or another language: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/lesson-in-right-to-left-or-other-languages/

## How to make a Khan-style explainer video from one sentence with Khan Explainer

Repo: [haiderfarooq3/khan-explainer](https://github.com/haiderfarooq3/khan-explainer) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README

Describe a topic to Claude Code and get a drawn-and-narrated MP4 rendered on your Mac.

**Who it is for:** A teacher, course creator or developer who needs a short explainer on a concept and has no video editor.

**The problem:** Producing a whiteboard-style explainer normally means recording, drawing and editing by hand.

**The outcome:** An MP4 of a diagram drawn stroke by stroke while a voice explains it, plus a contact sheet of every beat.

### Steps

1. Install ffmpeg on macOS with `brew install ffmpeg`.
2. Clone the skill into Claude Code's skills folder with `git clone https://github.com/haiderfarooq3/khan-explainer ~/.claude/skills/khan-explainer`.
3. Install dependencies with `cd ~/.claude/skills/khan-explainer/scripts && npm install && npx playwright install chromium`.
4. Ask Claude Code: Make a 30-second Khan-style explainer on <topic>.
5. Open the MP4 and the contact sheet path that the render prints, and check the layout on each beat.

### Prompt to paste into your agent

```text
Using the khan-explainer skill in ~/.claude/skills/khan-explainer, write a 30-second Khan-style explainer scene about <topic> and render it to an MP4. Confirm the render prints a contact sheet path and that the MP4 plays with narration and drawing in sync.
```

### Caveat

The skill's built-in voice is the macOS say voice, so the narration sounds like a system voice unless you add an optional voice.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/explainer-video-from-a-topic/

## How to draw arrows and steps over screenshots for a product tutorial with Khan Explainer

Repo: [haiderfarooq3/khan-explainer](https://github.com/haiderfarooq3/khan-explainer) | Difficulty: Intermediate | Time: 45 minutes | Basis: From the README

Turn product screenshots into a narrated tutorial with arrows, circles and numbered steps.

**Who it is for:** A product manager, support lead or founder who must show a new user how to complete a task in the app.

**The problem:** Screen recordings are slow to re-make after each UI change, and static screenshots do not explain the order of steps.

**The outcome:** A tutorial MP4 where arrows, circles and numbered steps are drawn over your screenshots while the voice explains each one.

### Steps

1. Complete the install steps: `brew install ffmpeg`, then `git clone https://github.com/haiderfarooq3/khan-explainer ~/.claude/skills/khan-explainer`, then `cd ~/.claude/skills/khan-explainer/scripts && npm install && npx playwright install chromium`.
2. Run the example to see the draw-over-UI mode: `cd ~/.claude/skills/khan-explainer` and `node scripts/render.js examples/ui-tutorial.js tutorial.mp4`.
3. Ask Claude Code: Draw over these screenshots and show a new user how to send their first invoice, and give it the screenshot files.
4. Review the contact sheet path printed by the render to check that each arrow lands on the right element before you share the MP4.

### Prompt to paste into your agent

```text
Using the khan-explainer skill, build a draw-over-UI tutorial from the screenshots in <screenshot folder> that shows a new user how to <task>. Expected output is a tutorial MP4 with arrows and numbered steps drawn over the screenshots. Verify with the contact sheet that every step points at the correct part of the screen.
```

### Caveat

The README points to SKILL.md for the capture recipe for tutorials, so read that file before you prepare screenshots for a real product.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/tutorial-drawn-over-product-screenshots/

## How to cut a YouTube video or podcast into vertical shorts with Khan Explainer

Repo: [haiderfarooq3/khan-explainer](https://github.com/haiderfarooq3/khan-explainer) | Difficulty: Advanced | Time: 1 hour | Basis: From the README

Clip the best moments of a long video into vertical shorts with the speaker's own voice.

**Who it is for:** A creator or marketer who has a long YouTube video or podcast and needs short vertical clips for social channels.

**The problem:** Finding the strongest moments in a long recording and cutting them by hand takes hours.

**The outcome:** Vertical short clips in which the speaker's own voice plays while the board is drawn to their words, rendered in light or dark theme.

### Steps

1. Complete the base install: `brew install ffmpeg`, then `git clone https://github.com/haiderfarooq3/khan-explainer ~/.claude/skills/khan-explainer`, then `cd ~/.claude/skills/khan-explainer/scripts && npm install && npx playwright install chromium`.
2. Install uv from https://docs.astral.sh/uv/ so the clip pipeline can run.
3. Ask Claude Code: Khanify this YouTube video: find the best moments and clip them, light and dark, and give it the video URL as <video URL>.
4. Review each generated short and its contact sheet before publishing.

### Prompt to paste into your agent

```text
Using the khan-explainer clip pipeline, find the strongest moments in <video URL> and render vertical shorts in light and dark themes. Expected output is a set of vertical MP4 clips with the speaker's audio. Verify that each clip's audio and board drawing stay in sync using the contact sheet.
```

### Caveat

The README does not say how YouTube sources are downloaded, so confirm the source setup in SKILL.md and make sure you have rights to reuse the footage before publishing clips.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/narrated-clips-from-a-youtube-video/

## How to make a lesson board in Arabic, Urdu, Hebrew or another language with Khan Explainer

Repo: [haiderfarooq3/khan-explainer](https://github.com/haiderfarooq3/khan-explainer) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Render a board where the writing runs right to left or left to right in many scripts.

**Who it is for:** A language teacher or community educator who needs a lesson written in a script such as Arabic, Urdu or Hebrew.

**The problem:** Most video tools do not draw handwriting correctly in right-to-left or non-Latin scripts.

**The outcome:** A narrated board MP4 with the chosen script written in a face that suits it.

### Steps

1. Complete the install: `brew install ffmpeg`, then `git clone https://github.com/haiderfarooq3/khan-explainer ~/.claude/skills/khan-explainer`, then `cd ~/.claude/skills/khan-explainer/scripts && npm install && npx playwright install chromium`.
2. Render the Arabic example: `cd ~/.claude/skills/khan-explainer` and `node scripts/render.js examples/arabic.js arabic.mp4`.
3. Ask Claude Code for your lesson in the target language, and set `lang` on the scene to the matching code, for example `lang: 'ar'` for Arabic.
4. Run `node tests/run.js` to render the language samples, then open the contact sheet to check the writing direction.

### Prompt to paste into your agent

```text
Using the khan-explainer skill, create a lesson in <language> with the scene set to lang <language code> and render it to an MP4. Expected output is a narrated board MP4 with correct writing direction. Verify with the contact sheet that the text reads in the right direction and is not clipped.
```

### Caveat

The README says the language-matched voice comes from the lang setting, so check the voice output yourself for languages you do not read.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/haiderfarooq3-khan-explainer/lesson-in-right-to-left-or-other-languages/
