skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-registry

Installs and wires registry blocks and components into HyperFrames video compositions.

Updated Aug 28, 2026
Search Tags:#components#cli#registry#video production#gsap#hyperframes#html animation
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill hyperframes-registry-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/html-video-production/references/hyperframes-registry
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill hyperframes-registry-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building HTML-based video compositions from scratch is slow and error-prone; this Skill lets you discover, install, and wire pre-built reusable blocks (standalone sub-compositions) and components (effect snippets) from the HyperFrames registry instead of hand-authoring every animation. ## Core Features & Use Cases - Discovery and Install: Browse the registry with hyperframes catalog (filter by type or tag, JSON output for agents) and install items with hyperframes add <name>, with configurable install paths via hyperframes.json. - Wiring Guidance: Wire blocks into a host composition via data-composition-src with correct data-start, data-duration, and data-track-index attributes, or merge component HTML/CSS/JS snippets directly into your composition and GSAP timeline. - Authoring New Items: Follow the full idea → scaffold → validate → preview → PR workflow to contribute new caption blocks, VFX blocks, or components upstream, with copy-paste templates and a quality gate. - Use Case: You are producing a YouTube video and want an animated data chart beside your speaker footage — install the data-chart block, wire it into index.html at the 5-second mark, then lint and preview. ## Quick Start Ask the assistant to install the data-chart block from the HyperFrames registry 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 block from the HyperFrames registry?▼

Run `hyperframes add <name>` to install a block into `compositions/<name>.html`. Use `hyperframes catalog` to browse available items first, and add `--json` for machine-readable output in agent or CI workflows.

How do I wire a HyperFrames block into my composition?▼

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 width and height. The runtime syncs the block's timeline with the host automatically.

What is the difference between HyperFrames blocks and components?▼

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 that you paste directly into a host composition's HTML, CSS, and script.

Can I change where HyperFrames installs blocks and components?▼

Yes, configure the `paths` object in hyperframes.json to remap install locations. For example, setting `paths.blocks` to `scenes` makes `hyperframes add data-chart` write to `scenes/data-chart.html` instead of `compositions/`.

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

Follow the six-step workflow: clarify the item type, scaffold the registry directory with registry-item.json, build from the provided templates, validate with hyperframes lint and check, preview via render and publish, then open a PR with the registry.json entry and generated catalog docs.

Related Skills

Explore More Design & Creative Skills→
automatedigitalautomatedigital
1

hyperframes-registry

Install and wire HyperFrames registry blocks into host video compositions.

Official
Intermediate
zester4zester4
2

hyperframes-cli

Orchestrates the HyperFrames CLI dev loop for scaffolding, validating, previewing, and rendering HTML video compositions.

Community
Advanced
heygen-comheygen-com
43.5k

media-use

Resolve, generate, and operate on media assets for HyperFrames video projects.

Official
Advanced
calesthiocalesthio
55.1k

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Community
Intermediate