anton-abyzovanton-abyzov/vskill/.claude/skills/hyperframes-registry/SKILL.md

hyperframes-registry

Skill48 starsChanged 6 months agoMITView on GitHub

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, and registry discovery.

We split this skill into the rules it gives an agent

3 rules. 2 are common, 0 are distinctive, and 1 is very specific to this project.

2
Common
Most of the 48 edited versions we read keep these.
0
Distinctive
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.

Common
Distinctive
Very specific

Common:
After install, the CLI prints which files were written and a snippet to paste into your host composition.
line 31
Very specific:
Read the installed file (e.g., compositions/components/grain-overlay.html)
line 86
Common:
If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
line 90

“Common” is measured: kept by at least 6 in 10 of the 48 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.

Files

SKILL.md

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.

When to use this skill

User mentions hyperframes add, "block", "component", or hyperframes.json
Output from hyperframes add appears in the session (file paths, clipboard snippet)
You need to wire an installed item into an existing composition
You want to discover what's available in the registry

Quick reference

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:

{
  "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:

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

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):

Read the installed file (e.g., compositions/components/grain-overlay.html)
Copy the HTML elements into your composition's <div data-composition-id="...">
Copy the <style> block into your composition's styles
Copy any <script> content into your composition's script (before your timeline code)
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:

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

Download now (ZIP)

Other versions50 projects use a version of this.
Word for word · 0
None found.
Edited · 48
calesthio/OpenMontage★ 72k85% same
openai/plugins★ 7.4k100% same
nateherkai/hyperframes-student-kit★ 2.2k100% same
nateherkai/herk-edit-kit★ 1.5k100% same
langchain-ai/design-agent★ 53530% same
EvovexAI/EvoFlow★ 43685% same
boraoztunc/skills★ 337100% same
duyet/clickhouse-monitoring★ 30385% same
edenfunf/reelmimic★ 17232% same
notivn/AIEV★ 132100% same
38 more not listed
Wrote their own version · 2
heygen-com/hyperframes★ 72ksame name
aipphilie/claude-skills★ 0same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
Used alongsideProjects with it also use cut-mistakes, cut-silences and 10 more.
Other files people use alongside this one.
- nateherkaiSkill
  cut-mistakes
  Agent 2 of the video editing pipeline. Finds and removes spoken mistakes — stutters, repeated words, false starts, and retakes (re-recorded lines) — from a talking-head recording. Use after cut-silences, when asked to cut mistakes, remove stutters / repeats / filler restarts, clean up flubs, or keep the best take. Works review-gated: it proposes every cut with context and a reason for approval, then renders only the approved cuts via ffmpeg. Requires a word-level transcript.
  Also in 5 projects that use this
- nateherkaiSkill
  cut-silences
  Agent 1 of the video editing pipeline. Removes silences and dead air from a talking-head recording. Use when asked to cut silences, trim pauses, remove dead air / gaps, or tighten the pacing of a raw video, given a word-level transcript. Produces an edit list (EDL), a re-timed transcript for downstream agents, and optionally the cut video via ffmpeg. Does NOT cut mistakes, repeats, or false starts — that is the cut-mistakes agent.
  Also in 5 projects that use this
- chriswesttSkill
  make-a-video
  Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.
  Also in 9 projects that use this
- Google CloudSkill
  video-storytelling
  Cinematic video ad storytelling expertise. Covers 3-act narrative structure, emotional arcs, camera motion, scene transitions, and voiceover pacing for 10-second commercial video ads using Gemini Omni. Load this skill when generating video ads or storylines.
  Also in 5 projects that use this
- LangChainSkill
  hyperframes-creative
  Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use `hyperframes-animation`.
  Also in 19 projects that use this
- NexumAI-onlineSkill
  short-form-edit
  Convertí una grabación hablada en un reel, YouTube Short o anuncio corto terminado, con apertura que genere curiosidad, resolución respaldada por el contenido, cortes narrativos, gráficos sincronizados, B-roll en movimiento, subtítulos, música sutil y efectos. Para videos largos usá edit-video; para quitar sólo pausas, cut-silences.
  Also in 4 projects that use this
- +2 more from nateherkai
In this repository30 other files it gives its agents.
- obsidian-brainSkill
- animejsSkill
- css-animationsSkill
- greet-anton-abyzovSkill
- gsapSkill
- higgsfield-seedanceSkill
- hyperframes-cliSkill
- hyperframes-mediaSkill
- hyperframesSkill
- lottieSkill
- obsidian-brainSkill
- private-skillSkill
- remotion-to-hyperframesSkill
- scoutSkill
- slack-messagingSkill
- stub-skill-76f6713eSkill
- tailwindSkill
- threeSkill
- waapiSkill
- website-to-hyperframesSkill
- excalidraw-mcpSkill
- greet-anton-abyzovSkill
- greet-elenaSkill
- handoffSkill
- hi-atlantisSkill
- html-reportSkill
- hyperframes-best-practicesSkill
- motion-graphics-promoSkill
- reaSkill
- remotion-best-practicesSkill

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

Reviews can't be read right now.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free

3 rules. 2 are common, 0 are distinctive, and 1 is very specific to this project.

HyperFrames Registry

When to use this skill

Quick reference

Install locations

Wiring blocks

Wiring components

Discovery

Word for word · 0

Edited · 48

Wrote their own version · 2

cut-mistakes

cut-silences

make-a-video

video-storytelling

hyperframes-creative

short-form-edit

Does it work?

Your trail

Now do this for your own.