用途：HyperFrames 从 HTML 渲染视频，本技能说明如何构建一个 hyperframes 项目，即合成（composition）的技术契约。合成是一个 HTML 文件，其 DOM 用 data-* 属性声明时间，动画运行时必须可寻址，媒体播放由框架掌控。
主要能力：涵盖合成结构、data-* 时间属性、class="clip"、轨道与剪辑、子合成、变量与媒体、确定性规则、全屏运动、分镜格式、评审与制作循环、简报与脚本格式、子代理调度、Tailwind v4 等主题，细节按需查阅 references/ 目录。动画运行时细节见 hyperframes-animation 的 adapters/<runtime>.md。
使用方式：根节点有两种形式且不可互换——独立顶层 index.html 的根 <div data-composition-id> 直接位于 <body>，不加 <template>；子合成需用 <template> 包裹根节点。每个合成在 window.__timelines["<id>"] 注册恰好一个 gsap.timeline({ paused: true })，渲染长度由根节点 data-duration 决定。验证使用 npx hyperframes check、npx hyperframes snapshot --at <midpoints>、npx hyperframes preview --background，用户批准后再 npx hyperframes render。
限制：禁止渲染时时钟、未播种的 Math.random、网络与输入状态，禁止 repeat: -1；不得对剪辑元素补间 display 或原始 visibility；<video>/<audio> 不得加 crossorigin；每个 <audio> 必须有 id；<video data-start> 的祖先不得同时带 data-start；正文不得用 <br>；id 需全局唯一。lint 错误会关闭布局与对比度审计。资料未提供收费、价格与平台信息。