hyperframes-cli

Scaffold, validate, inspect, preview, and render HTML timeline compositions to MP4/WebM.

182|8|Updated Apr 4, 2026
One-click install
npx skills add https://github.com/compozy/agh --skill hyperframes-cli-compozy
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hyperframes-cli
Source: https://github.com/compozy/agh/tree/main/.agents/skills/hyperframes/hyperframes-cli
Command: npx skills add https://github.com/compozy/agh --skill hyperframes-cli-compozy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

HyperFrames CLI eliminates the slow trial-and-error loop of building, validating, visually auditing, and rendering timeline-based HTML video compositions by providing a single repeatable dev loop.

Core Features & Use Cases

  • Scaffold projects: Generate the correct file structure and starter composition assets using interactive or non-interactive initialization.
  • Lint before you render: Catch composition issues like missing composition IDs, overlapping tracks, and unregistered timelines to prevent broken renders.
  • Visual inspect along the timeline: Render in headless Chrome to detect text overflow, clipping, and off-canvas layout problems at specific timestamps or with timeline sweeps.
  • Preview with hot reload: Serve the studio UI for rapid iteration and shareable project URLs during review.
  • Render to deliverables: Produce MP4 or WebM outputs with controllable FPS/quality, strictness checks, and variable overrides for repeatable builds.
  • Environment troubleshooting: Diagnose missing Node/FFmpeg/Chrome and manage bundled browser components for reliable execution.
  • Asset preprocessing integration: Keep media preprocessing consistent by routing TTS/transcribe/remove-background to the hyperframes-media skill.

Quick Start

Run a full iteration loop by executing: npx hyperframes init my-video --non-interactive.

Frequently Asked Questions about hyperframes-cli

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I validate HTML video composition layouts before rendering to MP4?

You can validate HTML video composition layouts by running npx hyperframes lint to catch missing composition IDs, overlapping tracks, and unregistered timelines, then use npx hyperframes inspect in headless Chrome to detect text overflow and off-canvas clipping before rendering to MP4.

Do I need FFmpeg and Node.js to render timeline-driven HTML to video?

Yes, rendering timeline-driven HTML to video requires both Node.js and FFmpeg. You can run npx hyperframes doctor to diagnose missing environment dependencies and manage bundled browser components to ensure reliable execution before rendering.

What's the best way to automate visual audits of HTML video compositions in CI?

The best way to automate visual audits in CI is using npx hyperframes inspect with timeline sweeps in headless Chrome to detect layout problems, combined with strict validation modes and machine-readable JSON findings via the --json flag for automated pipeline integration.

Can I override variables for repeatable HTML video builds?

Yes, you can produce repeatable MP4 or WebM video builds by passing variable overrides during the render command, allowing controllable FPS, quality settings, and strictness checks for consistent outputs across different environments.

How do I scaffold a new HTML video composition project quickly?

You can scaffold a new HTML video composition project using interactive or non-interactive initialization by running npx hyperframes init my-video --non-interactive, which generates the correct file structure and starter composition assets automatically.

Why does my HTML video render fail with missing track or timeline errors?

HTML video renders fail when compositions contain missing IDs, overlapping tracks, or unregistered timelines. Running npx hyperframes lint before rendering catches these structural issues to prevent broken outputs and ensure valid timeline-driven projects.