skills.rest
noemdb
noemdbCOMMUNITY
Explore all skills by this author →
GitHub

hyperframes-registry

Installs and wires HyperFrames registry blocks and components into HTML video compositions.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building animated video compositions from scratch is slow; this Skill lets you discover, install, and wire pre-built registry blocks (standalone sub-compositions) and components (effect snippets) into HyperFrames projects using the hyperframes CLI. ## Core Features & Use Cases - Discovery and install: Browse the registry with hyperframes catalog (filter by type or tag) and install items with hyperframes add <name>, including tag-based bulk installs and JSON output for CI. - Wiring guidance: Wire blocks into a host composition via data-composition-src with correct data-start, data-duration, and data-track-index attributes, or merge component HTML/CSS/JS snippets directly into your composition. - Contributing workflow: Author a new block or component upstream with a full idea → scaffold → build → validate → preview → PR pipeline, including copy-paste templates for captions, VFX, and components. - Use Case: You want an animated bar chart beside your speaker video — run hyperframes add data-chart, wire it into index.html at the 5-second mark, then lint and preview. ## Quick Start Ask the assistant to install the data-chart block from the HyperFrames registry 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 block from the HyperFrames registry?▼

Run `hyperframes add <name>` to install a block into `compositions/<name>.html`. The CLI prints the files written and a snippet to paste into your host composition's index.html.

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

Can I change where hyperframes add installs files?▼

Yes. Edit `hyperframes.json` and set `paths.blocks` and `paths.components` to custom directories. The add command remaps install targets accordingly and reflects the new path in its output snippet.

How do I discover available registry items without the CLI?▼

Fetch the raw manifest at the registry URL's registry.json, which lists every item's name and type. Each item's registry-item.json contains title, description, tags, dimensions, duration, and file list.

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

Follow the contributing workflow: scaffold the item under registry/blocks or registry/components, build from the provided templates, validate with hyperframes lint and check, preview via render and publish, then update registry.json, generate catalog docs, and open a PR.

Related Skills

Explore More Software Engineering 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
calesthiocalesthio
55.1k

hyperframes-core

Builds renderable HyperFrames video compositions from HTML with data-attribute timing and GSAP timelines.

Community
Advanced
MarbleSodasMarbleSodas

hyperframes

Render HTML compositions with GSAP timelines into MP4/WebM videos via FFmpeg.

Community
Advanced