skills.rest
zester4
zester4COMMUNITY
Explore all skills by this author →
GitHub

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

2|1|Updated Jun 9, 2026
Search Tags:#cli#registry#gsap#video composition#hyperframes#html video#animation blocks
One-click install
npx skills add https://github.com/zester4/zilmate --skill hyperframes-registry-zester4
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/zester4/zilmate/tree/main/.agents/skills/hyperframes-registry
Command: npx skills add https://github.com/zester4/zilmate --skill hyperframes-registry-zester4

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding reusable animated blocks and effect components to HyperFrames video compositions requires knowing the correct install paths, wiring attributes, and contribution workflow, which is error-prone without guidance. ## Core Features & Use Cases - Install via CLI: Run hyperframes add <name> to install blocks (standalone sub-compositions) or components (effect snippets) into configurable project paths. - Wiring Guidance: Wire blocks into a host index.html via data-composition-src with correct data-start, data-duration, and data-track-index attributes, or merge component HTML/CSS/JS snippets into an existing composition. - Registry Discovery & Contribution: Browse 97+ blocks and components via the registry manifest, and follow the full idea → scaffold → validate → PR workflow to author and ship new registry items upstream. - Use Case: You want an animated data chart beside your speaker video. Install data-chart, wire it into your composition at the 5-second mark on a higher track, then lint and preview. ## Quick Start Ask the assistant to install the data-chart block with hyperframes add and wire it into your index.html composition starting at 5 seconds.

Frequently Asked Questions about hyperframes-registry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I install a HyperFrames block or component?▼

Run `hyperframes add <name>` in your project, for example `hyperframes add data-chart` for a block or `hyperframes add grain-overlay` for a component. The CLI prints the files written and a snippet to paste into your host composition.

How do I wire a block into my HyperFrames index.html?▼

Add a div with `data-composition-src` pointing to the installed block file, plus `data-composition-id` matching the block's internal ID, `data-start`, `data-duration`, `data-track-index`, and matching width and height. The runtime seeks the block's timeline in sync with the host.

What is the difference between a HyperFrames block and a component?▼

Blocks are standalone sub-compositions with their own dimensions, duration, and GSAP timeline, included via data-composition-src. Components are effect snippets with no own timeline; you paste their HTML, CSS, and JS directly into a host composition.

Can I change where hyperframes add installs files?▼

Yes. Edit the `paths` section in `hyperframes.json` to remap install directories, for example setting `paths.blocks` to `scenes` so blocks install to `scenes/<name>.html` instead of `compositions/`. The CLI output reflects the remapped path.

How do I contribute a new block to the HyperFrames registry?▼

Follow the six-step workflow: clarify the item type, scaffold the registry directory, build from the caption or VFX templates, validate with `hyperframes lint` and `hyperframes validate`, preview via render and publish, then update registry.json, generate catalog docs, and open a PR.

Why does my HyperFrames block animation not play in the host composition?▼

Common causes are a `data-composition-id` that does not match the block's internal composition ID, missing `data-start` or `data-track-index` attributes, or a timeline not registered on `window.__timelines`. Run `hyperframes lint` to catch structural issues.

Related Skills

Explore More Design & Creative Skills→
heygen-comheygen-com
40.2k

gsap

Create deterministic GSAP timelines and tweens for HyperFrames compositions.

Official
Intermediate
vibe-motionvibe-motion
236

hyperframes-cli

Manage HyperFrames project scaffolding, validation, preview, rendering, and cloud deployment workflows.

Official
Advanced
vibe-motionvibe-motion
236

hyperframes

Route video and animation requests into HyperFrames HTML composition workflows.

Official
Advanced
openaiopenai
5.3k

hyperframes-registry

Install and wire registry blocks and components into HyperFrames HTML compositions.

Official
Intermediate