VividKit Crystal clear AI coding
VI
Choose Your Setup Get Started with AgentKit Continue with ClaudeKit Migrate from ClaudeKit to AgentKit Clean cutover from ClaudeKit What Is AgentKit? How AgentKit Works AgentKit Kits, Skills, Agents & Hooks AgentKit Runtime Support AgentKit Desktop App AgentKit Configuration AgentKit CLI Quick Reference AgentKit Skills Cheatsheet AgentKit Workflows AgentKit Statusline Update AgentKit CLI & Kits AgentKit Helper Clean reinstall of AgentKit AgentKit Troubleshooting What is ClaudeKit? ClaudeKit CLI Guide Command Finder Commands Cheat Sheet Workflow Recipes CLI Quick Reference Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Other coding tools How ClaudeKit Works Inside ClaudeKit Finding Your Unknowns Session Recovery Fix from Logs UI/UX Guide Accounts Switcher IDE Config Remote Control Codex App System Diagramming UI Review Gate Promotions Support VividKit

Quick Ref / Command

Engineer Kit

/ak:html-video

HTML-Video Local MP4 Pipeline

Create local MP4 videos from HTML/CSS/JS templates using nexu-io/html-video: diagnose setup, discover templates, create projects, customize assets, preview, render, and ffprobe the result.

01

Route medium

02

Diagnose setup

03

Pin brief

04

Discover template

Rule 01

Run html_video diagnostics before workflow work; creation still starts with a pinned brief, not an immediate render.

Rule 02

Inspect templates before choosing; empty variable schemas require Studio or project editing.

Rule 03

Do not commit large generated MP4 files unless the user explicitly wants them versioned.

Execution Map

Core lanes from input to output, aligned with the command's real execution path.

01

Start

Input, scope, route

  1. 1 Route medium Use html-video for template-driven HTML videos; route React/Remotion, encoding-only, static previews, browser QA, or Chrome-profile work to the documented alternatives.
  2. 2 Diagnose setup Prefer an existing html-video binary; otherwise use a source checkout without vendoring upstream into the user project, then run html_video doctor and list-engines before workflow work.
02

Work

Agent / skill execution

  1. 3 Pin brief Before creating anything, capture audience, goal, duration, aspect ratio, assets or URLs, template preference, output path, and draft-versus-polished target.
  2. 4 Discover template Search templates by intent and aspect, inspect the chosen template, and check whether variables are exposed.
03

Verify

Gate, review, validation

  1. 5 Create project Create or locate a project with name, intent, and aspect, then inspect project-list/project-show as needed.
  2. 6 Customize assets Set the template, add inline text and files, and use project-set-var or project-set-vars only when inspect-template exposes variables.
04

Close

Report, handoff, artifact

  1. 7 Preview or Studio Run project-preview and open the returned html_path; use Studio on port 3071 for interactive editing or templates with empty variable schemas.
  2. 8 Render and verify Render with an explicit output path and stream progress, then use ffprobe to confirm nonzero duration and expected video dimensions.

Syntax, arguments, subcommands

How to invoke the skill: syntax, positional arguments, shared options, then each subcommand with its own syntax and outcome.

Syntax

/ak:html-video [video brief, source URL, repo, template id, or project id]

Arguments

[video brief, source URL, repo, template id, or project id] Required

Video request or source

Natural-language brief, source URL, repository, template ID, or existing project ID/path. Include audience, goal, duration, aspect ratio, assets, template preference, output path, and whether the result is a draft proof or polished export.

/ak:html-video "Create a 12-second 16:9 draft product promo from ./assets/cli-screenshot.png and the headline 'Ship with evidence'; use a discovered template, preview before rendering, write ./artifacts/ship-with-evidence.mp4, make no network asset requests, and do not commit or publish the video"

Sample Prompt

Concrete invocations for each flag, subcommand, mode, or route available in the live workflow.

Template product promo Recommended 
/ak:html-video short product promo for a developer tool, 16:9, draft proof to ./assets/videos/agentkit-promo.mp4
Use when:
Use when a product or feature needs a local MP4 built from an HTML/CSS/JS template rather than a Remotion composition.
Expected:
Runs html_video diagnostics, pins the brief, searches and inspects templates, creates a project, previews html_path, renders to the requested MP4, then verifies duration and dimensions with ffprobe.
Explainer from URL 
/ak:html-video create a 30 second explainer from https://example.com/article using a clean social clip template
Use when:
Use when a source URL should become a local HTML-first explainer or social clip rendered through Chromium and ffmpeg.
Expected:
Treats the URL as source material, selects and inspects a suitable template, organizes scratch and output paths, previews the HTML, renders an MP4, and checks the ffprobe proof.
Studio customization 
/ak:html-video customize an existing project in Studio for a square launch teaser and export the finished MP4
Use when:
Use when template variables are missing or layout/copy needs interactive Studio tuning before rendering.
Expected:
Opens the preview or Studio flow, uses Studio for rewrite and layout tuning, exports or renders the finished project, and reports the verified MP4 path with ffprobe duration and dimensions.
Existing project render 
/ak:html-video render project prj_123 to ./plans/launch/visuals/launch-proof.mp4 with stream progress
Use when:
Use when an html-video project already exists and the task is to render it with an explicit output path.
Expected:
Shows or confirms the project and template, runs project-render with stream progress and the requested output path, then treats ffprobe duration and expected dimensions as the completion proof.

Handled Scope

  • Template discovery
  • HTML/CSS/JS video projects
  • Studio customization
  • Chromium/ffmpeg rendering
  • ffprobe verification

Artifacts Produced

Rendered video proof

Pattern

Project id/path, template, preview html_path, MP4 output path, ffprobe duration and dimensions.

A verified MP4 path is the deliverable; temporary preview state is not the final proof.

Next