hyperframes-core
HyperFrames组合合约，构建可渲染项目
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：HyperFrames组合合约，构建可渲染项目 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x-2/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“使用HyperFrames合约创建一个包含三个片段、每个片段持续5秒的演示项目，并添加淡入淡出效果。” 它会根据data-*时序属性生成对应的HTML结构，自动应用class="clip"标记，并设置好轨道和变量，确保渲染行为确定且可验证。
介绍
HyperFrames Core 是一个定义明确的组合合约，用于构建单个可渲染的 HyperFrames 项目。它解决了在复杂多媒体演示或交互式页面中，如何统一管理片段、时间轴、变量、子合成以及媒体播放的问题。通过遵循该合约，你可以确保项目结构清晰、渲染行为确定，并方便进行验证和调试。
使用方式非常简单：在编写 composition HTML 前，先阅读合约文档，理解 data-* 时序属性、class="clip" 标记、轨道（tracks）和子合成（sub-compositions）等概念。然后按照合约规定组织 HTML 结构，利用内置的变量系统和框架自有的媒体播放功能，即可构建出可预测、可复用的渲染项目。合约还涵盖了 Tailwind 项目的集成方式，以及 STORYBOARD.md / SCRIPT.md 等计划文件格式。
本合约适合前端开发者、内容创作者以及视频剪辑师，尤其是那些需要构建带有时间线、动画和交互的演示项目或宣传短片的用户。如果你已经熟悉 HTML/CSS，并希望以声明式的方式控制渲染节奏，HyperFrames 将提供一套优雅的解决方案。
使用前建议先通读合约的“确定性渲染规则”和“验证”部分，避免因时序或类名使用不当导致渲染异常。对于纯静态页面或简单博客，该合约可能显得过于重量级，更适合需要精确时间控制的多媒体项目。
核心特点
HyperFrames Core 不是普通的动画库或框架，而是一套完整的组合合约，它定义了项目结构、时序属性和渲染规则，确保多个创作者或工具协作时产出一致的可渲染结果。
注意事项
不适用于纯静态内容展示或无需时间线控制的简单页面，合约的学习曲线对初学者有一定门槛。
常见问题
HyperFrames 和普通的 HTML 动画有什么区别？
HyperFrames 通过合约规定了项目结构、时序属性和渲染规则，保证每个片段（clip）的播放行为确定，便于多人协作和自动化验证。
是否支持 Tailwind CSS？
支持，合约中明确包含了 Tailwind 项目的集成方式，可以在 composition HTML 中直接使用 Tailwind 类名。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x-2/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x-2/raw/index.md（查看排版版本）