Agent skill · software engineering · aiskillstore
hyperframes-registry
Install, discover, and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add or hyperframes catalog, installing one item or every block matching a tag, wiring an installed item into index.html, or working with hyperframes.json. Covers discovery, install locations, block sub-composition wiring, component snippet merging, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).
Why this skill is useful
Provides specific commands and workflows for installing and wiring reusable blocks and components in HyperFrames, which the AI wouldn't reliably generate on its own.
What it needs
Requires hyperframes installed locally. About 3k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
HyperFrames Registry The registry provides reusable blocks and components installable via hyperframes add <name>. Blocks — standalone sub-compositions (own dimensions, duration, timeline). Included via data-composition-src in a host composition. Components — effect snippets (no own dimensions). Pasted directly into a host composition's HTML. Quick reference After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point — you'll need to add data-composition-id (must match the block's internal composition ID), data-start, and data-track-index attributes when wiring blocks. The positional value is resolved as an exact item name first. If no item matches and the value is a tag, the command installs every block with that tag. Registry dependencies are installed before the requested item. hyperframes add works only for blocks and components; for examples, use hyperframes init <dir> --example <name> instead. Install locations Blocks install to compositions/<name>.html by default. Components install to compositions/components/<name>.html by default. These paths are configurable in hyperframes.json: See install-locations.md for full details. Wiring blocks Blocks are standalone compositions — include them via data-composition-src in your host index.html: Key attributes: data-composition-src — path to the block HTML file data-composition-id — must match the block's internal ID data-start — when the block appears in the host timeline (seconds) data-duration — how long the block plays data-width / data-height — block canvas dimensions data-track-index — layer ordering (higher = in front) See wiring-blocks.md for full details. Wiring components Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any): 1. Read the installed file (e.g., compositions/components/grain-overlay.html) 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/hyperframes-registry