skills.rest
hugotown
hugotownCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Updated Oct 16, 2025
Search Tags:#components#cli#registry#blocks#gsap#video composition#hyperframes
One-click install
npx skills add https://github.com/hugotown/dotfiles --skill hyperframes-registry-hugotown
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyperframes-registry
Source: https://github.com/hugotown/dotfiles/tree/main/agents/skills/hyperframes-registry
Command: npx skills add https://github.com/hugotown/dotfiles --skill hyperframes-registry-hugotown

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Installing reusable HyperFrames blocks and components is only half the work — wiring them correctly into a host composition requires matching composition IDs, timeline offsets, track indexes, and merging snippet HTML/CSS/JS by hand. This Skill guides the full install-and-wire workflow so registry items work correctly in your composition. ## Core Features & Use Cases - Registry installation: Run hyperframes add <name> for blocks and components, with support for --dir, --json, and --no-clipboard flags, plus configurable install paths via hyperframes.json. - Block wiring: Include standalone sub-compositions in a host index.html using data-composition-src, data-composition-id, data-start, data-duration, and data-track-index attributes. - Component wiring: Merge effect snippets (HTML, CSS, JS, and GSAP timeline calls) directly into an existing composition. - Registry discovery: Query registry.json and per-item registry-item.json manifests to browse available blocks and components by type and tags. - Use Case: You want an animated data chart beside your speaker video — install the data-chart block, wire it into index.html at 5 seconds on track 1, then lint and preview. ## Quick Start Ask the assistant to run hyperframes add data-chart and wire the installed block into your composition's index.html at the desired start time.

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 directory, for example `hyperframes add data-chart` for a block or `hyperframes add grain-overlay` 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 a HyperFrames block into index.html?▼

Add a div with `data-composition-src` pointing to the installed 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 block's GSAP timeline runs independently and syncs with the host automatically.

What is the difference between HyperFrames blocks and components?▼

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 your host composition and drive them from its GSAP timeline.

Can I change where hyperframes add installs files?▼

Yes, edit the `paths` section of `hyperframes.json`. Set `paths.blocks` and `paths.components` to custom directories, and the add command remaps install targets accordingly, reflecting the new paths in its output snippet.

How do I discover available HyperFrames registry items?▼

Fetch the registry manifest at the registry URL's `registry.json` to list all items with their names and types. Each item's `registry-item.json` provides title, description, tags, dimensions, duration, and file lists for filtering.

Why is my installed HyperFrames block not appearing in the composition?▼

The most common cause is a `data-composition-id` that does not match the block's internal composition ID. Also verify the `data-composition-src` path is correct relative to index.html and run `hyperframes lint` to catch structural issues.

Related Skills

Explore More Software Engineering Skills→
het8802het8802
3

hyperframes-registry

Manage HyperFrames block and component installation and integration into index.html via hyperframes.json.

Community
Advanced
heygen-comheygen-com
40.2k

hyperframes-cli

Scaffold, lint, preview, and render HTML-based HyperFrames compositions.

Official
Intermediate
automatedigitalautomatedigital
1

hyperframes-registry

Install and wire HyperFrames registry blocks into host video compositions.

Official
Intermediate
AIDotNetAIDotNet
634

hyperframes-registry

Install and wire registry blocks and components into HyperFrames compositions.

Official
Intermediate