HyperFrames 是一个将 HTML 作为视频唯一真实来源的创作框架。一个视频合成就是一个 HTML 文件，通过 data-* 属性定义时间与轨道，GSAP 时间线驱动动画，CSS 负责外观。框架负责片段可见性、媒体播放和时间线同步。
用途与核心思路：在编写 HTML 之前，先进行高层构思：明确叙事弧线、关键节点和情感节奏；确定合成数量、子合成与内联结构以及各轨道承载的内容（视频、音频、叠加层、字幕）；规划时序（哪个片段决定时长、转场位置、节奏）；先构建最终布局（最可见时刻的静态 HTML+CSS），再添加动画。所有视觉元素的位置和样式必须追溯到 DESIGN.md、visual-style.md 或用户明确指示，否则需先询问三个问题（情绪、明暗画布、品牌色/字体）并生成最小化 DESIGN.md。
主要能力：支持创建视频合成、动画、标题卡、叠加层、字幕、配音、音频响应式视觉效果和场景转场。提供数据属性控制片段（id、data-start、data-duration、data-track-index 等），支持子合成（使用 <template> 和 data-composition-src），视频必须静音并内联播放，音频单独使用 <audio> 元素。GSAP 时间线必须 paused 并注册到 window.__timelines，时长由 data-duration 决定。框架内置 lint、validate、inspect 命令行工具，可检查布局溢出、对比度、动画编排等，并输出动画映射 JSON 用于验证。
使用方式：在项目根目录创建 index.html 等文件，按规则编写 HTML、CSS 和 GSAP 时间线。运行 npx hyperframes lint、npx hyperframes validate、npx hyperframes inspect 进行质量检查。使用 node skills/hyperframes/scripts/animation-map.mjs 生成动画映射。编辑现有合成时先通读全文，匹配已有字体、颜色和动画模式，只修改请求的部分，保留无关片段时序。
适用场景：适用于需要以代码方式程序化生成或编辑视频内容的场景，如动态标题卡、数据可视化视频、社交媒体短视频、带字幕和配音的解说视频、音频响应式视觉等。
限制与规则：必须确定性，禁止 Math.random()、Date.now() 或时间逻辑，需使用种子伪随机。只对视觉属性做动画，禁止动画 visibility/display 或调用媒体 play()。禁止无限重复（repeat: -1），需计算有限次数。时间线必须在同步代码中构建，不能放在 async/await、setTimeout 或 Promise 中。多场景合成必须使用转场，每个场景必须有入场动画，除最终场景外禁止退场动画。避免使用 <br> 强制换行，使用 max-width 自然换行。视频必须静音且内联，音频单独元素。容器使用 padding 而非绝对定位。字体由编译器自动嵌入，外部媒体需加 crossorigin="anonymous"。动态文本溢出可使用 window.__hyperframes.fitTextFontSize。布局溢出可标记 data-layout-allow-overflow 或 data-layout-ignore。对比度需满足 WCAG AA。具体收费、价格、平台支持等暂未提供。