hyperframes-cli

Orchestrates the HyperFrames CLI dev loop for scaffolding, validating, previewing, and rendering HTML video compositions.

1|Updated Aug 28, 2026
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill hyperframes-cli-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-cli
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/hyperframes-cli
Command: npx skills add https://github.com/mooch10/mochiptos --skill hyperframes-cli-mooch10

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building programmatic videos with HyperFrames involves many CLI commands (init, lint, validate, inspect, preview, render, lambda) with subtle flags, gating rules, and failure modes. This Skill gives an AI agent the exact command sequences, conventions, and troubleshooting paths so video projects are scaffolded, checked, and rendered correctly without trial and error. ## Core Features & Use Cases - Full dev-loop orchestration: Scaffold projects with init or capture, then run the correctness pipeline (lint → validate → inspect → snapshot) before previewing in Studio and rendering. - Cloud rendering on AWS Lambda: Deploy a SAM stack and drive distributed renders with lambda deploy / render / progress / destroy, including IAM policy validation and cost tracking. - Environment diagnosis: Use doctor and browser to verify Node.js >= 22, FFmpeg, and the pinned Chrome build when renders or previews fail. - Use Case: An agent scaffolds a product-promo video, lints and validates the composition, captures snapshot frames to verify sub-composition mounting, opens Studio preview for user review, and renders the final MP4 at high quality only after approval. ## Quick Start Ask the agent to scaffold a new HyperFrames video project and run lint, validate, and inspect before opening the Studio preview.

Frequently Asked Questions about hyperframes-cli

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

FAQPage Schema
How do I render a video with the HyperFrames CLI?▼

Run npx hyperframes render after the user approves the Studio preview. Use --quality draft while iterating and --quality high --output out.mp4 for final delivery; verify the output file exists and has plausible size afterward.

How do I validate a HyperFrames composition before rendering?▼

Run lint, validate, and inspect in that order. lint catches structural errors, validate loads the composition in headless Chrome to report runtime errors and WCAG contrast issues, and inspect sweeps the timeline for text overflow and motion-assertion failures.

When should I use HyperFrames Lambda rendering instead of local render?▼

Use lambda render for long videos, 4K output, or large parallel batches where local Chrome would time out or exhaust memory. Stay on local render for dev-loop iteration and short 1080p renders, since Lambda adds deploy overhead.

Why does my HyperFrames render fail with Chrome or FFmpeg errors?▼

Run npx hyperframes doctor first to check Node.js version, FFmpeg, Chrome, and host resources. Missing bundled Chrome is fixed with npx hyperframes browser ensure; note that doctor --json always exits 0, so gate on the payload's ok field.

Why does my sub-composition render blank even though lint passes?▼

lint, validate, and inspect evaluate each composition in isolation and never mount sub-compositions via index.html. Run npx hyperframes snapshot at scene midpoints to catch cross-file mount failures like mismatched host ids or styles left outside the template.