HyperFrames registry skill: ready-made video blocks and components for your agent

Source: heygen-com/hyperframes · Maintainer: HeyGen · License: Apache-2.0 · Checked: 24 October 2026

What is the HyperFrames registry skill?

The HyperFrames registry skill teaches a coding agent to start from a ready-made effect instead of writing one from scratch. It searches the HyperFrames catalog of about 450 blocks and components (transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D and camera moves), installs the right item as editable source, and wires it into the video.

The skill's description says to use it "before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog." Its opening argument is practical: "Starting from an item is faster and usually better than writing the effect yourself, and an installed item is ordinary source in your project: change it, cut it down, restyle it."

It belongs to HeyGen's open-source HyperFrames framework, which renders HTML compositions to MP4. The README lists it in the core set with /hyperframes, /hyperframes-cli and /media-use. Its skills.sh page listed about 989,000 installs (snapshot, 24 October 2026), first seen on 15 April 2026.

What does it do?

The SKILL.md is short, about 56 lines, with ten reference files and two worked examples. It covers three jobs.

Find and install. Two commands do most of the work:

npx hyperframes catalog --query "<what the beat should do, in English>" --json
npx hyperframes add <name> --json

add prints the files it wrote and a snippet for mounting the item. The skill adds rules the agent would otherwise get wrong:

• Query in English even when the video is not, because the catalog is indexed in English.
• Narrow results with --type block|component and --tag <tag>. add <tag> installs every block with that tag, dependencies first.
• If nothing fits, report the gap before hand-building, using the pre-filled feedback --search-miss line that catalog --query prints.

Know what's in it. Two tables give example items so the agent knows the catalog's range:

You can browse the same items in the HyperFrames catalog.

Wire it in. A block installs to compositions/<name>.html and mounts in your root composition with data-composition-src, a data-composition-id matching the block's own id, data-start and data-duration. The wiring reference explains that the runtime finds the block's own timeline and seeks it in sync with the host, offset by data-start. A component installs to compositions/components/<name>.html; the agent copies its markup, style and script into your scene. Items keep their own variables, which you can set per mount with data-variable-values and point at your brand colours and fonts. Beat-synced blocks take hit times from npx hyperframes beats --json.

The references also cover contributing a new block or component upstream, with starter templates and a quality bar.

How do you install it?

The README and the HyperFrames skills guide document these routes.

The core set, the recommended standalone install. It brings /hyperframes, /hyperframes-cli, /hyperframes-registry and /media-use from the current main branch:

npx hyperframes skills update

Just this skill, using the command shown on skills.sh:

npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-registry

This skill assumes the main /hyperframes skill for the composition rules, so installing it alone is rarely useful. The README also warns that skills add reads the skills.sh registry copy, which "can lag main by hours."

The Claude Code plugin, which bundles every published HyperFrames skill:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

See Claude Code's plugin docs for marketplaces and its skills docs for where standalone skills live. Codex and Cursor read the same SKILL.md format: see Codex skills and Cursor skills.

Rendering needs Node.js 22 or later and FFmpeg, per the README.

How do you use it?

The skill is model-invoked. When you ask for a named visual such as a glitch transition, lower third or animated chart, the agent should search the catalog before writing the effect. You can also call it by name.

Example prompts (suggestions, not quotes from the repo):

• Before building anything, use /hyperframes-registry to find a transition for the cut between scene 2 and scene 3.
• Add an animated bar chart race of the numbers in data.csv to the promo, starting at 5 seconds.
• Find a lower third for the speaker's name and title, and match it to our brand colours.
• Add film grain and a subtle camera shake to the whole intro scene.
• Search the catalog for a chat reveal effect. If nothing fits, tell me before you build one.

The README shows the same commands run by hand, for example npx hyperframes add data-chart for an animated chart.

Tips and limits

From the skill and its references, not from testing:

• Edit after installing. "Take the largest unit that fits, then edit it." Keep an installed item's id prefixes as they are so two items can't collide.
• Search tiers. The default words tier only finds items that reuse your wording. The on-device tier ranks by meaning after a one-time download of about 33 MB, and the skill says the agent should offer it and "never enable it silently."
• Network. Search works offline from the cached manifest, but add needs the network, even for an item installed before.
• Gap reports send your query. The search reference says the --search-miss report "is the only path that sends a query anywhere." Describe the effect, not the content of your video.
• Install paths are configurable in hyperframes.json, which init creates.

All three security audits on skills.sh (Gen Agent Trust Hub, Socket and Snyk) showed Pass on 24 October 2026. Under Apache-2.0 you can copy and modify the skill if you keep the license and notices.

Save it in your Kipt library

In Kipt, open Skills and paste the GitHub folder link into the import box. Kipt reads the SKILL.md with its references/ and examples/ folders. Because heygen-com/hyperframes holds several skills, Kipt shows a list so you can also take hyperframes, hyperframes-cli and media-use. Your copies live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with HeyGen or the HyperFrames project.

Similar skills

• HyperFrames skill: the composition contract every installed item follows.
• HyperFrames CLI skill: the full command line, including catalog and add.
• media-use skill: music, voiceover, images and colour grades.
• GSAP core skill: write GSAP timelines by hand when no catalog item fits.
• Remotion skill: React-based video, if you prefer components to HTML.