infofilm

A Claude Code skill for making narrated infographic explainer films: 5–15 minutes on how a system works, what happened and what happens next. They are told as a 1950s newsreel of instructional cards, with a silent mascot, a far-too-cheerful narrator, sung commercial breaks, and code-drawn infographics that land on the exact spoken word.

The skill was extracted from a real 13-minute production about a national election. It packages the whole pipeline, the template that renders and the lessons learned the hard way:

research → fact-checked script → narrator (ElevenLabs, per-character timestamps)
         → theme, beds and jingles (Suno) → illustrations (Gemini 3 Pro Image)
         → Remotion scenes cued to words → −14 LUFS master + SRT

Why it works

• Code draws everything that must be true. Every number, title and label is rendered from a fact base (data.ts ← notes/research.md ← primary sources). The image model only supplies mood, setting and the mascot, and every prompt forbids text.
• The animation is timed to speech, not to frames. Scenes say cue("three hundred and sixty-five") and get the frame where the narrator says it. Before any narration exists, the timings are estimated from the text, so the whole film can be built and reviewed for free. When the voice arrives, the cues move by themselves.
• The film always plays. A scene without a component renders as its card, a scene without a picture gets a drawn ground, and a scene without a voice gets estimated timing. You can watch the whole film at every stage.
• Money is gated. Narration, images and music downloads each have a --dry-run that prints the cost, and the skill asks before spending. The narration cache is content-addressed per paragraph, so editing one scene re-bills one scene.

What’s inside

skills/infofilm/
├── SKILL.md                 # the pipeline: 10 phases, the gates, the standing rules
├── references/
│   ├── script.md            # research file, manuscript format, film structure, review
│   ├── style.md             # the house look, the mascot, changing styles
│   ├── voice.md             # Voice Design, test reading, narration with timestamps
│   ├── music.md             # Suno web UI: theme in Speech mode, beds, jingles, WAV, aligned lyrics
│   ├── images.md            # Gemini 21:9 2K, character reference, inspecting every image
│   ├── scenes.md            # golden scenes, parallel builders, primitives, contact sheets
│   ├── render.md            # render, loudness, verification, delivery