hyperframes-core
超帧组合合约，构建可渲染项目
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：超帧组合合约，构建可渲染项目 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x-5/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'使用HyperFrames合约创建一个包含三个子组合的时序动画页面，第一个子组合显示标题文字淡入，第二个子组合显示数据图表从底部滑动进入，第三个子组合播放一段背景音乐，整体持续时间8秒'，它会生成一个符合composition结构的HTML文件，包含data-*时序属性、clip类、track定义以及子组合引用，并自动添加确定性渲染标记。
介绍
HyperFrames Core 是一个用于构建可渲染项目的组合合约框架。它定义了一套严格的 composition 结构、data-* 时序属性、class=“clip” 规则、轨道（tracks）、子组合（sub-compositions）、变量系统以及框架自有的媒体播放机制，确保每次渲染结果具有确定性。该合约还包含验证规则，覆盖 Tailwind 项目以及 STORYBOARD.md / SCRIPT.md 两种计划格式。
使用方式：开发者只需按照合约编写 composition HTML，HyperFrames 会自动解析 data-* 属性控制元素动画时序，通过 track 和 sub-composition 实现复杂场景编排，并利用变量系统传递状态。Tailwind 用户可直接在 class 中应用 clip 等自定义类，无需额外配置。
适合人群：前端开发者、全栈开发者、内容创作者（如制作交互式演示、动画、数据可视化、教学课件等）。尤其适合需要精确控制时间线、希望保持渲染结果一致性的团队或个人。
使用建议：开始前务必先阅读 STORYBOARD.md 和 SCRIPT.md 格式说明，规划好时间线和场景结构。建议在项目中先创建最小可运行示例，逐步添加轨道和子组合。注意框架只负责渲染逻辑，不提供 UI 组件库，需自行搭配 HTML/CSS 基础。
核心特点
与同类动画框架不同，HyperFrames 通过 data-* 属性直接声明时序，并强制要求 composition 结构，确保所有渲染结果可预测、可复现，同时内置 Tailwind 和计划文档支持，降低从设计到实现的沟通成本。
注意事项
目前仅适用于 Web 端渲染，不适用于原生应用或服务端渲染场景，且需要开发者手动编写 HTML 结构，没有可视化编辑器。
常见问题
HyperFrames 与 GreenSock (GSAP) 有什么区别？
HyperFrames 更侧重于组合结构和声明式时序控制，通过 data-* 属性定义时间线，而 GSAP 是纯 JavaScript 动画库，需要手动调用 API。HyperFrames 的确定性渲染规则更适合多人协作的项目。
如何开始使用 HyperFrames？
安装核心库后，创建一个 composition HTML 文件，按照合约定义 data-* 属性、clip 类、track 等元素，框架会自动解析并渲染。建议先阅读仓库中的 STORYBOARD.md 示例。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x-5/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x-5/raw/index.md（查看排版版本）