How do I install the Mk:html Video skill?

Run npx skillmds@latest add ngocsangyem/mk-html-video in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Mk:html Video safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Mk:html Video?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Mk:html Video free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Mk:html Video?

ngocsangyem (@ngocsangyem) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Mk:html Video by ngocsangyem — Agent Skill

Name: Mk:html Video
Author: ngocsangyem

Mk:html Video

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).

ngocsangyem c2c7fb8 6 files · 7.8 KB Updated Sep 17, 2026

File contents

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.

---name: mk-html-videodescription: 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).---# HTML → MP4 Render PipelineRender 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](references/render-workflow.md).- **Implement deterministic JavaScript, canvas, WebGL, or GSAP animation stepping:** load [template contract](references/html-template-contract.md).- **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](references/troubleshooting.md).## Quick Start```bashbash .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.## Delivery1. Verify `ffmpeg` and Playwright before rendering; install Chromium only when missing and only with user approval.2. Use an even viewport width and height.3. Prefer a `window.onFrame` hook for fast deterministic animation; otherwise capture runs at real time.4. Verify the MP4 with the `ffprobe` command in [render workflow](references/render-workflow.md).## 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](references/troubleshooting.md) for cleanup and file-origin limitations.

Frequently asked questions