hyperframes-registry

Name: hyperframes-registry
Author: heygen-com

byheygen-com· 46 skills

Installs

267k

Stars

38k

Forks

3.6k

How to install hyperframes-registry?

heygen-com/hyperframes/hyperframes-registry

$npx -y skills add heygen-com/hyperframes --skill hyperframes-registry

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/hyperframes-registry"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# HyperFrames Registry
2
3	The registry provides reusable blocks and components installable via `hyperframes add <name>`.
4
5	- Blocks — standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.
6	- Components — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.
7
8	## Quick reference
9
10	```bash
11	hyperframes add data-chart # install a block
12	hyperframes add grain-overlay # install a component
13	hyperframes add captions # install every block tagged captions
14	hyperframes add shimmer-sweep --dir . # target a specific project
15	hyperframes add data-chart --json # machine-readable output
16	hyperframes add data-chart --no-clipboard # skip clipboard (CI/headless)
17	```
18
19	After install, the CLI prints which files were written and a snippet to paste into your host composition. The snippet is a starting point — you'll need to add `data-composition-id` (must match the block's internal composition ID), `data-start`, and `data-track-index` attributes when wiring blocks.
20
21	The positional value is resolved as an exact item name first. If no item matches and the value is a tag, the command installs every block with that tag. Registry dependencies are installed before the requested item. `hyperframes add` works only for blocks and components; for examples, use `hyperframes init <dir> --example <name>` instead.
22
23	## Install locations
24
25	Blocks install to `compositions/<name>.html` by default. Components install to `compositions/components/<name>.html` by default.
26
27	These paths are configurable in `hyperframes.json`:
28
29	```json
30	{
31	"registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
32	"paths": {
33	"blocks": "compositions",
34	"components": "compositions/components",
35	"assets": "assets"
36	}
37	}
38	```
39
40	See [install-locations.md](./references/install-locations.md) for full details.
41
42	## Wiring blocks
43
44	Blocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:
45
46	```html
47	<div
48	data-composition-id="data-chart"
49	data-composition-src="compositions/data-chart.html"
50	data-start="2"
51	data-duration="15"
52	data-track-index="1"
53	data-width="1920"
54	data-height="1080"
55	></div>
56	```
57
58	Key attributes:
59
60	- `data-composition-src` — path to the block HTML file
61	- `data-composition-id` — must match the block's internal ID
62	- `data-start` — when the block appears in the host timeline (seconds)
63	- `data-duration` — how long the block plays
64	- `data-width` / `data-height` — block canvas dimensions
65	- `data-track-index` — layer ordering (higher = in front)
66
67	See [wiring-blocks.md](./references/wiring-blocks.md) for full details.
68
69	## Wiring components
70
71	Components are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):
72
73	1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)
74	2. Copy the HTML elements into your composition's `<div data-composition-id="...">`
75	3. Copy the `<style>` block into your composition's styles
76	4. Copy any `<script>` content into your composition's script (before your timeline code)
77	5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline
78
79	See [wiring-components.md](./references/wiring-components.md) for full details.
80
81	## Discovery
82
83	Use the CLI as the primary discovery surface:
84
85	```bash
86	npx hyperframes catalog
87	npx hyperframes catalog --type block
88	npx hyperframes catalog --type component
89	npx hyperframes catalog --type block --tag social
90	npx hyperframes catalog --json
91	npx hyperframes catalog --human-friendly
92	```
93
94	The normal table and `--json` modes only list matches; install a selected name with `hyperframes add <name>`. `--human-friendly` opens an interactive picker and installs the selected item immediately. In CI or agent workflows, prefer `--json` followed by an explicit `add`.
95
96	If the CLI cannot reach the configured registry, inspect the raw manifest as a fallback:
97
98	```bash
99	curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json
100	```
101
102	Each item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.
103
104	See [discovery.md](./references/discovery.md) for details on filtering by type and tags.
105
106	## Contributing a new block or component
107
108	To author a NEW registry item (caption style, VFX block, transition, lower third, or a reusable component) and ship it as an upstream PR — not install an existing one — follow the full idea → scaffold → build → validate → preview → ship workflow in [contributing.md](./references/contributing.md). Copy-paste starter templates (caption / VFX / component / `registry-item.json`) are in [templates.md](./references/templates.md).

6 picks

Type

Run `npx skills use "https://github.com/heygen-com/hyperframes" --skill "heygen-com/hyperframes/hyperframes-registry"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/heygen-com/hyperframes" that are relevant to the current task. Run `npx skills add "https://github.com/heygen-com/hyperframes"` and select the relevant skills, then follow their instructions.

hyperframes-registry

How to install hyperframes-registry?

Related

hyperframes-registry

How to install hyperframes-registry?

Related