hyperframes

Routes video and animation creation requests to HyperFrames HTML-composition workflows.

Updated Sep 23, 2026
One-click install
npx skills add https://github.com/ehadziabdic/WAgents --skill hyperframes-ehadziabdic
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/ehadziabdic/WAgents/tree/main/opencode/skills/hyperframes
Command: npx skills add https://github.com/ehadziabdic/WAgents --skill hyperframes-ehadziabdic

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Creating videos, animations, and motion graphics requires choosing the right production workflow for each deliverable, and resuming or editing existing projects without re-asking settled questions. This Skill acts as the mandatory entry point for HyperFrames, which renders video from HTML compositions, by inspecting project state, capturing intent once, and routing to the correct workflow. ## Core Features & Use Cases - State-aware routing: Detects whether a request is a fresh creation, an edit, a project operation (inspect, validate, preview, render, publish, batch-render), or a Remotion port, and acts accordingly. - Intent interview and brief: Runs a structured conversation that ends by writing BRIEF.md, the single routing artifact workflows read, so questions are never repeated. - Workflow and domain skill orchestration: Routes to ten workflows (slideshow, embedded-captions, talking-head-recut, music-to-video, motion-graphics, pr-to-video, product-launch-video, faceless-explainer, general-video, remotion-to-hyperframes) and lazy-loads domain skills for animation, keyframes, audio, media, CLI, registry, and Figma. - Use Case: A user says "make a promo video for my website." The Skill runs the intent interview, confirms destination and run shape, writes BRIEF.md, installs the product-launch-video workflow via npx hyperframes skills update, and hands off execution. ## Quick Start Ask the agent to create a short explainer video about your topic and let it route the request through the HyperFrames entry point.

Frequently Asked Questions about hyperframes

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

FAQPage Schema
How do I create a video from HTML with HyperFrames?▼

Describe the video you want and the entry point runs an intent interview, writes BRIEF.md, then routes to a workflow such as faceless-explainer or product-launch-video. The workflow builds an HTML composition whose DOM declares timing with data-* attributes and renders it to video.

How do I add captions or overlays to existing footage?▼

Plain captions or subtitles on talking-head footage route to the embedded-captions workflow, while designed graphic overlays route to talking-head-recut. Retiming, reordering, or recoloring footage is a custom edit handled by general-video.

Can I port a Remotion project to HyperFrames?▼

Yes, an explicit Remotion port routes directly to the remotion-to-hyperframes workflow and skips the intent interview entirely. The route contract in references/routes/remotion-to-hyperframes.md is read before execution.

Does HyperFrames support Figma designs as input?▼

Yes, a figma.com URL triggers the figma skill to extract assets, brand tokens, components, and storyboard frames before routing. Figma input changes intake, not which workflow owns the deliverable.

Why does the skill ask questions before building a video?▼

The intent layer asks creation questions once and writes the confirmed answers to BRIEF.md, which becomes the no-repeat token for the run. Any project with an existing BRIEF.md resumes without re-asking brief questions.

What are the limitations of the narrative video workflows?▼

Specialized narrative workflows support up to about 3 minutes and are strongest around 30-90 seconds. Clearly longer pieces route to general-video, though length never overrides an explicit port, deck, caption, overlay, or music-driven deliverable.