Agent skill

Hyperframes Registry

by chmonitor in chmonitor/chmonitor

Install and wire registry blocks and components into HyperFrames compositions.

GPL-3.0Auto-check passedMedia & Creative

Install Hyperframes Registry

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

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

GitHub CLI
$ gh skill install chmonitor/chmonitor 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/chmonitor/chmonitor.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/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
298
Used in
8 other repos
Token cost
~1.1k tokens
SKILL.md length
371 words
Files
10 (incl. references)
Skills in repo
53
Repo updated
First seen
Licence
GPL-3.0

At a glance

Install and wire registry blocks and components into HyperFrames compositions.

  • Works in 5 steps: Read the installed file (e.g.,… → Copy the HTML elements into your… → Copy the block into your composition's… → …
  • Running hyperframes add
  • SKILL.md covers Quick reference, Install locations, Wiring blocks and Wiring components, plus 2 more sections
  • Calls curl; reaches raw.githubusercontent.com

What it does

Hyperframes Registry is an agent skill from chmonitor/chmonitor. Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 11 other files, including reference files (for example `examples/add-block.md`, `examples/add-component.md` and `references/contributing.md`).

It sits in Media & Creative, covering Motion graphics. It works with HeyGen. The repository describes itself as: Open-source operational advisor for ClickHouse — real-time monitoring plus AI-driven index/partition/materialized-view recommendations. The licence is GPL-3.0.

When your agent uses it

  • Running hyperframes add
  • Installing a block
  • Wiring an installed item into index.html
  • Working with hyperframes.json

Example prompts

  • “/hyperframes-registry”

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 fc39ef0. 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:

    • curl

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

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • raw.githubusercontent.com

    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 1.1k tokens when it runs, and up to ~12k if it reads all its reference files. Until then it costs about 115 tokens; SKILL.md has 371 words of instructions outside code blocks.

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

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 chmonitor/chmonitor at commit fc39ef0, republished under its GPL-3.0 licence (© chmonitor). 371 words, ~1,126 tokens.

Download SKILL.mdSave it as .claude/skills/hyperframes-registry/SKILL.md (or your agent's skills folder). This skill also uses 9 other files; get the full folder from GitHub.
name
hyperframes-registry
description
Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

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 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.

Note: hyperframes add only works 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 — layer ordering (higher = in front)

See wiring-blocks.md for full details.

Show full SKILL.md (180 more words)Show less

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

Browse available items:

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

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.

© chmonitor, GPL-3.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 9 other files (references) in .agents/skills/hyperframes-registry of chmonitor/chmonitor.

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

Open the folder on GitHubat commit fc39ef0

Used in 8 other repositories

We found 10 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 8 other GitHub owners. This page covers the copy in chmonitor/chmonitor, 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 skillchmonitor/chmonitor2988 repos~1.1kAutomated safety check: PassGPL-3.0
HyperFrames Animationheygen-com/hyperframes58k3 repos~2.1kAutomated safety check: PassApache-2.0
Faceless Explainer Videoheygen-com/hyperframes58k3 repos~7.5kAutomated safety check: NotesApache-2.0
Figma to HyperFramesheygen-com/hyperframes58k3 repos~4.5kAutomated safety check: NotesApache-2.0
HyperFrames Video Entry Pointheygen-com/hyperframes58k3 repos~5.2kAutomated safety check: PassApache-2.0
Hyperframesboraoztunc/skills3939 repos~7.6kAutomated safety check: PassApache-2.0

Similar skills

  • 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.

    58k GitHub starsUsed in 3 repos~2.1k tokens
    Media & CreativeAuto-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.

    58k GitHub starsUsed in 3 repos~7.5k tokens
    Media & CreativeAuto-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.

    58k GitHub starsUsed in 3 repos~4.5k tokens
    Media & CreativeAuto-check: notes
  • HyperFrames Video Entry Point

    heygen-com/hyperframes

    Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.

    58k GitHub starsUsed in 3 repos~5.2k tokens
    Media & CreativeAuto-check passed
  • Hyperframes

    boraoztunc/skills

    Create video compositions, animations, title cards, overlays, captions, voiceovers, audio-reactive visuals, and scene transitions in HyperFrames HTML.

    393 GitHub starsUsed in 9 repos~7.6k tokens
    Media & CreativeAuto-check passed
  • Music to Video

    heygen-com/hyperframes

    Turns a music track into a beat-synced HyperFrames video such as a lyric video, slideshow or kinetic promo, with any supplied images or clips cut onto the beat grid.

    58k GitHub starsUsed in 4 repos~4.7k tokens
    Media & CreativeAuto-check: notes

More from chmonitor/chmonitor

All 53 skills in this repo
  • Hyperframes Creative

    chmonitor/chmonitor

    Non-animation creative direction for HyperFrames videos. An agent skill from chmonitor/chmonitor.

    298 GitHub starsUsed in 5 repos~1.3k tokens
    Auto-check passed
  • Hyperframes Media

    chmonitor/chmonitor

    Audio and media assets for HyperFrames compositions, produced by one shared audio engine (scripts/audio.mjs) — multi-provider TTS (HeyGen / ElevenLabs / Kokoro local), background music + sound…

    298 GitHub starsUsed in 1 repo~2.8k tokens
    Auto-check: notes
  • Remotion To Hyperframes

    chmonitor/chmonitor

    Port an existing Remotion (React) composition to HyperFrames HTML.

    298 GitHub starsUsed in 1 repo~2.5k tokens
    Auto-check passed
  • Music To Video

    chmonitor/chmonitor

    A skill your agent uses when the user has a music track (an audio file, or a video to pull audio from) and wants a beat-synced HyperFrames video, calm to hard-hitting.

    298 GitHub starsUsed in 1 repo~4k tokens
    Auto-check: notes
  • Hyperframes Animation

    chmonitor/chmonitor

    All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus…

    298 GitHub starsUsed in 2 repos~1.8k tokens
    Auto-check passed
  • Faceless Explainer

    chmonitor/chmonitor

    turn arbitrary text — an article, notes, a topic, a brief — into a faceless explainer video, up to ~3 min (sweet spot 30-90s), where every visual is invented (typography, abstract graphics…

    298 GitHub stars~4.5k tokensUpdated yesterday
    Auto-check: notes

Works with

Questions about Hyperframes Registry

What does Hyperframes Registry do?

Install and wire registry blocks and components into HyperFrames compositions. Hyperframes Registry is an agent skill from chmonitor/chmonitor. Install and wire registry blocks and components into HyperFrames compositions.

When should I use Hyperframes Registry?

Hyperframes Registry fits situations like: running hyperframes add; installing a block; wiring an installed item into index.html; working with hyperframes.json.

How do I install Hyperframes Registry in Claude Code?

Run `npx skills add chmonitor/chmonitor --skill hyperframes-registry -a claude-code`. Or copy the skill folder (.agents/skills/hyperframes-registry in chmonitor/chmonitor) 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 chmonitor/chmonitor --skill hyperframes-registry -a codex`. Or copy the skill folder (.agents/skills/hyperframes-registry in chmonitor/chmonitor) 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 chmonitor/chmonitor --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 (curl).

Does Hyperframes Registry access the network?

SKILL.md names 1 domain. In commands or code: raw.githubusercontent.com; the agent is likely to contact it when it follows the instructions. 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 GPL-3.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 1.1k tokens (SKILL.md is roughly 4.5k 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 11k 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: HyperFrames Animation (heygen-com/hyperframes, 58k stars), Faceless Explainer Video (heygen-com/hyperframes, 58k stars), Figma to HyperFrames (heygen-com/hyperframes, 58k stars) and HyperFrames Video Entry Point (heygen-com/hyperframes, 58k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Hyperframes Registry?

chmonitor (a GitHub organization) maintains it in chmonitor/chmonitor, which has 298 GitHub stars. The repository holds 53 skills in this directory. The repository was last updated on October 5, 2026.

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