hyperframes-core
HyperFrames composition合约，构建可渲染项目
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：HyperFrames composition合约，构建可渲染项目 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x-8/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'使用 HyperFrames Core 创建一个产品演示页面，包含三段式动画：第一段 logo 淡入（持续2秒），第二段标题滑动进场（持续1.5秒），第三段按钮脉冲闪烁（持续1秒），全部使用 `data-*` 属性定义时间线，并添加 `class="clip"` 控制剪辑边界。' 它会生成完整的 Composition HTML 结构，包括轨道定义、子组合嵌套、变量声明，以及确定性渲染所需的验证规则，确保动画按时间轴精确执行。
介绍
HyperFrames Core 提供了一套完整的 Composition 合约，用于构建可渲染的交互式项目。它解决了在复杂前端项目中如何组织时序动画、多轨道内容、子组合以及变量管理的难题，确保渲染结果具有确定性和可预测性。通过定义清晰的 data-* 时序属性、class="clip" 剪辑机制、轨道（Track）与子组合（Sub-composition）结构，开发者可以像编排电影一样构建用户界面，同时支持框架自有的媒体播放和 Tailwind 项目集成。
使用方式非常直接：在 HTML 中按照 Composition 合约的规范编写结构，利用 data-* 属性控制时间线，通过 class="clip" 定义裁剪区域，通过变量和子组合实现模块化复用。项目还提供了 STORYBOARD.md 和 SCRIPT.md 两种计划格式，帮助你在编写 Composition HTML 之前先规划好叙事流程。验证规则会确保每个渲染周期内状态一致，避免因状态突变导致的渲染不一致。
适合前端开发者、全栈开发者以及需要构建复杂时序动画（如产品演示、数据可视化、交互动画）的团队。尤其适合那些希望将 UI 渲染与时间轴逻辑解耦，追求可预测、可测试的渲染结果的项目。对于使用 Tailwind 的项目，HyperFrames 也能无缝集成，利用其工具类快速构建样式。
使用前建议先阅读仓库中的 STORYBOARD.md 和 SCRIPT.md 规划格式，从宏观叙事入手，再逐步细化到 Composition HTML 的具体实现。注意：HyperFrames 并非通用 UI 框架，而是针对「可渲染项目」的专有合约，不适合纯静态页面或不需要时序控制的简单场景。
核心特点
与同类项目（如 GSAP、Framer Motion）相比，HyperFrames Core 强调「确定性渲染合约」——通过 `data-*` 时序属性、`class="clip"` 剪辑机制和变量系统，确保每次渲染结果完全可预测，且支持子组合嵌套和框架自有媒体播放，而非仅仅提供动画 API。
注意事项
不适合不需要时序控制或复杂动画编排的纯静态页面，以及非 Web 前端场景（如后端服务、移动原生应用）。
常见问题
如何定义 `data-*` 时序属性？
在元素上使用 `data-start`、`data-duration`、`data-hold` 等属性，分别控制开始时间、持续时间和保持时间，支持毫秒或秒单位。
`class="clip"` 有什么作用？
`class="clip"` 用于标记剪辑片段，其内容仅在父轨道的时间窗口内可见，超出部分自动裁剪，常用于实现转场或遮罩效果。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x-8/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x-8/raw/index.md（查看排版版本）