skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-registry

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

Updated Jul 16, 2026
Search Tags:#components#registry#animation#blocks#gsap#video composition#hyperframes
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill hyperframes-registry-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/hyperframes-registry
Command: npx skills add https://github.com/X-manist/Cohmira --skill hyperframes-registry-x-manist

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. This Skill guides the full lifecycle of HyperFrames registry items: installing blocks and components via the CLI, wiring them into a host composition's HTML and GSAP timeline, and authoring new items for upstream contribution. ## 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 defined in hyperframes.json. - Wire into compositions: Include blocks via data-composition-src with correct data-composition-id, data-start, data-duration, and data-track-index attributes, or merge component HTML/CSS/JS snippets directly into a host composition. - Discover and contribute: Browse the registry manifest of 97+ blocks and components, and follow the idea → scaffold → build → validate → preview → ship workflow to publish a new block or component as an upstream PR. - Use Case: You are building a product demo video and want an animated bar chart beside your footage. Install the data-chart block, wire it into index.html at the 5-second mark on a higher track, 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 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 shimmer-sweep` for a component. Use `--dir` to target a specific project, `--json` for machine-readable output, or `--no-clipboard` in CI environments.

How do I wire an installed block into my composition?▼

Add a div with `data-composition-src` pointing to the installed 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 automatically.

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 without their own timeline whose HTML, CSS, and JS you paste directly into a host composition.

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 CLI output snippet reflects the remapped path.

Why does my contributed block fail validation?▼

Common causes include lint errors, console errors during `hyperframes validate`, unprefixed element IDs, using Math.random() or Date.now() instead of seeded PRNG, or using requestAnimationFrame instead of GSAP onUpdate rendering. All checks must pass with zero errors before shipping.

Related Skills

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

gsap

Create deterministic GSAP timelines and tweens for HyperFrames compositions.

Official
Intermediate
compozycompozy
182

hyperframes-cli

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

Official
Intermediate
openaiopenai
5.3k

hyperframes

Create HTML-based video compositions with GSAP animations, captions, and scene transitions.

Official
Advanced
firstsun-devfirstsun-dev
3

hyperframes-animation

Compose deterministic GSAP animations for HyperFrames video compositions using atomic motion rules and scene blueprints.

Official
Advanced