skills.rest
Marshal-Nguyen
Marshal-NguyenCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-registry

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

1|Updated Aug 17, 2026
Search Tags:#components#cli#registry#gsap#video composition#hyperframes#animation blocks
One-click install
npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill hyperframes-registry-marshal-nguyen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/Marshal-Nguyen/Skill_Claude_Agent/tree/main/claude/skills/hyperframes-registry
Command: npx skills add https://github.com/Marshal-Nguyen/Skill_Claude_Agent --skill hyperframes-registry-marshal-nguyen

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 across HyperFrames projects requires knowing how to install, wire, and configure registry items correctly. ## Core Features & Use Cases - Install blocks and components: Run hyperframes add <name> to install standalone sub-compositions (blocks) or effect snippets (components), including bulk installs by tag. - Wire items into compositions: Include blocks via data-composition-src with timeline attributes, or merge component HTML/CSS/JS snippets directly into a host composition. - Discover the catalog: Browse 97 blocks and components with hyperframes catalog filtered by type or tag, with JSON output for CI and agent workflows. - Contribute upstream: Follow the idea → scaffold → build → validate → preview → ship workflow to author a new caption, VFX, transition, or component and open a PR. - Use Case: You want an animated bar chart beside your video content — run hyperframes add data-chart, wire it into index.html with data-start and data-track-index, then lint and preview. ## 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 registry block?▼

Run `hyperframes add <name>` in your project, for example `hyperframes add data-chart`. Blocks install to `compositions/<name>.html` by default, and the CLI prints the files written plus a wiring snippet for your host composition.

What is the difference between HyperFrames blocks and components?▼

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

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` to remap install directories for blocks, components, and assets. For example, setting `paths.blocks` to `scenes` makes `hyperframes add data-chart` write to `scenes/data-chart.html`.

How do I discover available HyperFrames registry items?▼

Run `npx hyperframes catalog` with optional `--type block`, `--type component`, or `--tag` filters. Use `--json` for CI and agent workflows, or `--human-friendly` for an interactive picker that installs the selected item.

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

Follow the six-step workflow: clarify the item type, scaffold the directory with registry-item.json, build from the caption/VFX/component templates, validate with `hyperframes lint` and `check`, preview via render and publish, then commit and open a PR.

Related Skills

Explore More Design & Creative Skills→
automatedigitalautomatedigital
1

hyperframes-registry

Install and wire HyperFrames registry blocks into host video compositions.

Official
Intermediate
vibe-motionvibe-motion
236

hyperframes-cli

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

Official
Advanced
1veso1veso

hyperframes-registry

Automate installation, wiring, and discovery of HyperFrames blocks and components.

Community
Intermediate
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate