skill
b-roll-skills
Add b-roll motion graphics to a talking-head video with your AI coding agent: word-timed transcript, line-by-line plan, graphics drawn from what is said, MP4 with the original sound.
Set up
Skills are installed by placing their folder where your agent loads skills.
The download comes from github.com/iart-ai/b-roll-skills itself, not from our server, so what you get is exactly what its author published.
Install instructions come from the README
README
synced Oct 26, 2026B-Roll Skills
Add b-roll to a talking-head video with your AI coding agent. It transcribes the recording, decides line by line when to show the speaker, when to lay a graphic over them and when to cover them with a full-frame one, draws every graphic from what is actually said, and renders the finished MP4 with the original sound. Your recording is never cut. No After Effects, no stock footage, no templates.
From the compound-interest example: a fresh agent, one sentence ("Add b-roll to my video talk.mp4, I'm posting it on YouTube"), no human edits (the presenter is an AI avatar standing in for a real recording). Every figure on screen is one the speaker says, drawn as she says it. More in examples.
Install
npx skills add iart-ai/b-roll-skills
Or add it as a Claude Code plugin marketplace:
/plugin marketplace add iart-ai/b-roll-skills
then /plugin install b-roll-skills.
Ask for it
- "Here's my talking head video (talk.mp4). Make it more engaging to watch."
- "Add b-roll to lesson-03.mp4, I'm posting it on YouTube. Keep my face on screen for the intro and the outro."
- "Motion graphics for this ad read: show the price and the three features as I say them. I edit in Premiere."
What it does
Every line of the recording gets one of three treatments:
| Treatment | What the viewer sees | Used for |
|---|---|---|
| Speaker | The recording alone | The opening, opinions and stories, the call to action, the closing line |
| Overlay | The speaker, with a small graphic beside them: a key word, a number counting up, a short list | One concrete thing worth seeing while the speaker is still worth watching |
| Cover | A full-frame graphic while the voice carries on: a chart, a comparison, a diagram, a sequence of steps | Lines that are better shown than said by a face |
The graphics are drawn from the transcript: the speaker's own numbers, names and words, never invented ones. Speech anchors land between words; structure can lead those anchors while new key facts synchronize with their words. Overlays stay off the face, and the speaker comes back between full-frame graphics so the video never turns into a slideshow with a voice-over.
The agent chooses timing per visual beat: structure about six frames early, key numbers and final values on their spoken word, and withheld conclusions at their reveal. The template provides both an advanced structure clock (s.now) and the unchanged playback clock (s.audioNow). Six frames is 240 ms at 25 fps or 200 ms at 30 fps; set VISUAL_LEAD_FRAMES = 0 for exact sync. Audio and captions keep their original timing. Existing example pages retain their original timing.
What you get
| File | What it is |
|---|---|
film.mp4 | The finished video: your recording, the b-roll on top, your original sound |
b-roll.webm / b-roll.mov | When you edit in Premiere Pro, DaVinci Resolve or Final Cut: the b-roll alone with a transparent background (VP9 or ProRes 4444), to put on the track above your recording and keep editing |
page.html | The page the graphics are drawn from: open it to play the film with sound and scrub through the scenes; change a word or a timing and render again |
| The plan | A table of time, what is said, treatment, and what is on screen |
How it checks its own work
render.mjs --check reads the plan, the transcript and the pixels of every frame:
- every full-frame graphic hides the speaker completely once it is in;
- no overlay reaches into the box around the speaker's face;
- original speech anchors start and end in gaps between words; graphics may lead those anchors;
- nothing is drawn outside a planned scene;
- and it warns about rhythm: more than about 8 seconds of only the speaker, a full-frame graphic shorter than 3 or longer than 8 seconds, two of them back to back, not opening or closing on the speaker.
Then the agent looks at a contact sheet of the whole film (one frame a second over the real recording) and full-size stills, and fixes what it sees.
What's included
| Path | What it is |
|---|---|
| skills/talking-head-b-roll/SKILL.md | The workflow: transcribe, plan each line, build, check, render |
| templates/b-roll.html | A transparent canvas page: the plan as SCENES, the face box, entrances and exits, text fitting, font loading, and a preview that plays your recording under the graphics |
| scripts/transcribe.mjs | Word-timed transcript with local whisper.cpp (no key) or ElevenLabs Scribe |
| scripts/render.mjs | --check, contact sheets and stills over the recording, the finished MP4, the alpha layer |
Which model
Built and tested with Claude Opus 5.5. Planning leans on reading the whole transcript, and the self-check on a model that can look at images: it reviews its own contact sheet and stills. Other models have not been tested with this pack.
Requirements
Node 18+, npm i playwright-core, ffmpeg, and Chrome (or npx playwright install chromium). For the transcript, either:
- whisper.cpp, local and free:
brew install whisper-cpp, then one model download:
(English; for other languages usemkdir -p ~/.cache/whisper && curl -L -o ~/.cache/whisper/ggml-base.en.bin \ https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-base.en.binggml-small.binor larger.) - or an ElevenLabs API key in
ELEVENLABS_API_KEY.
The scripts find playwright-core installed in your working folder or any folder above it, or next to the skill. Fonts load from Google Fonts, so rendering needs network access.
Topics
b-roll talking-head motion-graphics video-editing youtube whisper transcription claude-skill
More packs
Part of the open-source motion skills collection. Full hub: github.com/iart-ai/motion-skills
License
MIT
Built by iart.ai, the AI motion agent. Rather not run code? Upload your talking-head video at iart.ai/ai-b-roll-generator and ask for b-roll in plain words.