Mk html video

Skill ngocsangyem/MeowKit/packages/mewkit/src/migrate/modules/codex/root/.agents/skills/mk-html-video

Production ready. AI Agent Workflow System for Claude Code

Install

npx -y skills add ngocsangyem/MeowKit --skill mk-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 local MP4 via headless Chromium (Playwright) + ffmpeg. NOT live browser recording, screen recording, or AI video gen (mk:multimodal).

SKILL.md

2.1 KB, 442 tokens by cl100k_base, 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 .agents/skills/html-video/scripts/capture-frames.mjs <html-file> <frame-dir> <fps> <duration-seconds> <width> <height> [background-color].
Render a complete MP4: execute bash .agents/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 .agents/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.

Gives 0 of the 12 instructions most video audio skills give in 442 tokens

Counted across 621 of the 795 authors here whose files we hold, read 2026-08-06

read individual rule files for detailed explanationsin 21 of 621, across 9 files
Use WAV PCM 16kHz mono audio formatin 13 of 621, across 4 files
render final videoin 13 of 621, across 6 files
use this skill when dealing with Remotion codein 11 of 621, across 4 files
save generated audio to a WAV filein 11 of 621, across 4 files
handle conversion errors gracefullyin 10 of 621, across 6 files
add captions to videos alwaysin 10 of 621, across 4 files
generate music from text descriptions using MusicGenin 9 of 621, across 2 files
do not skip pipeline layersin 9 of 621, across 3 files
do not make one tool do everythingin 9 of 621, across 3 files
never ask the user to paste their full API keyin 9 of 621, across 3 files
use azure document intelligence for complex pdfsin 9 of 621, across 4 files

Said here and by no other author read

Verify ffmpeg and Playwright before rendering
Install Chromium only when missing and approved
Use an even viewport width and height
Prefer a window.onFrame hook for deterministic animation
Verify the MP4 with ffprobe after render
Execute the bundled scripts directly

Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.