Agent skill

HyperFrames Registry

by heygen-com in heygen-com/hyperframes

Searches the HyperFrames registry for ready-made blocks and components, installs them with `hyperframes add`, and wires them into a video composition.

Apache-2.0Auto-check passedMedia & Creative

Install HyperFrames Registry

skills CLI
$ npx skills add heygen-com/hyperframes --skill hyperframes-registry -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install heygen-com/hyperframes hyperframes-registry --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/heygen-com/hyperframes.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/hyperframes-registry .claude/skills/hyperframes-registry && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
hyperframes-registry
GitHub stars
59k
Used in
4 other repos
Token cost
~2.5k tokens
SKILL.md length
1,089 words
Files
12 (incl. references)
Skills in repo
32
Repo updated
First seen
Licence
Apache-2.0

At a glance

Searches the HyperFrames registry for ready-made blocks and components, installs them with `hyperframes add`, and wires them into a video composition.

  • Works in 5 steps: Read the installed file (e.g.,… → Copy the HTML elements into your… → Copy the block into your composition's… → …
  • A storyboard names an effect such as film grain, glitch or CRT scanlines
  • SKILL.md covers Quick reference, Install locations, Wiring blocks and Wiring components, plus 2 more sections
  • Calls npx and curl

What it does

The registry offers two kinds of items. Blocks are standalone sub-compositions with their own dimensions, duration and timeline, included in a host composition through `data-composition-src`. Components are effect snippets with no dimensions of their own, pasted straight into the host HTML. A command such as `hyperframes add data-chart` installs an item by exact name or, when the value is a tag, every block carrying that tag, and registry dependencies install first.

Blocks land in `compositions/` and components in `compositions/components/` by default, and both paths can be changed in `hyperframes.json`. After an install the CLI prints the files written and a snippet to paste, and wiring a block still needs a `data-composition-id` matching the block's internal id plus `data-start` and `data-track-index` attributes. The skill says to search the roughly 400 hosted items before hand-building a named effect such as CRT scanlines, glitch, film grain or a chart. References also cover discovery and contributing a new block upstream.

When your agent uses it

  • A storyboard names an effect such as film grain, glitch or CRT scanlines
  • Adding a chart, map, terminal window or confetti burst to a HyperFrames video
  • Installing every registry block that carries a given tag
  • Contributing a new block or component to the registry

Example prompts

  • “Add a film grain overlay to the intro scene of this HyperFrames project.”
  • “Install the data-chart block and wire it into index.html so it starts at the five second mark.”
  • “Install every block tagged captions and show me which files were added.”

Requirements

  • The `hyperframes` CLI
  • A HyperFrames project with an `index.html` composition to wire items into

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Read the installed file (e.g., compositions/components/grain-overlay.html)
  2. Copy the HTML elements into your composition's
  3. Copy the block into your composition's styles
  4. Copy any content into your composition's script (before your timeline code)
  5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline

What it can do on your machine

Read from SKILL.md and the folder at commit 0c76e52. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npx
    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and curl, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

HyperFrames Registry loads about 2.5k tokens when it runs, and up to ~20k if it reads all its reference files. Until then it costs about 228 tokens; SKILL.md has 1,089 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~228
When it runs · the whole SKILL.md, loaded when a task matches
~2.5k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~20k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from heygen-com/hyperframes at commit 0c76e52, republished under its Apache-2.0 licence (© heygen-com). 1,089 words, ~2,472 tokens.

Download SKILL.mdSave it as .claude/skills/hyperframes-registry/SKILL.md (or your agent's skills folder). This skill also uses 11 other files; get the full folder from GitHub.
name
hyperframes-registry
description
Search, install, and wire registry blocks and components into HyperFrames compositions. Use BEFORE hand-building any named visual — whenever a brief, a user, or a storyboard names a look, effect, treatment, or transition such as CRT scanlines, glitch, chromatic aberration, film grain, a shimmer sweep, a chart, a code or terminal window, a map, or a confetti burst — because roughly 400 hosted items already cover many of them and the search ranks all of them with nothing installed, no project, and no account. Also use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Plugin installs: Before setup or freshness commands, follow plugin execution rules when this skill is inside a HyperFrames plugin. Standalone installs keep the update instructions below.

HyperFrames Registry

The registry provides reusable blocks and components installable via hyperframes add <name>.

  • Blocks — standalone sub-compositions (own dimensions, duration, timeline). Included via data-composition-src in a host composition.
  • Components — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.

Quick reference

bash
hyperframes add data-chart              # install a block
hyperframes add grain-overlay           # install a component
hyperframes add captions                # install every block tagged captions
hyperframes add shimmer-sweep --dir .   # target a specific project
hyperframes add data-chart --json       # machine-readable output
hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)

After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point — you'll need to add data-composition-id (must match the block's internal composition ID), data-start, and data-track-index attributes when wiring blocks.

The positional value is resolved as an exact item name first. If no item matches and the value is a tag, the command installs every block with that tag. Registry dependencies are installed before the requested item. hyperframes add works only for blocks and components; for examples, use hyperframes init <dir> --example <name> instead.

Install locations

Blocks install to compositions/<name>.html by default. Components install to compositions/components/<name>.html by default.

These paths are configurable in hyperframes.json:

json
{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}

See install-locations.md for full details.

Wiring blocks

Blocks are standalone compositions — include them via data-composition-src in your host index.html:

html
<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Key attributes:

  • data-composition-src — path to the block HTML file
  • data-composition-id — must match the block's internal ID
  • data-start — when the block appears in the host timeline (seconds)
  • data-duration — how long the block plays
  • data-width / data-height — block canvas dimensions
  • data-track-index — Studio timeline row; display only. Use CSS z-index for layering

See wiring-blocks.md for full details.

Wiring components

Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):

  1. Read the installed file (e.g., compositions/components/grain-overlay.html)
  2. Copy the HTML elements into your composition's <div data-composition-id="...">
  3. Copy the <style> block into your composition's styles
  4. Copy any <script> content into your composition's script (before your timeline code)
  5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline

See wiring-components.md for full details.

Discovery

Use the CLI as the primary discovery surface. Search by intent before browsing: the registry holds more items than you can scan by eye, so listing them and matching on names or tags is the slow path, and it fails whenever the author's wording differs from yours.

bash
# Rank the whole catalog against what the beat should do
npx hyperframes catalog --query "reveal a headline one line at a time"
npx hyperframes add caption-clip-wipe

Search is local and sends nothing. By default it ranks on vocabulary shared with the item's name, title and description, so it only finds items that reuse your words; --on-device ranks by meaning instead, after a one-time model download. With --json the envelope names which tier answered, so check that rather than assuming a ranking happened.

Always query in English, whatever language the video is in. The catalog is written in English and both tiers index it that way (the on-device model is English-only too). A query in another script produces no searchable terms and returns nothing at all. This is easy to get wrong on a Japanese or Chinese project, where the brief, the captions and the narration are all in that language and the query naturally follows: describe the move in English, then write the on-screen copy in whatever language the video needs. If a query does come back with No searchable words in query, that is this rule, not a missing component, and it is not worth a gap report.

Installability is applied after ranking, not before it: a name the vectors carry but this registry cannot serve is dropped from the results and counted in dropped, so a non-zero dropped means the two are different generations. See /hyperframes-cli for the offline tier, the consent gates, and how to refresh a stale index.

To browse or filter instead of search:

bash
npx hyperframes catalog
npx hyperframes catalog --type block
npx hyperframes catalog --type component
npx hyperframes catalog --type block --tag social
npx hyperframes catalog --json
npx hyperframes catalog --human-friendly

The normal table and --json modes only list matches; install a selected name with hyperframes add <name>. --human-friendly opens an interactive picker and installs the selected item immediately. In CI or agent workflows, prefer --json followed by an explicit add.

Show full SKILL.md (419 more words)Show less
Report what the catalog does not have

When the search comes back and nothing in it does the job, say so before you hand-author the move:

bash
npx hyperframes feedback --search-miss "<the query you ran>" --wanted "<the move you needed>" --tier <the tier that answered>

catalog --query prints this line for you, pre-filled, and --json carries it as report_gap — so it is already in hand at the moment you decide nothing fits.

Report whenever nothing in the results does the job, on either tier. Do not wait for the on-device tier to have answered: it needs a consented 33 MB download, so an agent run is on words unless it explicitly opted in, and gating on on-device would silence almost every report. The --tier value rides along so a vocabulary miss stays distinguishable from a meaning miss when these are read. Describe the effect you wanted, not the item name you imagined: what comes back is a list of moves worth building, and a report naming a non-existent item teaches nothing. This is the only path that sends a query anywhere, which is exactly why it is a separate deliberate command rather than something the search does on its own. It carries no rating and never lands in the rating metric.

This is the whole demand signal for the catalog. Skipping it means the gap you hit gets guessed at from install counts instead, which cannot see a move nobody could install.

If the CLI cannot reach the configured registry, inspect the raw manifest as a fallback:

bash
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

A registry the CLI cannot reach does not empty the catalog for discovery: a previously fetched manifest keeps serving past its 24h refresh window whenever revalidation fails, so catalog and catalog --query still list and rank against the last copy on disk.

add still needs the network, even for an item you installed yesterday. Only manifests are cached; the item's actual files are fetched on every install. So offline you can search, and you can see what an item is, but installing it fails at the file fetch. Do not promise a user an offline install.

Each item's registry-item.json contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.

See discovery.md for details on filtering by type and tags.

Contributing a new block or component

To author a NEW registry item (caption style, VFX block, transition, lower third, or a reusable component) and ship it as an upstream PR — not install an existing one — follow the full idea → scaffold → build → validate → preview → ship workflow in contributing.md. Copy-paste starter templates (caption / VFX / component / registry-item.json) are in templates.md.

© heygen-com, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 11 other files (references) in skills/hyperframes-registry of heygen-com/hyperframes.

  • SKILL.md
  • examples/add-block.md
  • examples/add-component.md
  • references/component-quality-bar.md
  • references/contributing.md
  • references/demo-html-pattern.md
  • references/discovery.md
  • references/install-locations.md
  • references/placeholder-material.md
  • references/templates.md
  • references/wiring-blocks.md
  • references/wiring-components.md

Open the folder on GitHubat commit 0c76e52

Used in 4 other repositories

We found 6 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 4 other GitHub owners. This page covers the copy in heygen-com/hyperframes, which our catalogue first saw on October 7, 2026.

Compare with similar skills

HyperFrames Registry next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

HyperFrames Registry compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
HyperFrames Registry this skillheygen-com/hyperframes59k4 repos~2.5kAutomated safety check: PassApache-2.0
Short Form Editnateherkai/hyperframes-student-kit1.2k—~5.3kAutomated safety check: PassCustom licence
3D Camera Captions for HyperFramesheygen-com/hyperframes-community-skills1781 repos~2.3kAutomated safety check: PassApache-2.0
Plotbeat Data VideosUnclecheng-li/AI_Animation1.5k—~2.6kAutomated safety check: PassMIT
Yuv Viral Videohoodini/ai-agents-skills281—~7.5kAutomated safety check: NotesNone
HyperFrames Studio Timeline Conventionsedenfunf/reelmimic1.7k1 repos~916Automated safety check: PassMIT

Similar skills

  • Short Form Edit

    nateherkai/hyperframes-student-kit

    Turn talking-head footage into a finished reel, YouTube Short, or short advertisement with curiosity-led openings, earned payoffs, story-driven cuts, transcript-synced motion graphics, moving…

    1.2k GitHub stars~5.3k tokensUpdated 9 days ago
    Media & CreativeAuto-check passed
  • 3D Camera Captions for HyperFrames

    heygen-com/hyperframes-community-skills

    Builds captions that move in 3D space around a talking head: a virtual camera flies past words at different depths, hero words hide behind the speaker, and text steps at 15 fps with motion blur.

    178 GitHub starsUsed in 1 repo~2.3k tokens
    Media & CreativeAuto-check passed
  • Plotbeat Data Videos

    Unclecheng-li/AI_Animation

    Turns a local CSV or JSON file, or data fetched from an approved source, into an editable data-visualization video by adapting HyperFrames templates.

    1.5k GitHub stars~2.6k tokensUpdated 2 days ago
    Media & CreativeAuto-check passed
  • Yuv Viral Video

    hoodini/ai-agents-skills

    Edit any selfie or screen-share footage into a viral short-form video in YUV.AI's signature style — Apple-style liquid-glass cards (real CSS backdrop-filter), dark-mode polish, MrBeast-paced cuts…

    281 GitHub stars~7.5k tokensUpdated 2 mo ago
    Media & CreativeAuto-check: notes
  • Conventions for laying out a HyperFrames project so it opens as a readable Studio timeline: one caption track, one element kind per track, scenes as sub-compositions, and safe zones.

    1.7k GitHub starsUsed in 1 repo~916 tokens
    Media & CreativeAuto-check passed
  • Short Form Video

    nateherkai/hyperframes-student-kit

    Maintain the existing May Shorts teaching compositions using their legacy face-mode, scene-overlay, and karaoke-caption patterns.

    1.2k GitHub stars~5k tokensUpdated 9 days ago
    Media & CreativeAuto-check passed

More from heygen-com/hyperframes

All 32 skills in this repo
  • HyperFrames Animation

    heygen-com/hyperframes

    Collects motion rules, scene blueprints, transitions and runtime adapters for HyperFrames video compositions, with GSAP as the default animation runtime.

    59k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed
  • Embedded Video Captions

    heygen-com/hyperframes

    Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.

    59k GitHub starsUsed in 3 repos~8.6k tokens
    Auto-check passed
  • Weekly Changelog Video

    heygen-com/hyperframes

    Turns a weekly changelog markdown file into a branded HyperFrames video with voiceover, animated mock-UI scenes and captions, using fonts, background and scripts bundled in the skill.

    59k GitHub stars~3.3k tokensUpdated today
    Auto-check passed
  • Faceless Explainer Video

    heygen-com/hyperframes

    Turns an article, notes or a topic brief into an explainer video whose visuals are invented per scene, built frame by frame in HyperFrames with no footage.

    59k GitHub starsUsed in 3 repos~7.7k tokens
    Auto-check: notes
  • Figma to HyperFrames

    heygen-com/hyperframes

    Imports Figma assets, brand tokens, components and motion into a HyperFrames video composition, using the Figma REST API with a connector or native export for shaders.

    59k GitHub starsUsed in 3 repos~4.5k tokens
    Auto-check: notes
  • HyperFrames Media Use

    heygen-com/hyperframes

    Finds, generates and edits media for HyperFrames video projects: music, sound effects, images, icons, logos, voiceovers, captions and color grades.

    59k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

Works with

Questions about HyperFrames Registry

What does HyperFrames Registry do?

Searches the HyperFrames registry for ready-made blocks and components, installs them with `hyperframes add`, and wires them into a video composition. The registry offers two kinds of items. Blocks are standalone sub-compositions with their own dimensions, duration and timeline, included in a host composition through `data-composition-src`.

When should I use HyperFrames Registry?

HyperFrames Registry fits situations like: A storyboard names an effect such as film grain, glitch or CRT scanlines; adding a chart, map, terminal window or confetti burst to a HyperFrames video; installing every registry block that carries a given tag; contributing a new block or component to the registry.

How do I install HyperFrames Registry in Claude Code?

Run `npx skills add heygen-com/hyperframes --skill hyperframes-registry -a claude-code`. Or copy the skill folder (skills/hyperframes-registry in heygen-com/hyperframes) into .claude/skills/hyperframes-registry in your project. Claude Code loads it when a task matches its description.

How do I install HyperFrames Registry in Codex?

Run `npx skills add heygen-com/hyperframes --skill hyperframes-registry -a codex`. Or copy the skill folder (skills/hyperframes-registry in heygen-com/hyperframes) into .agents/skills/hyperframes-registry in your project. Codex loads it when a task matches its description.

Can I use HyperFrames Registry in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add heygen-com/hyperframes --skill hyperframes-registry -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hyperframes-registry, .gemini/skills/hyperframes-registry, .github/skills/hyperframes-registry and .opencode/skills/hyperframes-registry in your project.

What does HyperFrames Registry need to run?

Going by SKILL.md and its folder, HyperFrames Registry needs the command-line tools its instructions call (npx and curl). Our summary lists: The `hyperframes` CLI; A HyperFrames project with an `index.html` composition to wire items into.

Does HyperFrames Registry access the network?

SKILL.md contains no URLs. Its commands use npx and curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is HyperFrames Registry safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does HyperFrames Registry use?

HyperFrames Registry is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does HyperFrames Registry use?

About 2.5k tokens (SKILL.md is roughly 9.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 17k tokens, read only when the agent opens those files.

What are the alternatives to HyperFrames Registry?

Skills that share tags, products or a category with HyperFrames Registry: Short Form Edit (nateherkai/hyperframes-student-kit, 1.2k stars), 3D Camera Captions for HyperFrames (heygen-com/hyperframes-community-skills, 178 stars), Plotbeat Data Videos (Unclecheng-li/AI_Animation, 1.5k stars) and Yuv Viral Video (hoodini/ai-agents-skills, 281 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains HyperFrames Registry?

heygen-com (a GitHub organization) maintains it in heygen-com/hyperframes, which has 58,669 GitHub stars. The repository holds 32 skills in this directory. The repository was last updated on October 8, 2026.

Source: heygen-com/hyperframes on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.