skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Updated Sep 1, 2026
Search Tags:#components#cli#registry#blocks#gsap#video composition#hyperframes
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill hyperframes-registry-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/hyperframes-registry
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill hyperframes-registry-zamansepeti43

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Adding reusable video elements to a HyperFrames project requires knowing the correct install paths, wiring attributes, and contribution workflow. This Skill guides the full process of installing registry blocks and components with hyperframes add, wiring them into a host composition's index.html, and authoring new registry items from idea to merged PR. ## Core Features & Use Cases - Install blocks and components: Run hyperframes add <name> to install standalone sub-compositions (blocks) or effect snippets (components) into configurable paths defined in hyperframes.json. - Wire into compositions: Include blocks via data-composition-src with data-start, data-duration, and data-track-index attributes, or merge component HTML/CSS/JS snippets directly into a host composition. - Contribute upstream: Follow the idea → scaffold → build → validate → preview → ship workflow with lint, validate, oxfmt, catalog generation, and PR creation, using copy-paste templates for captions, VFX, and components. - Use Case: You want an animated bar chart beside your speaker video. Install the data-chart block, wire it into index.html at 5 seconds on track index 1, then lint and preview the result. ## Quick Start Ask the agent to install the data-chart block with hyperframes add and wire it into your index.html 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 block HTML, 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 timeline, included via data-composition-src. Components are effect snippets with no fixed dimensions 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, for example setting `paths.blocks` to `scenes` so blocks install to `scenes/<name>.html` instead of `compositions/`. The add command 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 template, validate with `hyperframes lint` and `hyperframes validate`, preview with render and publish, then update registry.json, generate catalog docs, and open a PR.

Why does my HyperFrames block fail validation?▼

Common causes include using Math.random() or Date.now() instead of a seeded PRNG, unprefixed element IDs that collide in sub-compositions, a data-composition-id that does not match window.__timelines, or a GSAP timeline that is not paused. Run `hyperframes lint` and `hyperframes validate` to identify errors.

Related Skills

Explore More Software Engineering Skills→
Lev-itLev-it

hyperframes-registry

Install and wire registry blocks into HyperFrames compositions via CLI.

Official
Advanced
zester4zester4
2

hyperframes-cli

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

Community
Advanced
zeitlinbzeitlinb

hyperframes-animation

Compose web animations using atomic motion patterns and runtime adapters.

Community
Advanced
openaiopenai
5.3k

hyperframes-registry

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

Official
Intermediate