skills.rest
Dozyboy
DozyboyCOMMUNITY
Explore all skills by this author →
GitHub

hs:html-video

Create MP4 videos from HTML/CSS/JS templates using the nexu-io/html-video CLI and Studio.

Updated Jul 19, 2026
Search Tags:#rendering#playwright#ffmpeg#video generation#mp4#chromium#html templates
One-click install
npx skills add https://github.com/Dozyboy/VSF --skill hs-html-video-dozyboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hs:html-video
Source: https://github.com/Dozyboy/VSF/tree/main/Day2_VSF/Demo1/harness/plugins/hs/disabled-skills/html-video
Command: npx skills add https://github.com/Dozyboy/VSF --skill hs-html-video-dozyboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Producing short videos like product promos, explainers, or data clips normally requires video editing software or motion design skills. This Skill turns HTML/CSS/JS templates plus project assets into real MP4 exports through headless Chromium and ffmpeg, so developers can generate videos from code. ## Core Features & Use Cases - Template Discovery and Inspection: Search templates by intent and aspect ratio, inspect variable schemas, and select the right starting point before building. - Project-Based Workflow: Create projects, attach text and image assets, set template variables, preview in a browser, and customize interactively in the Studio UI. - Verified MP4 Rendering: Render through headless Chromium and ffmpeg, then verify output with ffprobe for duration and dimensions. - Use Case: A developer needs a 16:9 product promo for a CLI tool. They search templates, create a project, add a logo and headline copy, preview it, and render a verified MP4 to assets/videos/. ## Quick Start Ask the assistant to create a short 16:9 product promo video from an HTML template, add your headline text and logo, then render and verify the MP4 output.

Frequently Asked Questions about hs:html-video

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create an MP4 video from an HTML template?▼

Use the html-video CLI to search templates by intent, create a project, set the template, add text and image assets, preview in a browser, then run project-render with an output path. Verify the result with ffprobe to confirm nonzero duration and expected dimensions.

What is the difference between html-video and Remotion for video generation?▼

html-video renders HTML/CSS/JS templates through headless Chromium and ffmpeg, while Remotion uses React compositions and frame-based rendering. Use html-video for template-driven HTML videos and Remotion when working with React component code or frame math.

What are the system requirements for html-video?▼

html-video requires Node.js 20 or higher, pnpm 9 or higher, Playwright Chromium, and ffmpeg installed on the system. Run the doctor command after setup to diagnose missing browsers or encoders before rendering.

Why does html-video rendering fail with a Playwright browser error?▼

Rendering fails when the Playwright Chromium binary is not installed for the adapter package. From a source checkout, run pnpm --filter @html-video/adapter-hyperframes exec playwright install chromium, then rerun doctor to confirm.

What if an html-video template has no variables to set?▼

Templates with empty variable schemas cannot be customized through CLI variable commands. Launch the Studio UI with html_video studio to edit copy and layout interactively, then export from Studio or render the finished project by CLI.

Related Skills

Explore More Design & Creative Skills→
adminsairolotech-bitadminsairolotech-bit

media-generation

Generate AI images and videos and retrieve stock imagery for applications.

Community
Intermediate
leocostaleocosta
4

launch-release

Convert release notes, changelogs, and RM identifiers into landing pages and channel-ready messages.

Community
Advanced
cloudflarecloudflare
9.9k

cloudflare-browser

Control headless Chrome in Cloudflare Workers via WebSocket CDP.

Official
Advanced
archibatearchibate
6

remotion

Generate React-based video compositions with Remotion and programmatic components.

Community
Advanced