skills.rest
Noetfield-Systems
Noetfield-SystemsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Updated Jun 20, 2026
Search Tags:#components#cli#registry#blocks#gsap#video composition#hyperframes
One-click install
npx skills add https://github.com/Noetfield-Systems/SourceA --skill hyperframes-registry-noetfield-systems
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/Noetfield-Systems/SourceA/tree/main/commercial-video-factory/trustfield-storyboard-hf-v1/.agents/skills/hyperframes-registry
Command: npx skills add https://github.com/Noetfield-Systems/SourceA --skill hyperframes-registry-noetfield-systems

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? It removes the guesswork of installing reusable HyperFrames blocks and components and wiring them correctly into a host composition's HTML, timeline, and layer structure. ## Core Features & Use Cases - Install via CLI: Run hyperframes add <name> to install blocks (standalone sub-compositions) or components (effect snippets) into configurable paths defined in hyperframes.json. - Wiring guidance: Wire blocks with data-composition-src, data-start, data-duration, and data-track-index attributes, or merge component HTML/CSS/JS snippets directly into a host composition. - Registry discovery and contribution: Browse 97+ blocks and components via registry.json, and follow the full idea-to-PR workflow to author and ship new caption, VFX, or transition items upstream. - Use Case: Add an animated data-chart block beside a talking-head video at the 5-second mark, then lint and preview the composition before rendering. ## Quick Start Ask the assistant to install the data-chart block with hyperframes add and wire it into index.html starting at 2 seconds on track index 1.

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 followed by the item name, such as 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 composition?▼

Add a div with data-composition-src pointing to the installed block HTML, plus data-composition-id matching the block's internal ID, data-start, data-duration, data-track-index, and 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 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 JS.

Can I change where hyperframes add installs files?▼

Yes, edit the paths section in hyperframes.json to remap install locations. Blocks default to compositions/ and components to compositions/components/, but you can point them at custom directories like scenes/.

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 catalog docs updated.

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

Check that data-composition-id exactly matches the block's internal composition ID and that the block registers its timeline on window.__timelines. Also verify data-start and data-duration fall within the host timeline range.

Related Skills

Explore More Design & Creative Skills→
Marshal-NguyenMarshal-Nguyen
1

hyperframes-registry

Install, discover, and wire registry blocks and components into HyperFrames compositions.

Community
Advanced
openaiopenai
5.3k

hyperframes-cli

Scaffold, lint, inspect, preview, and render HyperFrames video compositions via CLI.

Official
Intermediate
chmonitorchmonitor
255

hyperframes-animation

Compose deterministic GSAP timelines from atomic motion rules and scene blueprints.

Official
Advanced
heygen-comheygen-com
40.2k

gsap

Create deterministic GSAP timelines and tweens for HyperFrames compositions.

Official
Intermediate