hyperframes-core
用于构建和验证可渲染项目的HTML组合契约
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：用于构建和验证可渲染项目的HTML组合契约 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x-4/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
'我需要创建一个产品发布会的交互式时间线，包含视频片段、文字标题动画和图表数据展示，请帮我按照HyperFrames契约编写HTML结构。'，它会引导你使用`data-start`、`data-end`等属性定义每个元素的出现时间，用`class="clip"`标记可剪辑的媒体块，并建议使用`track`元素组织不同的媒体轨道，最终生成一个结构清晰、渲染确定性的HTML文档。
介绍
HyperFrames Core Skill 旨在解决开发者在构建复杂、时间线驱动的可渲染项目（如交互式视频、动画演示、数据可视化等）时，HTML结构混乱、时序难以管理、渲染结果不确定的问题。它提供了一套完整的HTML组合契约，包括结构定义、data-*时序属性、class="clip"、轨道、子组合、变量、框架控制的媒体播放、确定性渲染规则和验证机制。
开发者通过遵循这套契约，在编写HTML时即可定义项目的完整时间线和交互逻辑，确保在不同环境下渲染结果的一致性。它特别支持Tailwind CSS项目，并引入了STORYBOARD.md和SCRIPT.md两种规划文档格式，帮助团队在编码前明确项目结构和时序。
该Skill适合需要构建具有精确时序控制、复杂媒体交互或需要确保渲染一致性的前端开发者、全栈开发者和智能体开发者。无论是制作数据驱动的动画故事板，还是开发包含多轨道媒体（视频、音频、图形）的交互式应用，都能从中受益。
使用前建议先阅读仓库的README，理解其核心契约。在编写HTML时，应严格按照其定义的data-*属性来管理时序，并利用class="clip"来标记可剪辑元素。对于大型项目，强烈建议先使用STORYBOARD.md或SCRIPT.md进行规划和设计，再着手编码，以提高开发效率和项目可维护性。
核心特点
与通用的动画库或时间线工具不同，HyperFrames Core 提供了一套完整的、基于HTML属性的“组合契约”，将项目结构、时序逻辑和渲染规则直接编码在HTML中，实现了声明式的、框架无关的确定性渲染，尤其擅长处理多轨道媒体和复杂子组合的场景。
注意事项
不适合用于构建简单的、无时序要求的静态网页或对HTML结构有严格限制的传统CMS项目。
常见问题
HyperFrames Core 和 CSS/JS 动画库有什么区别？
它不是动画库，而是一套HTML组合契约，通过`data-*`属性定义时序和结构，确保跨环境渲染一致性，更适合复杂的时间线项目。
必须使用 Tailwind CSS 吗？
不是必须，但它对Tailwind项目有专门的支持和优化，可以无缝集成。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x-4/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x-4/raw/index.md（查看排版版本）