Core Idea
The author's design philosophy, what sets this apart from peer projects, and quick notes on the key workflows. Skill names mentioned in the text auto-link to their detail pages.
HyperFrames is an agent-oriented framework that turns HTML/CSS/media into deterministic MP4 videos. Unlike monolithic video tools, it ships 19 on-demand skills organized as a router + creation workflows + atomic domain skills.
npx hyperframes skills update installs just the core set; workflows self-install via the router.Best for agents in Claude Code, Cursor, Codex, etc.
Skill Relationships
Skill → Skill usage relationships, with cross-layer references. Same color blocks indicate the same skill form.
Skill Composition
Each skill is designed for a specific kind of caller — some only fire when you name them, others load automatically when the model judges them relevant. The split below summarises both modes at a glance.
These skills only fire when you call them by name. The agent will not load them on its own — they stay inert until invoked.
These skills are loaded automatically by the agent when it judges the context relevant. You usually don't need to call them yourself.
Skill List
Embedded Captions turns talking-head videos into styled caption videos using a rail (lower-third subtitle) plus embed peaks composited behind the subject. It picks one of 36 identities, runs matte/transcribe/QA pipelines, and outputs final.mp4 with untouched footage and deterministic captions.
Turns arbitrary text into a faceless explainer video with invented per-scene visuals (typography, graphics, diagrams). Uses a 7-step HyperFrames workflow with design presets, storyboard planning, and frame sub-agents. Outputs a rendered MP4 explainer for topics, how-tos, listicles.
Imports Figma content into HyperFrames compositions via REST CLI and Figma MCP. Covers assets, brand tokens, components, motion, and shaders with local freezing and brand-variable binding. Delivers deterministic, editable video compositions from Figma designs.
General video skill orchestrates HyperFrames-based video creation from brief to render. It updates itself via CLI, applies media/figma adapters, resolves project state, interprets run shape, and loads required knowledge skills per stage. Value: a coordinated, contract-driven workflow that keeps general video builds consistent and on-quality.
HyperFrames entry-point skill that routes any HTML-to-video request to the right workflow. It evaluates project state, adapts Figma/PR inputs, routes fresh creation by deliverable, and keeps the CLI pin current. Value: one consistent front door that avoids mis-routing and redundant questions across video skills.
HyperFrames Animation provides all motion knowledge: atomic rules, scene blueprints, transitions, techniques, and 7 runtime adapters (GSAP default). It helps compose deterministic, seek-safe animations by picking rules or loading blueprints and auditing via scripts. Value: faster authoring of render-ready video compositions.
A CLI skill for HyperFrames video projects: scaffold, lint, check, preview, and render compositions via `npx hyperframes`. It enforces a validation gate, sub-composition smoke tests, and cloud/distributed render paths. Value: deterministic, reproducible video builds with quality control and agent-friendly JSON output.
The HyperFrames composition contract skill teaches how to build one renderable HTML-based video project: structure, data-* timing, clips/tracks, sub-compositions, variables, deterministic rules, and validation. It delivers correct, seekable, framework-owned compositions and covers Tailwind and STORYBOARD/SCRIPT plans.
Non-animation creative direction for HyperFrames videos: handles design specs, palettes, typography, narration, beat planning, audio-reactive visuals, and brand decisions. Method: read spec or pick route, plan beats, use references and scripts. Value: coherent style and validated plan ready for animation.
Guides authoring of seek-safe keyframe animations in HyperFrames across GSAP/CSS/Anime.js/WAAPI. Provides contract, runtime rules, mechanism choice, and CLI verification. Outputs deterministic, verified pose animations with continuous identity.
Install, discover, and wire reusable registry blocks/components into HyperFrames compositions via the `hyperframes` CLI. Covers `add`/`catalog` commands, install paths in hyperframes.json, block sub-composition wiring and component snippet merging, plus authoring new items to contribute upstream. Value: speeds composition assembly with validated, reusable pieces.
Agent Media OS for HyperFrames: one skill resolves, generates, operates, and remembers every media type (audio, image, icon, logo, voice, grade, LUT). Via `resolve` it freezes local files or paste-ready blocks + ledger records, uses TTS/music/image models when catalog misses, and runs a shared audio engine for voiceover, transcription, captions. Keeps search noise off disk and hands the agent one path or block.
Creates short, design-led, unnarrated motion graphics under ~10s using HyperFrames. Method: director subagent plans category and asset strategy, media-use resolves assets, builder reuses catalog blocks to compose. Output: verified MP4/WebM motion graphic with explicit render approval.
Turns a music track into a beat-synced HyperFrames video (lyric video, slideshow, kinetic promo). Method: analyze beats via analyze-beatgrid.py, lay frames, fill plan, build per-frame compositions, assemble and render. Value: produces a complete video driven by music pacing with zero required assets.
Turns a GitHub pull request into a code-change explainer video from the diff, commits, and files. Uses gh to fetch PR data and HyperFrames to build frame-by-frame compositions via a 7-step orchestrated workflow. Produces a rendered MP4 with storyboard, script, captions, and contributor credits for changelogs or refactor walkthroughs.
Turns a product/marketing URL, script, or brief into a launch/promo video (SaaS promos, demos, app/company launches) via a 7-step HyperFrames workflow. Uses hyperframes CLI to capture, design, storyboard, and render. Outputs a branded, frame-by-frame MP4 that markets the product.
Ports an existing Remotion (React) composition's source to HyperFrames HTML in a one-way, mechanical translation. Uses lint, API-map references, and SSIM eval to convert ~80% of idioms directly, blocking lossy React state patterns. Produces a seek-driven HF composition with documented gaps and regression-tested fidelity.
A skill for authoring navigable HyperFrames slideshows from scenes plus a JSON island manifest. It covers slide schema, fragments, branching, writing rules, and validation. Output is a live presentable deck with notes and presenter mode, not a linear MP4.
Packages an existing talking-head video with timed designed graphic overlay cards (titles, lower-thirds, quotes, PiP) synced to transcript on chosen canvas. Uses hyperframes CLI + ffmpeg for local Whisper transcription and HTML-to-MP4 render. Delivers a dressed-up video with untouched clip and on-screen graphics.
Installation
Copy and run in your terminal to add heygen-com/hyperframes to your Agent environment.
npx skills add heygen-com/hyperframes