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
74 lines
1.4 KiB
Markdown
74 lines
1.4 KiB
Markdown
# 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
|