用途：HyperFrames 从 HTML 渲染视频。一个合成就是一个 HTML 文件，其 DOM 用 data-* 属性声明时间，动画运行时必须可寻址（seekable），媒体播放由框架接管。本技能是技术契约，讲如何构建一个 HyperFrames 项目；其他主题（动画、创意、media-use、CLI、registry）由同域技能覆盖。
主要能力与用法：根有两种互不替换的形式——独立顶层 index.html 中根 div[data-composition-id] 直接在 body 内，不要包 template（包裹会被 lint 拒绝）。通过 data-composition-src 加载的子合成要把根包在 template 里，且 style/script 要放进 template 内（汇编器会丢弃文件自身 head 中的 style/script，link 会被提升）。宿主槽、内层 template 与 window.__timelines["<id>"] 建议用同一 id。根必须有显式尺寸，且到 height:100% 元素之间的祖先都要有确定高度，否则内容会塌到左上角。每个合成只注册一个 gsap.timeline({ paused: true })，键为根 data-composition-id；渲染长度由根 data-duration 决定。
限制与首轮 lint 易错点：CSS 初始 transform 不得与 GSAP 对同一属性的 tween 并存，应改用 gsap.fromTo；video/audio 不得加 crossorigin；video[data-start] 的祖先不得也带 data-start；每个 audio 必须有 id。lint 报错会同时关闭布局与对比度审计，数字会显示为 0/0。不可违反的规则：禁止渲染时时钟、未播种随机、网络与输入状态，禁止 repeat:-1；不得对 clip 元素 tween display/visibility，需用 autoAlpha 或零时长边界设置；body 文本不得用 br；跨合成 id 要唯一；若使用 shader 转场或 HDR 媒体，全屏填充要放在全出血子元素上。
校验：使用 hyperframes-cli；npx hyperframes check 应零发现；含子合成时用 npx hyperframes snapshot --at <midpoints> 逐帧检查；npx hyperframes preview --background 供审阅；仅在用户批准后运行 npx hyperframes render。编辑已有合成时先读文件，保留无关时间、轨道、ID、变量与媒体路径。