Guide · Agent skill
How to use the HTML to Video Pipeline agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The HTML to Video Pipeline skill is a set of instructions and reference files that makes an AI agent render a web page made with HTML, CSS, JavaScript or GSAP into an MP4 file in a specific, tested order. It is written for developers and anyone debugging a video that came out of a web page with frozen starts, font flashes, wrong durations or stutter. After this guide you will know how to install the skill, how to ask for it, and what to check on the output.
HTML to Video PipelineXiaomiMiMo/MiMo-Code · MIT Download the skill Quick start
- 1Download and unzip. Download the skill ZIP from this page and unzip it so you have a html-to-video-pipeline folder containing SKILL.md.
- 2Place the folder. Move the folder to ~/.claude/skills/ for personal use, to a project's .claude/skills/ folder, or upload the ZIP under Settings → Capabilities → Skills in the Claude apps.
- 3Install the requirements. Install Playwright with its Chromium binaries and make sure ffmpeg and ffprobe run from your terminal.
- 4Make a natural request. Describe the page you want turned into a video, or paste the symptom you see, such as a frozen start or wrong duration.
- 5Review the script. Read the scripts the agent produces before running them, since the skill runs scripts.
- 6Check the output. Ask the agent to verify the final MP4 with ffprobe duration, a full decode and sampled frames.
What the skill makes the agent do
Without the skill, an agent will usually record a page with Playwright and encode it with ffmpeg in a way that looks fine on the first try. The problems show up on playback: text flashing in a fallback font, a few dead seconds at the start, or a clip that is much longer than it should be.
The skill makes the agent follow five phases: launch the browser, hold the animation at frame 0, align the capture start with the animation start, record, then trim and encode. It also sets the viewport equal to the recording size, waits for fonts and assets, and verifies the final file's duration and frames with ffprobe.
- Matches viewport and recording size so the output is not rescaled and blurred.
- Freezes CSS animations before the page loads.
- Waits for stylesheets, fonts and assets before capture starts.
- Trims the dead lead-in before encoding.
- Checks duration and decodes the full file to confirm it is usable.
Install the skill from the ZIP
Download the ZIP for this skill from this page and unzip it. The folder contains SKILL.md plus a references folder and an evals folder. Put the skill folder in one of these locations:
- Your personal skills folder: ~/.claude/skills/
- A single project: the .claude/skills/ folder inside that project
- Claude apps: upload the ZIP under Settings → Capabilities → Skills
Install the requirements
The skill cannot work without a headless browser driver and ffmpeg. Playwright is the default. ffmpeg and ffprobe must be installed at the system level, not as an npm package. ImageMagick is optional and only used for one pixel-mean check.
- Node.js with Playwright (or Puppeteer), plus the downloaded Chromium browser binaries
- ffmpeg and ffprobe on your PATH
- Optional: ImageMagick for the pixel-mean verification check
npx playwright install chromiumTrigger the skill with a natural request
You do not need to name the skill. The skill is written to activate when you are building or debugging any pipeline that turns an HTML, CSS or JavaScript page into a video file. Describe what you want in plain words and include the symptom if you have one.
- Build a script that exports this animated HTML page as an MP4.
- My video from a GSAP page starts with three dead seconds. Fix it.
- The text flashes in a fallback font for the first frames of my export. Why?
- My two scenes concatenated into a 35 second file but each was 8 seconds. Debug it.
- Render this page to 60fps MP4 on our CI runner with deterministic frames.
Choose the capture mode
The skill uses two capture modes. Mode A records in real time with Playwright's recordVideo. It is simple and good for previews and deliverables up to 30fps on an idle machine. Mode B steps through frames deterministically: it pauses everything, seeks to each frame time, screenshots it and encodes the sequence. Use Mode B when output must be smooth at 30fps or higher or when renders run on a loaded CI machine.
- Mode A: real-time recording, wall-clock length equals clip length, lead-in must be trimmed.
- Mode B: frame stepping, exact frame rate, no lead-in trim needed, slower to produce.
Know the safety notes
This skill runs scripts. It does not use the network. Review the scripts the agent writes before you run them, especially in CI, and run them in a project where you are comfortable launching a headless browser and calling ffmpeg.
- Runs scripts: yes.
- Uses network: no, according to the skill's own description.
- Do not install ffmpeg-static or @ffmpeg-installer packages for production; the skill recommends a system ffmpeg.
What people use it for
- Exporting an animated HTML title card or motion graphic as an MP4 file.
- Debugging a video whose opening seconds are frozen or whose text flashes in a fallback font.
- Concatenating several HTML scenes into one video without the duration growing unexpectedly.
- Rendering HTML-based video on a CI runner where frame-accurate, repeatable output matters.
Frequently asked questions
How do I install the html-to-video-pipeline skill?
Download the ZIP from this page and unzip it. Place the html-to-video-pipeline folder in ~/.claude/skills/ for personal use or in a project's .claude/skills/ folder. In the Claude apps you can instead upload the ZIP under Settings → Capabilities → Skills.
What do I need installed before using this skill?
You need Node.js with Playwright (or Puppeteer) and its downloaded Chromium binaries, plus ffmpeg and ffprobe installed at the system level. ImageMagick is optional and only used for one pixel-mean check. The skill cannot work without the browser and ffmpeg.
Is the HTML to Video Pipeline skill free?
The skill is published under the MIT licence, as stated on this page. Check the licence file in the source repository for the full terms. Playwright, Puppeteer and ffmpeg are separate tools with their own licences.
Can I use ffmpeg-static instead of installing ffmpeg?
The skill advises against it for production. It says the bundled npm builds skip codecs and encoder flags such as libx264 presets and tpad, so a system ffmpeg is the durable choice.
Why does my video start with frozen frames or flash a fallback font?
The skill addresses this by freezing CSS animations before the page loads and by waiting for stylesheets, font faces and fonts.ready before recording. Trim the dead lead-in with ffmpeg, and ask the agent to apply these fixes, then verify the duration.
Can this skill render pages that load live data or respond to clicks?
No. The skill focuses on deterministic animation playback and does not address pages that depend on live network data or user interaction. For simple screen recording of a page by hand, a desktop tool is simpler.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This skill suits developers and teams who need animated HTML pages exported to MP4 with predictable timing, including CI renders that must be repeatable. If you only need to screen-record a page once, depend on live data or cannot install a headless browser and system ffmpeg, pick a simpler tool instead.
Download the skill