Hyperframes Registry
Add HyperFrames registry blocks and components via CLI, wire compositions in index.html, then lint and preview.
Overview
HyperFrames registry is an agent skill for the Build phase that documents how to install and wire HyperFrames blocks and components with lint and preview.
Install
npx skills add https://github.com/heygen-com/hyperframes --skill hyperframes-registryWhat is this skill?
- Worked examples for hyperframes add data-chart and hyperframes add shimmer-sweep
- Shows index.html stage wiring with data-composition-id, tracks, start, and duration attributes
- Standard verify loop: hyperframes lint then hyperframes preview after changes
- Customization points: data arrays in composition scripts and scoped CSS under composition id
- Pairs with website-to-hyperframes when enriching captured-site projects with charts or motion
- 2 worked examples: data-chart block and shimmer-sweep component
Adoption & trust: 81.5k installs on skills.sh; 25.6k GitHub stars; 2/3 security scanners passed (skills.sh audits).
What problem does it solve?
You have a HyperFrames project but lack a clear pattern for adding registry blocks like charts or shimmer effects without breaking the stage composition.
Who is it for?
Solo builders extending HyperFrames videos with registry blocks after initial capture or template setup.
Skip if: Starting URL-to-video from zero—use website-to-hyperframes first; also not a substitute for HyperFrames runtime install docs.
When should I use this skill?
User wants to add HyperFrames registry blocks or components, wire compositions, or follow hyperframes add / lint / preview patterns.
What do I get? / Deliverables
You get correctly wired composition entries, installed block assets, and a lint-clean preview-ready stage.
- Updated index.html stage wiring
- Installed composition under compositions/
- Lint-passing preview-ready project
Recommended Skills
Journey fit
Canonical shelf is Build → integrations because it extends an existing HyperFrames project with installable blocks and HTML composition wiring. Integrations matches hyperframes add, composition src wiring, and CLI lint/preview against a video stage pipeline.
How it compares
Skill package for composition recipes and CLI wiring—not an MCP server and not a full video brief workflow on its own.
Common Questions / FAQ
Who is hyperframes-registry for?
Developers and indie makers already using HyperFrames who need copy-pasteable registry install and HTML wiring patterns.
When should I use hyperframes-registry?
During Build when integrating data-chart, shimmer-sweep, or similar registry entries into an existing compositions folder and index.html stage.
Is hyperframes-registry safe to install?
It instructs shell CLI adds and HTML edits—review the Security Audits panel on this page and audit what hyperframes add pulls into your project.
SKILL.md
READMESKILL.md - Hyperframes Registry
# Worked Example: Adding a Block ## Scenario User has an existing HyperFrames project and wants to add an animated chart alongside their video content. ## Steps ### 1. Install the block ```bash hyperframes add data-chart ``` ### 2. Wire into index.html ```html <div id="stage" data-composition-id="main" data-width="1920" data-height="1080" data-duration="30"> <video id="speaker" src="speaker.mp4" data-start="0" data-duration="30" data-track-index="0" style="position: absolute; width: 60%; height: 100%; left: 0; top: 0; object-fit: cover;" ></video> <!-- Data chart appears at 5s in the right 40% of the screen --> <div data-composition-id="data-chart" data-composition-src="compositions/data-chart.html" data-start="5" data-duration="15" data-track-index="1" data-width="1920" data-height="1080" style="position: absolute; right: 0; top: 0; width: 40%; height: 100%;" ></div> </div> ``` ### 3. Lint and preview ```bash hyperframes lint hyperframes preview ``` ### 4. Customize (optional) Edit `compositions/data-chart.html` — data arrays are at the top of the script, colors are in the CSS rules scoped under `[data-composition-id="data-chart"]`. # Worked Example: Adding a Component ## Scenario User wants to add a shimmer light sweep effect to their title text. ## Steps ### 1. Install the component ```bash hyperframes add shimmer-sweep ``` ### 2. Read the snippet Open `compositions/components/shimmer-sweep.html` and read the comment header. ### 3. Wire into your composition **HTML** — wrap target elements: ```html <div class="shimmer-sweep-target" style="--shimmer-color: rgba(255, 255, 255, 0.5)"> <h1 class="title">AI-Powered Video</h1> </div> ``` **CSS** — paste the `.shimmer-sweep-target` and `.shimmer-mask` rules from the snippet. **JS** — paste the auto-injection script (before timeline code): ```js document.querySelectorAll(".shimmer-sweep-target").forEach((el) => { if (!el.querySelector(".shimmer-mask")) { const mask = document.createElement("div"); mask.className = "shimmer-mask"; el.appendChild(mask); } }); ``` **Timeline** — add the sweep: ```js tl.fromTo( ".shimmer-sweep-target", { "--shimmer-pos": "-20%", }, { "--shimmer-pos": "120%", duration: 1.2, ease: "power2.inOut", stagger: 0.15, }, 1.5, ); ``` ### 4. Lint and preview ```bash hyperframes lint hyperframes preview ``` ### 5. Customize - `--shimmer-color`: highlight color per element - `--shimmer-width`: light band width (default 20%) - `--shimmer-angle`: sweep direction (default 120deg) - Timeline `duration`, `ease`, `stagger`: control speed and feel # The demo.html Convention ## Why components ship demo.html Every component in the registry ships a companion `demo.html` file alongside its snippet. The demo serves two purposes: 1. **Preview fixture** — the CI preview pipeline renders the demo to generate thumbnail images and preview videos for the catalog docs page. 2. **Usage example** — the demo shows the component effect applied to representative content, serving as a working reference. ## Demo structure A demo is a complete, standalone HTML composition: ```html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=1920, height=1080" /> <title>Component Name — Demo</title> <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script> <style> /* reset + canvas size */ </style> </head> <body> <div data-composition-id="<name>-demo" data-width="1920" data-height="1080" data-duration="N"> <!-- Demo content showing the effect --> <!-- Component snippet inlined here --> </div> <script> // GSAP timeline demonstrating the effect window.__timelines = window.__timelines || {}; window.__timelines["<name>-demo"] = tl; </script> </body> </html> ``` Key conventions: - `data-composi