mcpField
H
hyperframes-registry

hyperframes-registry

github.com/boraoztunc创意与媒体434189 次安装11 周前更新
代码仓库

关于 hyperframes-registry

用于查找和安装可复用 HyperFrames 区块与组件，并将其接入合成内容的技能，面向使用 `hyperframes` CLI 的工作流。它还说明安装路径和接线步骤。

主要功能

  1. 01查找注册表中的区块与组件
  2. 02使用 `hyperframes add` 安装项目
  3. 03在 `hyperframes.json` 中配置安装路径
  4. 04将区块接入宿主合成内容
  5. 05把组件代码片段加入 HTML

适用场景

  1. 01按类型或标签查找注册表项目
  2. 02向 HyperFrames 项目安装区块
  3. 03将特效组件加入合成内容

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/boraoztunc/skills --skill hyperframes-registry

安装后在 Claude Code 中输入/hyperframes-registry确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

examples/
add-block.md
add-component.md
references/
demo-html-pattern.md
discovery.md
install-locations.md
wiring-blocks.md
wiring-components.md

详细介绍

HyperFrames 注册表

该注册表提供可通过 hyperframes add <name> 安装的可复用区块和组件。

  • 区块 — 独立的子合成（具有自己的尺寸、时长和时间线）。通过宿主合成中的 data-composition-src 引入。
  • 组件 — 效果片段（没有自己的尺寸）。直接粘贴到宿主合成的 HTML 中。

何时使用此技能

  • 用户提到 hyperframes add、“区块”、“组件”或 hyperframes.json
  • 会话中出现 hyperframes add 的输出（文件路径、剪贴板片段）
  • 你需要将已安装的项目接入现有合成
  • 你想了解注册表中有哪些可用项目

快速参考

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)

安装后，CLI 会打印写入的文件以及要粘贴到宿主合成中的片段。该片段只是起点——接入区块时，你需要添加 data-composition-id（必须与区块的内部合成 ID 相符）、data-start 和 data-track-index 属性。

注意：hyperframes add 仅适用于区块和组件。要使用示例，请改用 hyperframes init <dir> --example <name>。

安装位置

区块默认安装到 compositions/<name>.html。 组件默认安装到 compositions/components/<name>.html。

这些路径可在 hyperframes.json 中配置：

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

完整详情请参阅 install-locations.md。

接入区块

区块是独立合成——通过宿主 index.html 中的 data-composition-src 引入：

<div
  data-composition-id="data-chart"
  data-composition-src="compositions/data-chart.html"
  data-start="2"
  data-duration="15"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

关键属性：

  • data-composition-src — 区块 HTML 文件的路径
  • data-composition-id — 必须与区块的内部 ID 相符
  • data-start — 区块在宿主时间线中出现的时间（秒）
  • data-duration — 区块的播放时长
  • data-width / data-height — 区块画布尺寸
  • data-track-index — 图层顺序（数值越大越靠前）

完整详情请参阅 wiring-blocks.md。

接入组件

组件是片段——将其 HTML 粘贴到合成的标记中，将其 CSS 粘贴到样式块中，并将其 JS（如有）粘贴到脚本中：

  1. 读取已安装的文件（例如 compositions/components/grain-overlay.html）
  2. 将 HTML 元素复制到合成的 <div data-composition-id="..."> 中
  3. 将 <style> 块复制到合成的样式中
  4. 将任何 <script> 内容复制到合成的脚本中（放在时间线代码之前）
  5. 如果组件提供 GSAP 时间线集成（请查看片段中的注释块），将相应调用添加到时间线中

完整详情请参阅 wiring-components.md。

探索

浏览可用项目：

# Read the registry manifest
curl -s https://raw.githubusercontent.com/heygen-com/hyperframes/main/registry/registry.json

每个项目的 registry-item.json 包含：名称、类型、标题、描述、标签、尺寸（仅区块）、时长（仅区块）和文件列表。

有关按类型和标签筛选的详情，请参阅 discovery.md。

评论

支持 Markdown