mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-03 04:38:33 +00:00

Files

T

James Russo 4bde66f532 feat(skills): hyperframes-registry skill (#261 )

## 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

2026-04-14 16:27:24 -07:00

2.6 KiB

Raw Blame History

Registry Discovery

Reading the registry manifest

The top-level registry.json lists all available items:

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

2.6 KiB Raw Blame History