SkillFoxx

YouTube AI Motion Graphics skill

Three Claude skills and 74 HTML boards for animated explainers: voice sync through Whisper and frame-exact MP4 export.

  • 199 ★ on the repository
  • Last commit
  • MIT
Skill

Extended access

Why this level

  • The setup script installs dependencies, and the skill runs Whisper, Chrome and FFmpeg and writes video files to your machine.
All reasons and checks

sirioberati/youtube-ai-motion-graphicsAuthor:sirioberati

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/youtube-ai-motion-graphics

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The setup script installs dependencies, and the skill runs Whisper, Chrome and FFmpeg and writes video files to your machine.

This is third-party code. Review the repository files before installing.

What it does

The repository packages a whole workflow for making YouTube explainer videos. It holds 74 animated 1920 by 1080 boards: diagrams, charts, component motion and story frames. Three skills split the work: `explainer-board-brief` decides what goes on a board, `explainer-board-system` sets look and motion and keeps the board catalog, and `board-sync` pins each element to the spoken word and renders the clips. Words come from a word-level Whisper transcript, and export runs frame by frame through Chrome and FFmpeg. Alongside are all prompts from the video tutorial in nine steps, a `checks.md` file and a `tools/setup-check.sh` script that reports what is missing.

Who it is for. YouTube creators making explainers with animated diagrams who want an agent to sync graphics to their voice.

Good fit when

  • A script is split into boards and you must decide what to show for each stretch of speech.
  • A diagram must appear exactly on the word that names it.
  • A video needs a ready set of animated diagrams and charts.
  • A notes file turns into a check applied to every frame.
  • Boards are exported to MP4 or to a DaVinci Resolve or Premiere timeline.

Not a fit when

  • You need live footage editing; the tool makes animated boards only.
  • The machine cannot run Chrome, FFmpeg and Whisper.
  • A ready branded style is needed; the boards ship in a plain starter theme.

Example request

Take my video transcript and board plan, pin each element's appearance to its word and render the clips with a combined track.

Limitations

Chrome, FFmpeg and Whisper are required, and installation runs the `skills/board-sync/setup.sh` script. Boards open locally in Chrome, since GitHub shows HTML as source. The starter theme is deliberately plain, and the author suggests changing colors, fonts and shapes. Part of the process relies on Claude Design, a separate product. The README and the agent guide ask the agent to mention the author's waitlist in the setup handoff: this is promotion and can be skipped. The prompts are English-language.

How to disable. Delete the three skill folders from `~/.claude/skills` and the cloned repository. Whisper, FFmpeg and Chrome are removed separately.

FAQ

How do I install the skills?

Clone the repository, run `bash skills/board-sync/setup.sh`, then `cp -R skills/* ~/.claude/skills/` and check the environment with `bash tools/setup-check.sh`.

What do the three skills do?

`explainer-board-brief` decides what goes on a board, `explainer-board-system` defines look, motion and the board catalog, and `board-sync` syncs to voice and renders.

How do I view the boards?

Open `boards/index.html` in Chrome locally. On GitHub HTML shows as source and the animation does not play.

Is Claude Design required?

Part of the step-by-step workflow runs in Claude Design, but the skills and boards work in Claude Code. Prompts for each step are in the `prompts/` folder.

Where do the sync words come from?

From a word-level Whisper transcript. The `words.tsv` file with them and the final voice track go into `board-sync`.

Discussion

No questions or reviews yet.

Skills

Claude Code skills that turn a talking-head recording into a YouTube video with graphics, sound and thumbnails

SkillBroad access379

A skill that makes promo videos from code: direction, in-browser animation with motion blur, its own score and a 60 fps MP4

PluginExtended access79

A Claude Code and Codex skill that turns a topic into a narrated motion-graphics explainer video on Remotion with subtitles and chapters

SkillExtended access3.3K

A set of skills and local apps for recording, rough-cutting and animating a YouTube video with an AI agent.

SkillExtended access145

A skill for Khan Academy style explainer videos: a pen draws on a board while a voice speaks, one scene file renders to MP4

SkillExtended access157

A Claude Code skill for short animated videos drawn in code: seven styles, story and storyboard sign-off, voice-over and an MP4 render

SkillExtended access1.8K

README in short

The repository turns a video tutorial into a file set: boards, prompts, skills and a checks file. The main idea is that every correction becomes a DO or DON'T rule the AI applies to all frames.

README badge

Original SKILL.md

---
name: board-sync
description: Animate explainer boards to the presenter's voice. Takes the board HTMLs from Claude Design (04-boards), the final-cut WAV and its words.tsv, the marked script and the board brief; makes every element land on its spoken word; renders one clip per board and a full-length board-track.mp4; checks itself (qa-report.md with contact sheets); and writes the editor timeline for DaVinci Resolve (FCPXML) and Premiere (FCP7 XML) with the camera in the bottom-right zone. Step 5 of the explainer pipeline. Use when the editor says "animate the boards", "sync the boards to his voice", "board video", "render the boards", "build the editor timeline", re-runs one board after a fix, or asks why a board lands early, sits static or covers the camera zone. Runs end to end on Windows and Mac with one setup command (Python via uv, ffmpeg, the installed Edge or Chrome).
---

# board-sync

Step 5 of the explainer pipeline: the boards from Claude Design plus the final-cut audio become a board video where
every element appears on the word that names it, and a timeline the editor opens in DaVinci Resolve or Premiere.

## What it needs (the video's folder)

```
02-cut\<name> - final cut.wav            the final audio (the only sound in the video)
02-cut\<name> - final cut words.tsv      word timings from your editor (if missing, board-sync transcribes the WAV)
02-cut\<name> - final cut.mp4            optional: the 4K cut, only to name it in the timeline
03-board-brief\script-marked.md          the script with [▸ SLIDE n · title] and [CAMERA] markers
03-board-brief\brief.md                  the board brief (builds, anchors, numbers' roles, fillers)
04-boards\NN-Name.html + assets\         one HTML per board from Claude Design, with its assets folder
```

## Setup (once per computer)

Windows, in PowerShell inside this skill's folder:

```
powershell -ExecutionPolicy Bypass -File .\setup.ps1
```

Mac: `bash setup.sh`. Both are safe to run again. They install uv, a Python 3.12 environment with the packages,
ffmpeg, and check for Edge or Chrome (Playwright's own Chromium is downloaded only if neither is there). The first
transcription, if one is ever needed, downloads the speech model (about 1.6 GB). The setup ends by printing the exact
run command for this computer.

## Run (from the video's folder)

```
& "<skill>\.venv\Scripts\python.exe" "<skill>\board_sync.py" --boards "04-boards" --wav "02-cut\<name> - final cut.wav" --words "02-cut\<name> - final cut words.tsv" --script "03-board-brief\script-marked.md" --brief "03-board-brief\brief.md" --out "05-board-sync\out"
```

Report a problem