hyperframes-core
构建可渲染项目的HTML组合契约框架
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hyperframes-core。 它的用途是：构建可渲染项目的HTML组合契约框架 完整的 Skill 内容见：https://321skill.com/skills/hyperframes-core-x/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我需要创建一个产品发布会的开场动画，包含Logo淡入、背景视频播放和文字逐行出现的效果。”，它会引导你使用HyperFrames Core的契约，在HTML中通过`data-start`、`data-end`属性定义每个元素的精确时间点，用`class="clip"`包装媒体片段，并可能建议你使用`SCRIPT.md`格式先规划整个时间线，最终生成一个结构清晰、时序可控的完整项目。
介绍
HyperFrames Core是一个用于定义和构建可渲染项目的HTML组合契约框架。它解决了在创建复杂、时间线驱动的多媒体或交互式内容时，HTML结构、时序逻辑和状态管理混乱的问题。
通过提供一套基于HTML data-* 属性、class="clip"、轨道、子组合、变量和确定性渲染规则的契约，开发者可以像编写标准HTML一样，清晰地定义项目的结构、元素的出场时序、媒体播放逻辑以及验证规则。它还支持Tailwind CSS项目，并引入了STORYBOARD.md和SCRIPT.md等规划格式，帮助在编码前进行设计。
该框架非常适合需要精确控制视觉元素时序和组合的前端开发者、全栈开发者以及构建交互式演示、数据可视化或复杂UI动画的内容创作者。它尤其适用于那些项目结构复杂、涉及多个媒体轨道或需要严格遵循时间线的场景。
使用前建议先详细阅读其文档，理解其契约规则，并利用STORYBOARD.md进行前期规划，以确保HTML结构符合框架的验证要求，从而避免运行时错误。
核心特点
与普通动画库或时间线工具不同，HyperFrames Core是一个基于HTML的完整组合契约，它通过扩展HTML标准属性（如`data-*`）和引入确定性渲染规则，将复杂的时序逻辑和项目结构直接编码在标记语言中，实现了声明式的、可验证的项目构建方式。
注意事项
不适合用于构建传统的、无复杂时序要求的静态网页或简单的业务表单应用。
常见问题
HyperFrames Core 和 CSS/JS 动画库有什么区别？
它是一个基于HTML契约的完整项目组合框架，不仅处理动画，还定义了项目结构、时序、媒体播放和验证规则，而不仅仅是动画效果。
需要学习新的脚本语言吗？
不需要，它主要基于扩展的HTML属性和CSS类工作，你可以用熟悉的HTML/CSS/JS进行开发，但需遵循其特定契约。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hyperframes-core-x/raw/index.md 读取 hyperframes-core 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hyperframes-core-x/raw/index.md（查看排版版本）