skills.rest
xzedm
xzedmCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes

Routes video and animation requests to HyperFrames HTML-based rendering workflows.

Updated Sep 3, 2026
Search Tags:#html#rendering#video#router#animation#motion graphics#hyperframes
One-click install
npx skills add https://github.com/xzedm/clipplic-landing --skill hyperframes-xzedm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes
Source: https://github.com/xzedm/clipplic-landing/tree/main/.agents/skills/hyperframes
Command: npx skills add https://github.com/xzedm/clipplic-landing --skill hyperframes-xzedm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? When an agent receives a request to make, edit, or animate a video, it must pick the right workflow instead of guessing. This Skill is the entry point for HyperFrames, which renders video from HTML compositions, and routes each request to the correct specialized workflow. ## Core Features & Use Cases - Intent routing: Maps requests like promos, explainers, PR videos, captions, motion graphics, music videos, and slideshows to the matching workflow skill such as /product-launch-video or /pr-to-video. - Capability map: Points to domain skills for authoring HTML compositions, animation, keyframes, creative direction, media, and the CLI dev loop. - Skill maintenance: Explains how to check and update installed HyperFrames skills with npx hyperframes skills check and update. - Use Case: A user says "turn PR #1187 into a changelog video"; the router matches it to /pr-to-video and confirms the workflow is installed before proceeding. ## Quick Start Ask the agent to read the hyperframes skill first, then describe the video you want, for example "make a 60-second promo for my product site".

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?▼

HyperFrames renders video from an HTML composition whose DOM declares timing with data-* attributes and whose animation runtime is seekable. Read the hyperframes-core skill for the authoring contract, then use the CLI to preview and render to MP4.

Which HyperFrames workflow should I use for my video request?▼

Match the input: a product URL or brief goes to /product-launch-video, a non-commercial site tour to /website-to-video, a topic explanation to /faceless-explainer, and a GitHub PR to /pr-to-video. Anything unmatched falls back to /general-video.

Can HyperFrames add captions to an existing video?▼

Yes, the /embedded-captions workflow transcribes talking-head footage locally with Whisper and adds a caption layer without altering the footage. For designed graphic overlays like lower-thirds and data callouts, use /talking-head-recut instead.

What if the matched HyperFrames workflow skill is not installed?▼

Install a single workflow with npx skills add heygen-com/hyperframes --skill <workflow-name>, or install all workflows with --all. After installation, re-read the workflow skill and continue the request.

Can I migrate a Remotion composition to HyperFrames?▼

Yes, the /remotion-to-hyperframes workflow ports an existing Remotion React composition to a HyperFrames HTML composition. It is a one-way migration triggered only by an explicit port or convert request, graded against the Remotion render with an SSIM eval harness.

Related Skills

Explore More Design & Creative Skills→
Pixazo-AIPixazo-AI

sync-lipsync

Lip-sync talking-head videos to audio tracks via the Sync.so API through Pixazo.

Official
Intermediate
hoanghd218hoanghd218
3

make-a-video

Create end-to-end video production workflows from concepts to MP4 outputs.

Community
Advanced
bilibilibilibili
120

carocut-media-audio

Generate voiceovers with Edge TTS and retrieve BGM/SFX for Remotion video projects.

Official
Advanced
digitalsambadigitalsamba
1.9k

playwright-recording

Record browser interactions as video using Playwright scripts.

Official
Intermediate