skills.rest
Sma1lboy
Sma1lboyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-registry

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

136|8|Updated May 9, 2026
Search Tags:#components#registry#animation#blocks#gsap#video composition#hyperframes
One-click install
npx skills add https://github.com/Sma1lboy/rove --skill hyperframes-registry-sma1lboy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/Sma1lboy/rove/tree/main/.claude/skills/hyperframes/registry
Command: npx skills add https://github.com/Sma1lboy/rove --skill hyperframes-registry-sma1lboy

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building animated video compositions from scratch is slow, and reusing pre-built effects requires knowing how to install, wire, and validate them correctly within the HyperFrames HTML/GSAP composition model. ## Core Features & Use Cases - Install registry items: Run hyperframes add <name> to install blocks (standalone sub-compositions) or components (effect snippets) into configurable project paths. - Wire into compositions: Include blocks via data-composition-src with timeline attributes, or merge component HTML/CSS/JS snippets directly into a host composition. - Contribute upstream: Follow the full idea → scaffold → build → validate → preview → PR workflow to author new caption styles, VFX blocks, transitions, or components. - Use Case: You want an animated bar chart beside your speaker video — run hyperframes add data-chart, wire it into index.html with data-start and data-track-index, 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 an installed block into index.html?▼

Add a div with `data-composition-src` pointing to the block HTML file, plus `data-composition-id` matching the block's internal ID, `data-start`, `data-duration`, `data-track-index`, and matching `data-width`/`data-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`. Set `paths.blocks` and `paths.components` to custom directories, and the add command remaps install targets accordingly, reflecting the new path in its output snippet.

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 `validate`, preview via render and publish, then open a PR with the registry.json entry and generated catalog docs.

Why does my caption block fail HyperFrames validation?▼

Common causes include fonts below 96px, missing `fitTextFontSize` overflow handling, absent hard-kill `tl.set` at group end, or using `tl.from` with opacity at the same position as `tl.set`. Also ensure all element IDs use a unique prefix and timelines are paused.

Related Skills

Explore More Design & Creative Skills→
automatedigitalautomatedigital
1

hyperframes-registry

Install and wire HyperFrames registry blocks into host video compositions.

Official
Intermediate
compozycompozy
182

hyperframes-cli

Scaffold, validate, inspect, preview, and render HTML timeline compositions to MP4/WebM.

Official
Intermediate
vibe-motionvibe-motion
236

hyperframes-registry

Install and wire HyperFrames registry blocks into HTML compositions.

Official
Advanced
LAF-USLAF-US

frontend-design

Generate accessible HTML/CSS/JS frontend interfaces with typography, color, motion, and layout guidance.

Official
Advanced