Skip to content
Get packs

HTML to Video Pipeline

Teaches the agent to reliably record HTML pages to MP4 with Playwright/Puppeteer and ffmpeg, avoiding timing and quality pitfalls.

Source Download skill
Repository
XiaomiMiMo/MiMo-Code
Stars
13,743
Licence
MIT
Files
7 files

What it does

When you ask the agent to turn a web page with HTML, CSS, JavaScript or GSAP animations into a video file, this skill makes it follow a specific, tested order of steps: matching viewport and recording size, freezing animations before load, waiting for fonts and assets, trimming the dead lead-in, and verifying the final file's duration and frames. Without it, an agent's first attempt often looks fine but produces blurry, mis-timed or stuttering video.

Great for

  • Developers building scripts that export animated HTML pages or motion graphics as MP4 files
  • Anyone debugging a video made from a web page that has frozen starts, font flashes, or wrong durations
  • Teams rendering HTML-based video on CI who need deterministic, frame-accurate output

Skip it if

  • Simply screen-recording a page by hand or with a desktop tool, where this pipeline adds unnecessary complexity
  • Pages that depend on live network data or user interaction, since the skill focuses on deterministic animation playback and does not address those dynamics
  • Environments where you cannot install a headless browser or system ffmpeg, because the skill cannot work without them

Try asking

  • “Write a script that records my single-file HTML animation to a 1080p MP4 using Playwright and ffmpeg.”
  • “My exported video is 35 seconds but the clip should be 8 seconds after joining scenes. Fix the concatenation.”
  • “The first few seconds of my HTML-to-video export are frozen and the fonts flash. Help me fix the capture timing.”
  • “Set up deterministic 60fps frame-by-frame capture of my GSAP timeline for a CI render.”
Step-by-step guide: how to use HTML to Video PipelineInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 7 original files, the MIT licence and an attribution note.

    html-to-video-pipeline.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip html-to-video-pipeline.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip html-to-video-pipeline.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Describe your exact symptom (for example 'frozen first seconds' or 'blurry output') so the agent jumps to the matching section.
  • State your target fps and whether the render runs on a loaded CI machine, since that decides between real-time recording and deterministic frame stepping.
  • Review any generated script before running it, because the agent will execute Playwright and ffmpeg commands on your machine.

What's inside

  • evals/evals.json
  • references/duration-probe.md
  • references/ffmpeg-cheatsheet.md
  • references/font-wait.md
  • references/frame-stepping.md
  • references/multi-composition.md
  • SKILL.md

Redistributed unmodified from XiaomiMiMo/MiMo-Code under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.