mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-03 12:54:29 +00:00
James Russo
4bde66f532
## What
New skill `hyperframes-registry` that teaches AI coding agents how to install and wire registry blocks and components into HyperFrames compositions.
### Skill structure
```
skills/hyperframes-registry/
SKILL.md — triggers, overview, quick reference
references/
install-locations.md — default paths, hyperframes.json config
wiring-blocks.md — iframe inclusion, data attributes, positioning
wiring-components.md — snippet merging (HTML, CSS, JS, timeline)
discovery.md — manifest reading, item fields, available items table
demo-html-pattern.md — why components ship demo.html, structure conventions
examples/
add-block.md — worked example: data-chart block install + wiring
add-component.md — worked example: shimmer-sweep component install + wiring
```
## Why
Phase B of the catalog plan (PR 10). Without this skill, agents using `hyperframes add` have to guess how to wire installed items into compositions. The skill encodes the iframe/snippet patterns so agents get it right on the first attempt.
## How
- SKILL.md frontmatter triggers on: `hyperframes add`, "block", "component", `hyperframes.json`
- References cover every step: discovery, install, wiring blocks (iframe), wiring components (snippet merge), and the demo.html convention
- Two worked examples walk through complete install-to-preview workflows
- Updated CLAUDE.md skills table + trigger rules, README.md skills table, docs/packages/cli.mdx
## Test plan
- [x] `scripts/lint-skills.ts` passes (checked 4 skill files, no issues)
- [x] `oxfmt --check` passes on all markdown files
- [x] SKILL.md frontmatter has valid `name` and `description`
- [x] All reference links in SKILL.md resolve to existing files
- [x] CLAUDE.md, README.md, and docs CLI page updated with new skill
52 lines
1.2 KiB
Markdown
52 lines
1.2 KiB
Markdown
# 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"]`.
|