video-engine
Skill0 starsChanged 14 days agoMITView on GitHub
The rendering engine behind claude-veo videos - a CSS/JS kit for deterministic HTML animations, templates, and scripts that screenshot every frame with Playwright and encode with ffmpeg, then mix music and voice-over with ducking. Use it whenever you build, preview, render or add sound to a claude-veo video; product-demo and video-brief call it.
In this repository3 other files it gives its agents.
- gif-loopSkill
- product-demoSkill
- video-briefSkill
The file
We split this skill into the rules it gives an agent
3 rules. About 0 are common, 1 is distinctive, and 2 are very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈1
Distinctive · estimate
This author's own choices. Worth a look.
2
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 28
Read references/style.md and references/workflow.md once per task.
- Very specific: line 32
Check the encoded file (ffprobe, a contact sheet of the MP4) before you hand it over.
- Distinctive: line 37
Never ship music or images without rights the user confirmed.
≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
Video engine
A video is one HTML page that draws any moment exactly: the page sets window.DURATION and a pure window.setT(t). The scripts step t frame by frame, screenshot each frame and encode an MP4. Because nothing depends on real time, every render is identical and any frame can be inspected.
ENGINE below means this skill's folder (the one this file is in).
What is here
| Path | What |
kit/veo.css | The look: tokens (light, and dark via body.dark), window mock, panel, chips, tags, tables, tracker, captions |
kit/veo.js | Helpers on window.Veo: time (seg, ease, eo, win), el, fx (enter/exit), arrow (dashed arrow that draws itself), curve, type, count, pulse, blobs, brand, panel, windowMock, tracker |
templates/product-demo.html | 34 s product demo: intro, four steps (import, match with arrows, report with counters, export into a file), outro |
templates/explainer.html | 15 s dark explainer: title, a diagram that builds in three beats with captions, end line |
scripts/shots.mjs | Contact sheet of chosen times, without rendering: the fast feedback loop |
scripts/render.mjs | Page to MP4 (--workers, --poster, --from/--to) |
scripts/mix.mjs | Music (trim, fades, level) and voice clips at given times, music ducked under the voice |
scripts/gif.mjs | Page or MP4 to a looping GIF under a size budget (palette, fps/width step-down) |
references/style.md | The house style: layout, colours, motion recipes with timings, pace |
references/workflow.md | Step by step from storyboard to delivered MP4, with commands |
references/voiceover.md | How to write a timed voice-over script for ElevenLabs or another TTS |
Steps
- Read
references/style.mdandreferences/workflow.mdonce per task. - Copy
kit/and the closest template into the working folder. Start from the template; do not start from a blank page. - Storyboard with timings, then edit the page. Keep the layout grid and the motion recipes from
style.md. - Loop on
shots.mjsuntil every sampled frame is clean. Thenrender.mjs, thenmix.mjsif there is sound. - Check the encoded file (
ffprobe, a contact sheet of the MP4) before you hand it over.
Rules
- Deterministic only: no timers, CSS animations or transitions,
Date.now()orMath.random()in the page. - Everything local: fonts, images and the kit load from files, so the render works offline.
- Never ship music or images without rights the user confirmed. Use clearly fictional data unless the user gives real sample data.
- Report what you checked. A contact sheet is not watching the video; say which one you did.
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.