hyperframes-core
HyperFrames组合合约，构建可渲染项目
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：HyperFrames组合合约，构建可渲染项目 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x-7/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'请根据我的STORYBOARD.md创建一个HyperFrames composition HTML，包含三个场景，每个场景使用data-duration和class="clip"控制时序和剪辑，并引用Tailwind类设置样式。' 它会生成符合合约规范的HTML文件，包含轨道、变量和子组合结构，可直接用于渲染。
介绍
HyperFrames Core 是一个用于定义和构建可渲染项目的组合合约。它解决了在复杂媒体或前端项目中，如何结构化地组织元素、控制时序、管理变量和子组合的问题。通过提供 data-* 时序属性、class="clip" 剪辑标记、轨道（tracks）系统、变量注入、框架内置媒体播放以及确定性渲染规则，让开发者能够以声明式方式编写可预测、可复用的组合 HTML。
使用方式：你需要在项目中引入 HyperFrames Core，然后按照合约规范编写 composition HTML，利用其提供的属性和类来定义元素的行为和时序。支持 Tailwind 项目，同时也兼容 STORYBOARD.md 和 SCRIPT.md 计划格式，便于从规划到实现的无缝衔接。安装后可直接开始编写，无需额外配置。
适合谁：前端开发人员、视频/动画内容创作者、以及需要构建可交互、时序严格的媒体项目的开发者。如果你正在使用 Tailwind 构建 UI，或者需要将故事板/脚本直接转化为可播放的渲染项目，这个 Skill 会很适合你。
使用建议：建议先阅读仓库中的 README 和合约规范文档，理解 data-* 属性和轨道机制后再开始编写。对于复杂项目，可以先在 STORYBOARD.md 中规划好场景和时序，再转化为 composition HTML。注意这不是一个通用的 UI 框架，而是专注于确定性和可编排的渲染结构。
核心特点
与普通前端框架或动画库不同，HyperFrames Core 通过合约化的方式强制规定了组合结构、时序属性和渲染规则，确保项目在任意环境下具有一致的确定性输出，同时内置了子组合、变量和媒体播放等高级编排能力。
注意事项
不适合需要动态交互（如实时用户输入）或非确定性渲染的场景，主要面向预定义、可编排的媒体项目。
常见问题
HyperFrames Core 和普通 HTML/CSS 有什么区别？
它提供了一套用于定义元素时序、剪辑和组合结构的约定，通过 `data-*` 属性和 `class="clip"` 等标记实现，而普通 HTML 没有这些内置的编排能力。
是否支持 Tailwind CSS？
是的，支持 Tailwind 项目，你可以在 composition HTML 中直接使用 Tailwind 类，同时享受 HyperFrames 的时序和组合特性。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x-7/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x-7/raw/index.md（查看排版版本）