skills.rest
mooch10
mooch10COMMUNITY
Explore all skills by this author →
GitHub

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

1|Updated Aug 28, 2026
Search Tags:#components#cli#registry#blocks#gsap#video composition#hyperframes
One-click install
npx skills add https://github.com/mooch10/mochiptos --skill hyperframes-registry-mooch10
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/mooch10/mochiptos/tree/main/frontend/.agents/hyperframes-registry
Command: npx skills add https://github.com/mooch10/mochiptos --skill hyperframes-registry-mooch10

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 hyperframes.json configuration. ## Core Features & Use Cases - Install via CLI: Run hyperframes add to install blocks (standalone sub-compositions) or components (effect snippets) into configurable paths. - Wiring Guidance: Provides exact data-composition-src, data-start, data-duration, and data-track-index attributes for blocks, plus HTML/CSS/JS merge steps for components. - Registry Discovery & Contribution: Covers browsing registry.json manifests and the full idea-to-PR workflow for authoring new blocks or components with lint, validate, and publish gates. - Use Case: A user wants an animated bar chart beside their video content; the skill installs the data-chart block and wires it into index.html at the correct timestamp and layer. ## Quick Start Ask the assistant to install the data-chart block with hyperframes add and wire it into your index.html starting at 5 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 <name>, for example hyperframes add data-chart for a block or hyperframes add grain-overlay for a component. The CLI writes the files and prints a snippet to paste into your host composition.

What is the difference between a HyperFrames block and a component?▼

A block is a standalone sub-composition with its own dimensions, duration, and timeline, included via data-composition-src. A component is an effect snippet with no own dimensions that you paste directly into a host composition's HTML, CSS, and JS.

How do I wire an installed block into index.html?▼

Add a div with data-composition-src pointing to the block file, 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.

Can I change where hyperframes add installs files?▼

Yes, edit the paths section in hyperframes.json. The blocks and components keys remap default install targets, so setting blocks to scenes makes hyperframes add write to scenes/<name>.html instead of compositions/.

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

Follow the clarify, scaffold, build, validate, preview, ship workflow: create the item with a registry-item.json, pass hyperframes lint and validate with zero errors, generate catalog docs, publish a preview, and open a PR.

Why does my installed component not animate in the host composition?▼

Components have no standalone timeline, so their GSAP calls must be added to the host timeline manually. Check the snippet's comment header for required timeline integration and run hyperframes lint to catch structural issues.

Related Skills

Explore More Design & Creative Skills→
Lev-itLev-it

hyperframes-registry

Install and wire registry blocks into HyperFrames compositions via CLI.

Official
Advanced
vibe-motionvibe-motion
236

hyperframes-cli

Manage HyperFrames project scaffolding, validation, preview, rendering, and cloud deployment workflows.

Official
Advanced
hugotownhugotown

contribute-catalog

Author HyperFrames registry blocks and components and ship them as upstream pull requests.

Community
Advanced
calesthiocalesthio
55.1k

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Community
Intermediate