Help us improve
Share bugs, ideas, or general feedback.
From hyperframes
Installs HyperFrames registry blocks and components via `hyperframes add` CLI, wires them into index.html compositions with data attributes, configures paths in hyperframes.json, and handles registry discovery.
npx claudepluginhub robinebers/converted-plugins --plugin hyperframesHow this skill is triggered — by the user, by Claude, or both
Slash command
/hyperframes:hyperframes-registryThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
The registry provides reusable blocks and components installable via `hyperframes add <name>`.
Installs HyperFrames registry blocks and components via `hyperframes add` CLI, wires them into index.html compositions with data attributes, configures paths in hyperframes.json, and handles registry discovery.
Installs HyperFrames registry blocks and components via hyperframes add CLI. Wires blocks into index.html with data-composition-src, merges component snippets, configures hyperframes.json paths, and explains registry discovery.
Searches AEM Block Collection and Block Party for reference blocks, code snippets, build tools, plugins, and integrations as development starting points.
Share bugs, ideas, or general feedback.
The registry provides reusable blocks and components installable via hyperframes add <name>.
data-composition-src in a host composition.hyperframes add, "block", "component", or hyperframes.jsonhyperframes add appears in the session (file paths, clipboard snippet)hyperframes add data-chart # install a block
hyperframes add grain-overlay # install a component
hyperframes add shimmer-sweep --dir . # target a specific project
hyperframes add data-chart --json # machine-readable output
hyperframes add data-chart --no-clipboard # skip clipboard (CI/headless)
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.
Note: hyperframes add only works for blocks and components. For examples, use hyperframes init <dir> --example <name> instead.
Blocks install to compositions/<name>.html by default.
Components install to compositions/components/<name>.html by default.
These paths are configurable in hyperframes.json:
{
"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
"paths": {
"blocks": "compositions",
"components": "compositions/components",
"assets": "assets"
}
}
See install-locations.md for full details.
Blocks are standalone compositions — include them via data-composition-src in your host index.html:
<div
data-composition-id="data-chart"
data-composition-src="compositions/data-chart.html"
data-start="2"
data-duration="15"
data-track-index="1"
data-width="1920"
data-height="1080"
></div>
Key attributes:
data-composition-src — path to the block HTML filedata-composition-id — must match the block's internal IDdata-start — when the block appears in the host timeline (seconds)data-duration — how long the block playsdata-width / data-height — block canvas dimensionsdata-track-index — layer ordering (higher = in front)See wiring-blocks.md for full details.
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):
compositions/components/grain-overlay.html)<div data-composition-id="..."><style> block into your composition's styles<script> content into your composition's script (before your timeline code)See wiring-components.md for full details.
Browse available items:
# Read the registry manifest
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
Each item's registry-item.json contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
See discovery.md for details on filtering by type and tags.