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:hyperframes

HeyGen HyperFrames Wrapper

Wrap the pinned HeyGen HyperFrames CLI for HTML-first programmatic video: verify Node/FFmpeg, scaffold, edit timed HTML, preview, lint, render, and prove the MP4.

01

Confirm fit

02

Verify deps

03

Pin CLI

04

Scaffold composition

Rule 01

HyperFrames is for HTML/CSS timed by data-* attributes, not React-first Remotion work.

Rule 02

The composition HTML is the source of truth; class="clip" and timing attributes drive visibility.

Rule 03

Pinned npx invocations plus lint and ffprobe make fast-moving CLI behavior auditable.

Execution Map

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

01

Start

Input, scope, route

  1. 1 Confirm fit Use HyperFrames for short 1080×1920 vertical/social videos, product-launch clips, promo loops, and HTML-authored motion graphics; route React-first, Remotion, and encode-only work elsewhere.
  2. 2 Verify deps Require Node.js 22+ and FFmpeg on PATH; set HEYGEN_API_KEY only for remote rendering, then run node scripts/verify-prereqs.mjs before render work.
02

Work

Agent / skill execution

  1. 3 Pin CLI Run every CLI step through npx -y hyperframes@0.7.99 and avoid unpinned npx -y hyperframes commands in scripts or docs.
  2. 4 Scaffold composition Scaffold a new composition with the pinned init command, for example npx -y hyperframes@0.7.99 init my-composition --resolution portrait.
03

Verify

Gate, review, validation

  1. 5 Edit HTML contract Author plain HTML with data-composition-id, data-start, data-duration, data-width, data-height, data-track-index, and class="clip" as the timing/sizing contract.
  2. 6 Preview Run npx -y hyperframes@0.7.99 preview my-composition and open the printed local URL to scrub timing before spending render time.
04

Close

Report, handoff, artifact

  1. 7 Lint before render Run npx -y hyperframes@0.7.99 lint my-composition and fix every malformed data-* timing or composition error before rendering.
  2. 8 Render or cloud render Render locally with npx -y hyperframes@0.7.99 render ... --output, or use the separate cloud render top-level command when HEYGEN_API_KEY-backed remote rendering is needed.

Syntax, arguments, subcommands

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

Syntax

/ak:hyperframes [composition or command]

Arguments

[composition or command] Required

Composition brief or command

Natural-language request for a HyperFrames HTML composition, scaffold, preview, lint, local render, cloud render, or troubleshooting run. Include aspect ratio, duration, assets, output path, and local/cloud boundary; it is not a fixed parser command.

/ak:hyperframes "Scaffold a 6-second 1080x1920 draft product-launch loop under ./assets/videos/launch/, preview locally, lint before rendering, and render an MP4 to ./assets/videos/launch/launch.mp4 without contacting the HeyGen cloud endpoint"

Sample Prompt

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

Vertical product launch Recommended 
/ak:hyperframes create a 9:16 product-launch clip as a plain HTML composition
Use when:
You need a short vertical/social video rendered from HTML/CSS.
Expected:
Verifies Node.js and FFmpeg, scaffolds with pinned init --resolution portrait, edits data-* timed HTML, previews, lints, renders, and ffprobes the MP4.
Remote cloud render 
/ak:hyperframes render my-composition remotely with HeyGen cloud output to ./assets/videos/my-composition.mp4
Use when:
You have a HyperFrames HTML composition and need HEYGEN_API_KEY-backed remote rendering.
Expected:
Checks prerequisites and HEYGEN_API_KEY, keeps cloud render as a separate top-level command, lints first, renders with --output, and verifies the video artifact.
Troubleshoot bad MP4 
/ak:hyperframes troubleshoot a blank or too-short MP4 from my-composition
Use when:
A HyperFrames render is blank, too short, or failing from malformed composition timing.
Expected:
Runs the verifier, reruns lint, inspects data-composition-id, data-start, data-duration, and class="clip", then follows the documented troubleshooting path before rerendering.

Handled Scope

  • HTML-first vertical/social video
  • data-* composition timing
  • Prerequisite verification
  • Pinned init/preview/lint/render flow
  • Local, cloud, lambda, and cloudrun render routing

Artifacts Produced

HyperFrames render summary

Pattern

Composition path, pinned command sequence, lint result, render command, MP4 output path, ffprobe duration and dimensions, local/cloud note.

A trustworthy result shows lint passed before render and ffprobe proved the MP4 duration and dimensions.

Next