# Hyperframes Registry

Install and wire registry blocks and components into HyperFrames compositions.

- Repository: https://github.com/calesthio/OpenMontage (74341 stars)
- Category: Git and review
- License: AGPL-3.0
- Last updated: 2026-10-28
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add calesthio/OpenMontage --skill hyperframes-registry -g -a claude-code -y`
Codex: `npx skills add calesthio/OpenMontage --skill hyperframes-registry -g -a codex -y`
Cursor: `npx skills add calesthio/OpenMontage --skill hyperframes-registry -g -a cursor -y`
Gemini CLI: `npx skills add calesthio/OpenMontage --skill hyperframes-registry -g -a gemini-cli -y`

## Description

Install and wire registry blocks and components into HyperFrames compositions. Use when running hyperframes add, installing a block or component, wiring an installed item into index.html, or working with hyperframes.json. Covers the add command, install locations, block sub-composition wiring, component snippet merging, registry discovery, and authoring a new block or component to contribute upstream (idea → scaffold → validate → PR).

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# HyperFrames Registry

The registry provides reusable blocks and components installable via `hyperframes add <name>`.

- **Blocks**, standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.
- **Components**, effect snippets (no own dimensions). Pasted directly into a host composition's HTML.

## Quick reference

```bash
hyperframes add data-chart              # install a block
hyperframes add grain-overlay           # install a component
hyperframes add shimmer-sweep --dir .   # target a specific project
hyperframes add data-chart --json       # machine-readable output
hyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)
```

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.

Note: `hyperframes add` only works for blocks and components. For examples, use `hyperframes init <dir> --example <name>` instead.

## Install locations

Blocks install to `compositions/<name>.html` by default.
Components install to `compositions/components/<name>.html` by default.

These paths are configurable in `hyperframes.json`:

```json
{
  "registry": "https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry",
  "paths": {
    "blocks": "compositions",
    "components": "compositions/components",
    "assets": "assets"
  }
}
```

See [install-locations.md](./references/install-locations.md) for full details.

## Wiring blocks

Blocks are standalone compositions, include them via `data-composition-src` in your host `index.html`:

The rest: https://github.com/calesthio/OpenMontage/blob/HEAD/.agents/skills/hyperframes-registry/SKILL.md