ak-html-video

name	ak:html-video
description	Create local MP4 videos from HTML/CSS/JS templates with nexu-io/html-video. Covers source checkout setup, template discovery, studio customization, preview, and render verification.
user-invocable	true
when_to_use	Invoke for HTML-first video generation, template-driven promos, explainers, data videos, or social clips that should render locally through Chromium and ffmpeg.
category	frontend
keywords	["html","video","mp4","templates","animation","chromium","ffmpeg","studio","hyperframes"]
license	Apache-2.0
argument-hint	[video brief, source URL, repo, template id, or project id]
metadata	{"author":"agentkit","version":"1.0.0","upstream":"nexu-io/html-video"}

html-video Skill

Create local videos with the nexu-io/html-video CLI and Studio. The tool turns HTML/CSS/JS templates and project assets into real MP4 exports through headless Chromium and ffmpeg.

Use this for template-driven product promos, explainers, data/social clips, article or repo summaries, and HTML-first motion prototypes.

Route carefully

• Use /ak:remotion for React/Remotion compositions, frame math, or Remotion project code.
• Use /ak:media-processing when the task is only encoding, trimming, transcoding, thumbnails, HLS/DASH, or batch FFmpeg/ImageMagick work.
• Use /ak:preview or the engineer show-off skill for static HTML previews, slides, docs, diagrams, or demos that do not need MP4 rendering.
• Use /ak:agent-browser for browser QA or to operate the html-video Studio UI when no real Chrome profile state is needed.
• Use /ak:chrome-profile only if the Studio workflow explicitly needs the user's existing Chrome profile or logged-in browser state.

Setup

Prefer a published html-video binary if one exists in the user's environment. If it does not, use a source checkout; do not vendor the upstream engine into the user's project or kit.

As of the upstream main metadata checked when this skill was authored, html-video declares Node >=20, pnpm >=9, and package manager pnpm@9.15.0. If upstream package.json differs, follow upstream.

# Source checkout path is a convention, not a requirement.
git clone https://github.com/nexu-io/html-video "$HOME/html-video"
cd "$HOME/html-video"
corepack enable
corepack prepare pnpm@9.15.0 --activate
pnpm install
pnpm -r build

# If source-checkout rendering reports a missing Playwright browser:
pnpm --filter @html-video/adapter-hyperframes exec playwright install chromium

Use this helper in shell sessions so commands work with either a global binary or a source checkout:

() {
    -v html-video >/dev/null 2>&1; 
    html-video 
    
  

   home=
   [ -f  ]; 
    node  
    
  

    >&2
   127
}