skills.rest
noemdb
noemdbCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-cli

Operates the HyperFrames CLI to scaffold, check, preview, and render video compositions locally or in the cloud.

1|Updated Jan 10, 2024
Search Tags:#cli#ffmpeg#video rendering#batch render#hyperframes#html composition#cloud render
One-click install
npx skills add https://github.com/noemdb/cfla --skill hyperframes-cli-noemdb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-cli
Source: https://github.com/noemdb/cfla/tree/main/.agents/skills/hyperframes-cli
Command: npx skills add https://github.com/noemdb/cfla --skill hyperframes-cli-noemdb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Authoring and rendering HTML-based video compositions requires a disciplined loop of scaffolding, linting, browser-based checks, preview approval, and rendering, and this Skill encodes that exact HyperFrames CLI workflow so agents run the right commands in the right order without skipping gates. ## Core Features & Use Cases - Full development loop: scaffold projects with init or capture, iterate with lint, gate with check, review in Studio via preview, and render with render only after approval. - Multiple render targets: render locally, in Docker, on HeyGen-hosted cloud, on AWS Lambda, or on Google Cloud Run, including variable-driven batch renders from JSON or JSONL. - Diagnostics and verification: use doctor, browser, snapshot, motion sidecar assertions, and sub-composition smoke tests to diagnose build or render failures. - Use Case: A user asks to turn a captured website into a rendered MP4; the agent scaffolds with capture, authors the composition, runs check --snapshots, opens the Studio preview for approval, then renders at high quality and verifies the output file. ## Quick Start Ask the agent to scaffold a new HyperFrames project and run the lint and check gates before previewing and rendering it to an MP4.

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 HyperFrames composition to MP4?▼

Run npx hyperframes render after the composition passes check and the user approves the Studio preview. Use --quality draft for iteration and --quality high --output out.mp4 for final delivery, then verify the file exists and has a plausible duration.

What is the difference between hyperframes lint and check?▼

lint is a fast static analysis for iteration feedback, while check is the required final gate that reruns lint and then audits runtime errors, layout, motion sidecar assertions, and WCAG contrast in one browser session. Do not run a standalone lint immediately before check.

Should I use cloud render, Lambda, or Cloud Run for HyperFrames?▼

Use hyperframes cloud render for zero-infrastructure HeyGen-hosted rendering, lambda render only when you require self-managed AWS infrastructure, and cloudrun render only when GCP ownership is explicit. Local render remains the fastest option for the authoring loop.

Why does hyperframes render fail with Chrome or FFmpeg errors?▼

Run npx hyperframes doctor first; it checks Node.js version, FFmpeg, Chrome, memory, and Docker. Missing bundled Chrome is fixed with npx hyperframes browser ensure, and sandboxed environments that block Chrome require render --docker or cloud rendering instead.

How do I batch render a HyperFrames template with variables?▼

Declare variables with data-composition-variables in the composition, then run render --batch rows.json with an output template like renders/{name}.mp4. Add --strict-variables to validate every row before rendering, and inspect the generated manifest.json for per-row status.

What are the limitations of hyperframes cloud render uploads?▼

Direct uploads are limited to 200 MB. Use cloud render --dry-run --json to inspect the archive, then add narrow rules to .hyperframesignore for generated outputs; never exclude index.html, compositions, fonts, or media merely because they are large.

Related Skills

Explore More Software Engineering Skills→
calesthiocalesthio
55.1k

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Community
Intermediate
y-ymmty-ymmt

youtube-uploader

Upload Manim-generated MP4 videos to YouTube with configurable metadata.

Community
Intermediate
wesleysimpliciowesleysimplicio
1

hyperframes-media

Preprocess HyperFrames media assets to generate TTS narration, transcripts, and background-removed overlays.

Community
Intermediate
kofiarhinkofiarhin

hyperframes

Create timed HTML video compositions with GSAP animations and WCAG contrast validation.

Community
Advanced