Hyperframes Cli
Run the HyperFrames dev loop—init, lint, inspect, preview, and render HTML video compositions from the terminal without guessing FFmpeg or Node setup.
Overview
HyperFrames CLI is an agent skill most often used in Build (also Ship, Launch) that runs the `npx hyperframes` scaffold–lint–inspect–preview–render loop for HTML video compositions.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-cliWhat is this skill?
- Six-step workflow: init → write → lint → inspect → preview → render via `npx hyperframes`
- `lint` catches missing `data-composition-id`, overlapping tracks, and unregistered timelines
- `inspect` seeks the timeline in headless Chrome and reports text overflow off bubbles or canvas
- Scaffold with interactive wizard, example templates, or bundled video/audio inputs
- Environment commands: doctor, browser, info, upgrade for Node ≥22 and FFmpeg troubleshooting
- Six-step workflow: init, write, lint, inspect, preview, render
- Requires Node.js >= 22 and FFmpeg
Adoption & trust: 84.4k installs on skills.sh; 25.6k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have an HTML-based video composition but no reliable terminal workflow to validate timelines, catch layout blowouts, and render without breaking Node or FFmpeg setup.
Who is it for?
Indie builders shipping short-form or programmatic video from HTML/CSS timelines who want lint and visual inspect gates before expensive renders.
Skip if: Teams that only need TTS, transcription, or background removal without the full composition CLI—use `hyperframes-media` instead.
When should I use this skill?
Running any `npx hyperframes` scaffold, validation, preview, render, or environment command—or troubleshooting the HyperFrames build/render stack (not `tts`/`transcribe`/`remove-background`).
What do I get? / Deliverables
You get a ordered CLI ritual with structural linting, Chrome timeline inspection, local preview, and final render—plus doctor-style fixes when the HyperFrames environment fails.
- Lint-clean composition project
- Inspect report for canvas/text overflow issues
- Rendered video output from `render`
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Solo builders author HTML compositions during Build; lint, inspect, and render are the canonical shelf because the CLI is the primary control surface for that asset pipeline. HyperFrames compositions are HTML-first timelines and canvas layouts, which maps to frontend authoring even though output is video.
Where it fits
Scaffold `my-video` with an example template and iterate on HTML timeline markup before first render.
Run `lint` and `inspect` to catch overlapping tracks and text spilling outside bubbles before shipping a marketing clip.
Batch `render` final MP4s once preview looks correct for a product launch reel.
Use `doctor` and `upgrade` when CI or a new laptop breaks FFmpeg or browser dependencies mid-project.
How it compares
Terminal workflow skill for HyperFrames compositions, not a generic Remotion or After Effects plugin.
Common Questions / FAQ
Who is hyperframes-cli for?
Solo and indie builders using HyperFrames to turn HTML compositions into video who want scaffolding, validation, preview, and render from one `npx hyperframes` entry point.
When should I use hyperframes-cli?
During Build when authoring compositions; in Ship when linting and inspecting before release; at Launch when rendering final assets; and in Operate when running doctor, browser, info, or upgrade after environment drift.
Is hyperframes-cli safe to install?
Review the Security Audits panel on this Prism page and inspect what the skill asks your agent to run locally—CLI skills can invoke shell, FFmpeg, and headless browser tooling on your machine.
Workflow Chain
Requires first: skill heygen com hyperframes hyperframes
SKILL.md
READMESKILL.md - Hyperframes Cli
# HyperFrames CLI Everything runs through `npx hyperframes`. Requires Node.js >= 22 and FFmpeg. ## Workflow 1. **Scaffold** — `npx hyperframes init my-video` 2. **Write** — author HTML composition (see the `hyperframes` skill) 3. **Lint** — `npx hyperframes lint` 4. **Visual inspect** — `npx hyperframes inspect` 5. **Preview** — `npx hyperframes preview` 6. **Render** — `npx hyperframes render` Lint and inspect before preview. `lint` catches missing `data-composition-id`, overlapping tracks, and unregistered timelines. `inspect` opens the rendered composition in headless Chrome, seeks through the timeline, and reports text spilling out of bubbles/containers or off the canvas. ## Scaffolding ```bash npx hyperframes init my-video # interactive wizard npx hyperframes init my-video --example warm-grain # pick an example npx hyperframes init my-video --video clip.mp4 # with video file npx hyperframes init my-video --audio track.mp3 # with audio file npx hyperframes init my-video --example blank --tailwind # with Tailwind v4 browser runtime npx hyperframes init my-video --non-interactive # skip prompts (CI/agents) ``` Templates: `blank`, `warm-grain`, `play-mode`, `swiss-grid`, `vignelli`, `decision-tree`, `kinetic-type`, `product-promo`, `nyt-graph`. `init` creates the right file structure, copies media, transcribes audio with Whisper, and installs AI coding skills. Use it instead of creating files by hand. When using `--tailwind`, invoke the `tailwind` skill before editing classes or theme tokens. The scaffold uses Tailwind v4.2 via the browser runtime, not Studio's Tailwind v3 setup. ## Linting ```bash npx hyperframes lint # current directory npx hyperframes lint ./my-project # specific project npx hyperframes lint --verbose # info-level findings npx hyperframes lint --json # machine-readable ``` Lints `index.html` and all files in `compositions/`. Reports errors (must fix), warnings (should fix), and info (with `--verbose`). ## Visual Inspect ```bash npx hyperframes inspect # inspect rendered layout over the timeline npx hyperframes inspect ./my-project # specific project npx hyperframes inspect --json # agent-readable findings npx hyperframes inspect --samples 15 # denser timeline sweep npx hyperframes inspect --at 1.5,4,7.25 # explicit hero-frame timestamps ``` Use this after `lint` and `validate`, especially for compositions with speech bubbles, cards, captions, or tight typography. It reports: - Text extending outside the nearest visual container or bubble - Text clipped by its own fixed-width/fixed-height box - Text extending outside the composition canvas - Children escaping clipping containers Errors should be fixed before rendering. Warnings are surfaced for agent review; add `--strict` to fail on warnings too. Repeated static issues are collapsed by default so JSON output stays compact for LLM context windows. If overflow is intentional for an entrance/exit animation, mark the element or ancestor with `data-layout-allow-overflow`. If a decorative element should never be audited, mark it with `data-layout-ignore`. `npx hyperframes layout` remains available as a compatibility alias for the same visual inspection pass. ## Previewing ```bash npx hyperframes preview # serve current directory npx hyperframes preview --port 4567 # custom port (default 3002) ``` Hot-reloads on file changes. Opens the studio in your browser automatical