B-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:

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

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

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:

  mkdir -p ~/.cache/whisper && curl -L -o ~/.cache/whisper/ggml-base.en.bin \
    https://huggingface.co/ggerganov/whisper.cpp/resolve/main/ggml-base.en.bin
  

  (English; for other languages use ggml-small.bin or 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 a 19-pack open-source collection: install only what you need. Browse every pack and skill at iart.ai/skills, or the hub at github.com/iart-ai/motion-skills.

tiktok-video-skills (TikTok / Reels / Shorts creators) · text-message-video-skills (Text-message story creators) · youtube-video-skills (Podcasters & YouTubers) · ecommerce-video-skills (E-commerce sellers) · ad-video-skills (Brand advertisers & marketers) · data-animation-skills (Analysts & PMs) · explainer-video-skills (Educators & content creators) · map-animation-skills (Vox-style editorial maps) · web-animation-skills (Frontend developers) · motion-design-skills (Motion designers) · kinetic-typography-skills (Kinetic type / text animation) · freelance-motion-skills (Freelancers & studios) · webgl-animation-skills (3D / WebGL / technical) · manim-skills (Math / educational animators) · generative-illustration-skills (Generative-illustration & creative coders) · javascript-animation-skills (Every frame drawn in JavaScript) · lower-thirds-skills (Streamers, podcasters & editors) · b-roll-skills (YouTubers, course creators & editors) · talking-head-skills (Creators & educators)

Install any of them:

npx skills add iart-ai/tiktok-video-skills
npx skills add iart-ai/text-message-video-skills
npx skills add iart-ai/youtube-video-skills
npx skills add iart-ai/ecommerce-video-skills
npx skills add iart-ai/ad-video-skills
npx skills add iart-ai/data-animation-skills
npx skills add iart-ai/explainer-video-skills
npx skills add iart-ai/map-animation-skills
npx skills add iart-ai/web-animation-skills
npx skills add iart-ai/motion-design-skills
npx skills add iart-ai/kinetic-typography-skills
npx skills add iart-ai/freelance-motion-skills
npx skills add iart-ai/webgl-animation-skills
npx skills add iart-ai/manim-skills
npx skills add iart-ai/generative-illustration-skills
npx skills add iart-ai/javascript-animation-skills
npx skills add iart-ai/lower-thirds-skills
npx skills add iart-ai/b-roll-skills
npx skills add iart-ai/talking-head-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.