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
54 lines
2.6 KiB
Markdown
54 lines
2.6 KiB
Markdown
# Registry Discovery
|
|
|
|
## Reading the registry manifest
|
|
|
|
The top-level `registry.json` lists all available items:
|
|
|
|
```bash
|
|
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
|
|
```
|
|
|
|
Each entry has `name` and `type` (`hyperframes:example`, `hyperframes:block`, or `hyperframes:component`).
|
|
|
|
## Reading an item's manifest
|
|
|
|
Each item has a `registry-item.json` with full metadata:
|
|
|
|
```
|
|
<base>/<type-dir>/<name>/registry-item.json
|
|
```
|
|
|
|
Where `<type-dir>` is `examples`, `blocks`, or `components`.
|
|
|
|
## Item manifest fields
|
|
|
|
| Field | Type | Required | Description |
|
|
| ---------------------- | -------- | -------- | ---------------------------------------------- |
|
|
| `name` | string | yes | Kebab-case identifier |
|
|
| `type` | string | yes | `hyperframes:block` or `hyperframes:component` |
|
|
| `title` | string | yes | Human-readable title |
|
|
| `description` | string | yes | One-line description |
|
|
| `tags` | string[] | no | Filter tags (e.g., `["data", "chart"]`) |
|
|
| `dimensions` | object | blocks | `{ width, height }` — blocks only |
|
|
| `duration` | number | blocks | Duration in seconds — blocks only |
|
|
| `files` | array | yes | Files to install (`path`, `target`, `type`) |
|
|
| `registryDependencies` | string[] | no | Other registry items this depends on |
|
|
|
|
## Available items
|
|
|
|
### Blocks
|
|
|
|
| Name | Description | Tags |
|
|
| ------------ | ----------------------------------------------- | ------------------------------- |
|
|
| `data-chart` | Animated bar + line chart with staggered reveal | data, chart, statistics |
|
|
| `flowchart` | Decision tree with SVG connectors and cursor | diagram, flowchart, interactive |
|
|
| `logo-outro` | Cinematic logo reveal with tagline | branding, outro, logo |
|
|
|
|
### Components
|
|
|
|
| Name | Description | Tags |
|
|
| -------------------- | --------------------------------------- | -------------------------------- |
|
|
| `grain-overlay` | Animated film grain texture overlay | texture, grain, overlay, film |
|
|
| `shimmer-sweep` | CSS gradient light sweep for AI accents | text, shimmer, highlight, effect |
|
|
| `grid-pixelate-wipe` | Grid dissolve transition between scenes | transition, wipe, grid, pixelate |
|