ext/hyperframes
2
0
Fork 0
mirror of https://github.com/heygen-com/hyperframes.git synced 2026-09-04 16:42:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(skills): hyperframes-registry skill (#261)

Browse Source 
## 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
This commit is contained in:
James Russo
2026-04-14 16:27:24 -07:00
committed by GitHub
parent b32611c2c3
commit 4bde66f532
39 changed files with 1039 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
registry/components/grid-pixelate-wipe/demo.html
+23 -27
View File
@@ -29,19 +29,7 @@
data-duration="8"
>
<!-- Scene A -->
<div
id="scene-a"
style="
position: absolute;
width: 1920px;
height: 1080px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: &quot;Inter&quot;, sans-serif;
"
>
<div id="scene-a" class="demo-scene scene-a">
<div style="text-align: center; color: white">
<div style="font-size: 80px; font-weight: 800">Scene A</div>
<div style="font-size: 32px; margin-top: 20px; opacity: 0.7">
@@ -51,20 +39,7 @@
</div>
<!-- Scene B (hidden initially) -->
<div
id="scene-b"
style="
position: absolute;
width: 1920px;
height: 1080px;
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
display: flex;
justify-content: center;
align-items: center;
font-family: &quot;Inter&quot;, sans-serif;
opacity: 0;
"
>
<div id="scene-b" class="demo-scene scene-b">
<div style="text-align: center; color: white">
<div style="font-size: 80px; font-weight: 800">Scene B</div>
<div style="font-size: 32px; margin-top: 20px; opacity: 0.7">Revealed from the grid</div>
@@ -98,6 +73,27 @@
}
</style>
<style>
.demo-scene {
position: absolute;
width: 1920px;
height: 1080px;
display: flex;
justify-content: center;
align-items: center;
font-family: "Inter", sans-serif;
}
.scene-a {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.scene-b {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
opacity: 0;
}
</style>
<script>
(function () {
const COLS = 16;