skills.rest
Noetfield-Systems
Noetfield-SystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyperframes-cli

Scaffold, lint, inspect, preview, and render HyperFrames HTML video compositions via npx commands.

Updated Jun 20, 2026
Search Tags:#scaffolding#cli#lint#mp4#video rendering#hyperframes#html composition
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill hyperframes-cli-noetfield-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-cli
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/hyperframes-cli
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill hyperframes-cli-noetfield-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building HTML-based video compositions requires a repeatable dev loop: scaffolding projects correctly, catching layout and timeline errors before rendering, previewing changes live, and producing final MP4 or WebM output. This Skill provides the complete HyperFrames CLI command reference so agents and developers run the right command with the right flags at each stage. ## Core Features & Use Cases - Project scaffolding: npx hyperframes init creates projects from templates like blank, warm-grain, kinetic-type, or product-promo, with optional video, audio, Tailwind v4, and non-interactive CI modes. - Validation and visual inspection: lint catches missing data-composition-id and overlapping tracks, while inspect renders the composition in headless Chrome and reports text overflowing bubbles, containers, or the canvas. - Preview and render: preview serves a hot-reloading studio, and render produces MP4 or transparent WebM with quality, fps, Docker reproducibility, and parametrized variable overrides. - Use Case: After authoring a composition, run lint and inspect to catch text overflow in speech bubbles, fix the flagged elements, then render a 60fps high-quality MP4 for final delivery. ## Quick Start Run npx hyperframes doctor to verify the environment, then scaffold a project with npx hyperframes init my-video and preview it.

Frequently Asked Questions about hyperframes-cli

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

FAQPage Schema
How do I render an HTML composition to MP4 with HyperFrames?▼

Run npx hyperframes render in the project directory to produce a standard MP4. Use --quality draft while iterating, --fps 60 --quality high for final delivery, --format webm for transparent output, or --docker for byte-identical reproducible renders.

How do I scaffold a new HyperFrames video project?▼

Run npx hyperframes init my-video for the interactive wizard, or pass --example with a template like warm-grain, kinetic-type, or product-promo. Add --video or --audio to include media files, --tailwind for Tailwind v4, or --non-interactive for CI and agents.

How do I detect text overflowing containers in a video composition?▼

Run npx hyperframes inspect after linting. It renders the composition in headless Chrome, sweeps the timeline, and reports text spilling out of bubbles, clipped by fixed-size boxes, or extending off the canvas, with --json for agent-readable output.

What are the system requirements for HyperFrames rendering?▼

HyperFrames requires Node.js 22 or higher and FFmpeg, plus Chrome for rendering. Run npx hyperframes doctor to check the environment; it diagnoses missing FFmpeg, missing Chrome, and low memory, which are the most common render failures.

Why does my HyperFrames render fail and how do I fix it?▼

Render failures usually come from missing FFmpeg, missing Chrome, or insufficient memory. Run npx hyperframes doctor first to diagnose the environment, use npx hyperframes browser to manage the bundled Chrome, and run lint with --strict to catch composition errors before rendering.

Can I pass dynamic variables to a HyperFrames render?▼

Yes. Declare variables on the html root with data-composition-variables, then override defaults per render using --variables with a JSON object or --variables-file with a JSON file. Add --strict-variables to fail on undeclared keys or type mismatches.

Related Skills

Explore More Design & Creative Skills→
cosmicstack-labscosmicstack-labs
364

hyperframes

Create HTML-driven video compositions with timed clips and deterministic animation for MP4 rendering.

Official
Advanced
tpotttpott

add-subtitles

Embed SRT subtitles into WEBM, MP4, or MKV videos using ffmpeg.

Community
Basic
automatedigitalautomatedigital
1

hyperframes-media

Generate voiceovers, transcribe media, and remove backgrounds for HyperFrames compositions.

Official
Intermediate
FreedomLabNYCFreedomLabNYC

programmatic-video

Generate deterministic video content using Three.js, Remotion, and FFmpeg.

Official
Advanced