hyperframes-core
用于构建可渲染项目的HTML组合规范与工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：用于构建可渲染项目的HTML组合规范与工具 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x-3/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘我需要创建一个产品功能演示视频，包含开场动画、三个功能点介绍和结尾呼号，请按照HyperFrames规范帮我规划SCRIPT.md并生成HTML骨架。’，它会引导你定义时间线轨道，使用`data-start`、`data-end`属性安排每个“剪辑”的出场时间，并生成结构清晰、易于与Tailwind样式集成的HTML代码。
介绍
HyperFrames Core 是一个定义HTML组合规范的技能，旨在解决在构建复杂、时间线驱动的可渲染项目（如交互式演示、动画视频、数据可视化等）时，代码结构混乱、时序难以管理、媒体播放控制不统一的问题。
它通过一套约定的HTML属性（如data-*时序属性）、CSS类（如class="clip"）和结构规则，将项目分解为轨道、子组合和变量，实现了声明式的组合结构。开发者可以像编写剧本（SCRIPT.md）或故事板（STORYBOARD.md）一样规划项目，然后使用此规范编写HTML，确保渲染的确定性和跨框架的一致性。
该技能特别适合需要精确控制元素出现时机、动画序列、媒体播放以及与框架（如Tailwind CSS）集成的开发者。无论是制作交互式课程讲解、产品演示视频，还是构建复杂的动画界面，都能从中受益。
使用前务必阅读其文档，理解data-*属性的计时逻辑和“剪辑”概念。建议先使用STORYBOARD.md格式规划整体时间线和轨道，再着手编写HTML，并利用其内置的验证规则确保组合的正确性。
核心特点
与通用的动画库或时间线工具不同，它提供了一套完整的、框架无关的HTML组合契约，将时间线、轨道、变量和媒体播放控制直接编码在HTML属性中，实现了极致的声明式和确定性渲染。
注意事项
不适合需要高度动态、实时数据驱动或游戏级交互逻辑的复杂应用场景。
常见问题
HyperFrames 和普通CSS动画/JS动画库有什么区别？
HyperFrames是组合规范而非动画库，它通过HTML属性定义整个项目的时间线、轨道和剪辑关系，确保渲染的确定性和结构清晰，更适合复杂的、剧本化的渲染项目。
如何开始一个HyperFrames项目？
建议先阅读README，然后使用STORYBOARD.md或SCRIPT.md格式规划项目，最后按照规范编写包含`data-*`时序属性和`class="clip"`的HTML。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x-3/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x-3/raw/index.md（查看排版版本）