hyperframes-core
构建可渲染项目的HTML组合契约与规范
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：构建可渲染项目的HTML组合契约与规范 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要创建一个包含多个视频片段、文字标题和背景音乐同步的宣传片HTML结构，要求能精确控制每个元素的出现和消失时间。”，它会引导你使用HyperFrames Core的契约，例如使用`data-start`和`data-end`属性定义剪辑时序，用`class="clip"`包装媒体元素，并按照轨道和子组合来组织整个项目结构，确保最终渲染的确定性。
介绍
HyperFrames Core 是一个用于定义和构建可渲染项目的HTML组合契约。它解决了在创建复杂、时间线驱动的多媒体或交互式Web内容时，结构混乱、时序难以管理、渲染结果不确定的问题。
该技能通过一套特定的HTML属性（如data-*时序属性）、CSS类（如class="clip"）和结构规则，将项目组织为包含轨道、子组合、变量的清晰层次结构。它强制实施确定性渲染规则，并支持框架控制的媒体播放和项目验证，确保最终输出的一致性和可预测性。
它非常适合需要精确控制动画、视频、音频或复杂UI元素时序和组合的前端开发者、全栈开发者以及内容创作者。特别是那些使用Tailwind CSS构建项目，或需要遵循STORYBOARD.md/SCRIPT.md规划格式的团队。
在使用前，强烈建议先阅读其文档，理解组合契约的全部规则，然后再着手编写HTML。这能避免因违反契约而导致渲染错误或验证失败。对于简单的静态页面或无需严格时序控制的项目，可能显得过于复杂。
核心特点
与普通的动画库或时间线工具不同，它提供了一套完整的、基于HTML属性的“组合契约”，强制规定了项目结构、时序和渲染的确定性规则，并原生集成了对Tailwind项目和特定规划格式（STORYBOARD.md）的支持。
注意事项
不适合构建简单的静态网页或对渲染时序没有严格要求的轻量级交互应用。
常见问题
HyperFrames Core 是什么？
它是一个用于构建可渲染Web项目的HTML组合规范与契约，定义了结构、时序和渲染规则。
使用前需要准备什么？
需要先阅读仓库的README，理解其组合契约、`data-*`属性用法和项目结构要求。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core/raw/index.md（查看排版版本）