Video Skill

Turn your coding agent into a video producer. Describe the video; the agent writes the script, voices it (local TTS, no API key), captions it, composes it as animated HTML, and renders a real MP4.

The engine is HyperFrames — an open-source (Apache-2.0) HTML + GSAP video framework, rendered deterministically via headless Chrome. The video skill drives it and adds the parts a production pipeline needs on top: a staged workflow with quality gates, curated seed templates and recipes, Chinese-first captioning, and platform presets.

Install

npm i -g @nanhara/hara-video
hara-video install            # register as a hara plugin
hara-video install --claude   # or link into Claude Code (~/.claude/skills/video)
hara-video install --codex    # or Codex (~/.agents/skills/video)
hara-video doctor             # check node ≥22 / ffmpeg / hyperframes

For engine-authoring depth, also install the official HyperFrames skills: npx skills add heygen-com/hyperframes.

Use it from your agent

Just ask — "做一条 45 秒的抖音口播,讲 XX,用我的音色" — and the skill runs the whole pipeline, handing you a live preview URL before anything renders:

Brief — platform/aspect, duration, voice, style (asked once, not re-asked).
Script — written first, shown for approval (a bad script wastes every render downstream).
Voice + timing — local Kokoro TTS (Mandarin voices, no key) + Whisper word-level timing.
Compose — from a curated seed, not a blank file; captions follow the CN typography rules. hyperframes lint + inspect are the P0 gates.
Preview — the conversational edit loop: you say "cut 2s off scene 2", the agent edits the HTML, the preview hot-reloads. There's no drag-and-drop timeline — the agent is the editor.
Render — with the platform preset flags; you get the MP4 (and a cover still).

The three capabilities

HTML-composed video (the core) — every video is an HTML composition the agent writes. Captions, typography, motion, timeline: all yours, reproducible, zero render fees.
AI-generated clips (asset lane) — text-to-video clips (bring your own vendor key) are ingredients placed as <video> elements inside the composition — generation is never the final video, composition is.
Visual editing (conversational) — you watch the live preview and steer edits in plain language.

CLI helpers

hara-video init koubo my-video    # scaffold a project from a seed (koubo | promo | kepu)
hara-video srt subs.srt --words   # SRT → HyperFrames caption JSON (per-character CJK beats)

init seeds a lint-clean composition + an assets/ folder; drop your voice/background in, fill the [REPLACE] marks, and npx hyperframes render.

Platform presets & recipes

Bundled references cover 抖音 / 视频号 / 小红书 / B站 / YouTube / Shorts (canvas, duration, render flags), Chinese caption typography (font stacks, line length, sync discipline), and three recipes distilled from 120+ shipped episodes: 口播 (talking-head shorts), promo, 科普 (explainer).

License

Apache-2.0. HyperFrames is a separate Apache-2.0 project by HeyGen — the skill drives it and adds curation; it does not redistribute it. HyperFrames is free at any company size.