graphic-overlays

SKILL.md

Graphic Overlays

Graphic Overlays takes a local video that plays in full and layers a sequence of
timed, designed graphic cards onto it — titles, lower-thirds, data callouts,
quotes, side panels, picture-in-picture — synced to what's being said. The agent
designs the cards (timing + content) and writes each card's HTML directly in the
conversation, then assembles a single composition HTML and renders it to MP4 via
hyperframes. There is no fixed archetype list and no prescribed card structure —
the overlays emerge from what the transcript actually says.

Confirm the route before you build. This skill packages an existing talking-head clip with designed graphic cards (titles, lower-thirds, data callouts, quotes, side panels, PiP). If the user wants plain captions / subtitles (the spoken words as text) → /embedded-captions; a single short unnarrated element (one logo sting / lower-third) → /motion-graphics. The clip plays untouched — re-timing, recoloring, reframing, reordering, or audio is NLE editing and out of scope. Building from a URL / topic / PR → the creation workflows. Unsure overlays-vs-captions? Read /hyperframes-read-first first.

Graphic-packaging sibling of embedded-captions. Captions add the spoken words
as a readable subtitle; this adds designed graphics on top of the playing video.
Plain subtitles → embedded-captions. Build a video from scratch → the creation
workflows (product-launch-video / faceless-explainer / …).

Inspectable intermediate files in the work directory: