skills.rest
Chau165
Chau165COMMUNITY
Explore all skills by this author →
GitHub

hyperframes-registry

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

Updated Jul 22, 2026
Search Tags:#components#cli#registry#motion graphics#gsap#video composition#hyperframes
One-click install
npx skills add https://github.com/Chau165/local_skill --skill hyperframes-registry-chau165
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/Chau165/local_skill/tree/main/codex/skills/hyperframes-registry
Command: npx skills add https://github.com/Chau165/local_skill --skill hyperframes-registry-chau165

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Finding, installing, and correctly wiring reusable motion blocks and effect components into HyperFrames video compositions involves many manual steps and wiring rules that are easy to get wrong. ## Core Features & Use Cases - Registry Discovery: Search the catalog by intent, type, or tag with hyperframes catalog, and report search misses via hyperframes feedback. - One-Command Install: Install blocks, components, or every block matching a tag with hyperframes add, with configurable install paths in hyperframes.json. - Wiring Guidance: Wire blocks via data-composition-src sub-compositions and merge component snippets (HTML/CSS/JS) into host compositions. - Contribution Workflow: Author new blocks or components end-to-end, from scaffolding and templates through lint, preview, and PR submission. - Use Case: Add an animated data-chart block beside a talking-head video at the 5-second mark, then lint and preview the composition. ## 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.

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 registry block or component?▼

Run hyperframes add <name> to install a block or component. Blocks install to compositions/<name>.html and components to compositions/components/<name>.html by default, and the CLI prints a wiring snippet after install.

How do I search the HyperFrames registry catalog?▼

Run npx hyperframes catalog with optional --query, --type block|component, or --tag filters. Use --json for deterministic agent or CI workflows, then install a selected name with hyperframes add.

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

Can I change where HyperFrames installs blocks and components?▼

Yes, edit the paths section in hyperframes.json to remap blocks, components, and assets directories. The add command remaps each item's default target prefix based on these configured paths.

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

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

Why does my installed HyperFrames block render nothing?▼

Common causes include a missing data-composition-id matching the block's internal ID, incorrect data-start or data-duration attributes, or inlining a sub-composition instead of referencing it via data-composition-src. Verify wiring attributes and run hyperframes lint.

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
Impertio-StudioImpertio-Studio

shadcn-core-registry

Resolve shadcn UI registry namespaces into validated components.json and registry.json items.

Official
Advanced
langgeniuslanggenius

fixing-motion-performance

Audit and fix CSS and JavaScript animation performance issues like layout thrashing and jank.

Official
Intermediate