Html video

Skill ngocsangyem/MeowKit/.claude/skills/html-video

Production ready. AI Agent Workflow System for Claude Code

Install

npx -y skills add ngocsangyem/MeowKit --skill html-video

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

15 stars15 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Render an HTML/CSS/JS template to a local MP4 video by capturing frames with headless Chromium (via Playwright) and encoding them with ffmpeg. Use when "render my animation as a video", "export HTML to MP4", "make a video from my web template", or "capture CSS animation as MP4". NOT for recording live browser interactions (use `agent-browser record start`); NOT for screen recording; NOT for AI video generation (use mk:multimodal).

SKILL.md

2.9 KB, as published. Nobody here has run it

HTML → MP4 Render Pipeline

Render a local HTML/CSS/JS animation to MP4 with Playwright frame capture and ffmpeg encoding.

Route by Intent

Check dependencies or choose dimensions/fps: load render workflow.
Implement deterministic JavaScript, canvas, WebGL, or GSAP animation stepping: load template contract.
Capture frames directly: execute node .claude/skills/html-video/scripts/capture-frames.mjs <html-file> <frame-dir> <fps> <duration-seconds> <width> <height> [background-color].
Render a complete MP4: execute bash .claude/skills/html-video/scripts/render-html-to-mp4.sh <html-file> <output.mp4> [fps] [duration-seconds] [width] [height] [background-color].
Resolve module, file://, codec, cleanup, or dimension failures: load troubleshooting.

Quick Start

bash .claude/skills/html-video/scripts/render-html-to-mp4.sh template.html output.mp4 30 5 1920 1080

The final optional argument supplies a background colour. The script captures fps × duration PNG frames, encodes H.264 MP4 with yuv420p, cleans its temporary frame directory, and prints the output path.

Delivery

Verify ffmpeg and Playwright before rendering; install Chromium only when missing and only with user approval.
Use an even viewport width and height.
Prefer a window.onFrame hook for fast deterministic animation; otherwise capture runs at real time.
Verify the MP4 with the ffprobe command in render workflow.

Gotchas

This is a skill, not an npm package: execute its bundled scripts directly.
Do not use it for live browser recording, screen recording, or AI video generation.
See troubleshooting for cleanup and file-origin limitations.