hyperframes-core
构建可渲染项目的组合框架与规则
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：构建可渲染项目的组合框架与规则 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x-6/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请根据 HyperFrames Core 合约，创建一个包含两个子组合的 composition HTML，第一个子组合显示标题动画（时长5秒），第二个子组合展示图片轮播（每张2秒），使用 `data-start` 和 `data-duration` 属性。' 它会生成符合规范的 HTML 结构，包括必要的 `<clip>` 元素、轨道定义和变量声明，并自动添加 `class="clip"` 标记。
介绍
HyperFrames Core 解决了在复杂多媒体项目中，如何统一管理多个子组合、时序编排、变量传递和媒体播放的问题。它定义了一套完整的 composition contract（组合合约），让开发者可以基于 HTML 结构、data-* 时序属性、class="clip" 标记、轨道（tracks）和子组合（sub-compositions）等机制，构建出确定性渲染的交互式项目，同时支持 Tailwind 样式和 STORYBOARD.md / SCRIPT.md 策划格式。
使用方式：先阅读仓库中的 README 和合约文档，理解 composition 结构规则。然后按照合约要求编写 composition HTML，为每个元素添加时序属性（如 data-start、data-duration），用 class="clip" 定义剪辑区域，用轨道组织并行内容，并引用子组合或变量实现复用。框架会接管媒体播放，并依据确定性渲染规则输出最终结果，同时提供验证工具确保合规。
适合前端开发、全栈开发、内容创作者（尤其涉及视频/动画叙事）以及需要标准化 HTML 项目结构的团队。如果你正在搭建一个包含多个片段、时间线、变量和媒体资源的可渲染项目，HyperFrames Core 能帮你将零散内容组织成可预测、可复用的组合结构。
使用建议：务必先通读合约文档再动手写 HTML，避免因属性缺失或结构不符合规范导致渲染异常。建议将 STORYBOARD.md 与 SCRIPT.md 作为策划前置步骤，与 composition HTML 同步维护。对于纯静态页面或不需要时序编排的简单项目，本合约带来的复杂度可能超过收益，请按需选用。
核心特点
与通用 HTML 框架或视频编辑工具不同，HyperFrames Core 专为可渲染项目设计，通过 `data-*` 时序属性、`class="clip"` 和轨道机制，将时间线、子组合、变量和框架管理的媒体播放统一到一份 HTML 契约中，并内置确定性渲染规则和验证能力，同时兼容 Tailwind 和策划文档格式。
注意事项
不适合不需要时序编排、子组合或变量复用的简单静态页面，也不适合非 HTML 的项目形式（如纯视频文件）。
常见问题
如何定义一条轨道？
在 composition HTML 中使用 `<track>` 元素或通过 `data-track` 属性指定，轨道内可包含多个剪辑片段，按时间顺序播放。
data-* 属性有哪些常用值？
常用包括 `data-start`（开始时间）、`data-duration`（持续时长）、`data-clip`（引用剪辑资源）、`data-variable`（变量绑定）等，详见合约文档。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x-6/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x-6/raw/index.md（查看排版版本）