Update to HyperFrames by HeyGen

{
  "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, and registry discovery.",
  "included_files": [
    {
      "relative_path": "agents/openai.yaml",
      "size_in_bytes": 152
    },
    {
      "relative_path": "examples/add-block.md",
      "size_in_bytes": 1232
    },
    {
      "relative_path": "examples/add-component.md",
      "size_in_bytes": 1473
    },
    {
      "relative_path": "references/demo-html-pattern.md",
      "size_in_bytes": 1884
    },
    {
      "relative_path": "references/discovery.md",
      "size_in_bytes": 2704
    },
    {
      "relative_path": "references/install-locations.md",
      "size_in_bytes": 1519
    },
    {
      "relative_path": "references/wiring-blocks.md",
      "size_in_bytes": 3127
    },
    {
      "relative_path": "references/wiring-components.md",
      "size_in_bytes": 2402
    }
  ],
  "name": "hyperframes-registry",
  "skill_md_contents": "---\nname: hyperframes-registry\ndescription: 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, and registry discovery.\n---\n\n# HyperFrames Registry\n\nThe registry provides reusable blocks and components installable via `hyperframes add <name>`.\n\n- **Blocks** — standalone sub-compositions (own dimensions, duration, timeline). Included via `data-composition-src` in a host composition.\n- **Components** — effect snippets (no own dimensions). Pasted directly into a host composition's HTML.\n\n## When to use this skill\n\n- User mentions `hyperframes add`, \"block\", \"component\", or `hyperframes.json`\n- Output from `hyperframes add` appears in the session (file paths, clipboard snippet)\n- You need to wire an installed item into an existing composition\n- You want to discover what's available in the registry\n\n## Quick reference\n\n```bash\nhyperframes add data-chart              # install a block\nhyperframes add grain-overlay           # install a component\nhyperframes add shimmer-sweep --dir .   # target a specific project\nhyperframes add data-chart --json       # machine-readable output\nhyperframes add data-chart --no-clipboard  # skip clipboard (CI/headless)\n```\n\nAfter 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.\n\nNote: `hyperframes add` only works for blocks and components. For examples, use `hyperframes init <dir> --example <name>` instead.\n\n## Install locations\n\nBlocks install to `compositions/<name>.html` by default.\nComponents install to `compositions/components/<name>.html` by default.\n\nThese paths are configurable in `hyperframes.json`:\n\n```json\n{\n  \"registry\": \"https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry\",\n  \"paths\": {\n    \"blocks\": \"compositions\",\n    \"components\": \"compositions/components\",\n    \"assets\": \"assets\"\n  }\n}\n```\n\nSee [install-locations.md](./references/install-locations.md) for full details.\n\n## Wiring blocks\n\nBlocks are standalone compositions — include them via `data-composition-src` in your host `index.html`:\n\n```html\n<div\n  data-composition-id=\"data-chart\"\n  data-composition-src=\"compositions/data-chart.html\"\n  data-start=\"2\"\n  data-duration=\"15\"\n  data-track-index=\"1\"\n  data-width=\"1920\"\n  data-height=\"1080\"\n></div>\n```\n\nKey attributes:\n\n- `data-composition-src` — path to the block HTML file\n- `data-composition-id` — must match the block's internal ID\n- `data-start` — when the block appears in the host timeline (seconds)\n- `data-duration` — how long the block plays\n- `data-width` / `data-height` — block canvas dimensions\n- `data-track-index` — layer ordering (higher = in front)\n\nSee [wiring-blocks.md](./references/wiring-blocks.md) for full details.\n\n## Wiring components\n\nComponents are snippets — paste their HTML into your composition's markup, their CSS into your style block, and their JS into your script (if any):\n\n1. Read the installed file (e.g., `compositions/components/grain-overlay.html`)\n2. Copy the HTML elements into your composition's `<div data-composition-id=\"...\">`\n3. Copy the `<style>` block into your composition's styles\n4. Copy any `<script>` content into your composition's script (before your timeline code)\n5. If the component exposes GSAP timeline integration (see the comment block in the snippet), add those calls to your timeline\n\nSee [wiring-components.md](./references/wiring-components.md) for full details.\n\n## Discovery\n\nBrowse available items:\n\n```bash\n# Read the registry manifest\ncurl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json\n```\n\nEach item's `registry-item.json` contains: name, type, title, description, tags, dimensions (blocks only), duration (blocks only), and file list.\n\nSee [discovery.md](./references/discovery.md) for details on filtering by type and tags.\n"
}