1实现原理 · 为什么它能做到
前提被写明：渲染引擎是 HyperFrames、场景源是 HTML/CSS/JS——因此全部规则围绕「组合根 + 暂停时间线 + 可寻址 + 确定性」展开，而不是通用前端开发。
skills/hyperframes-scene-builder/SKILL.md
Use this skill when implementing or revising a HyperFrames scene. This skill assumes HyperFrames is the render engine and the scene source is HTML/CSS/JS.
这里在做什么：先钉死技术栈再给规则；这也是全族唯一直接给出 HyperFrames CLI 命令的 skill。
时间线必须暂停（paused），因为渲帧要能确定性 seek——这是「同一份源渲出同一段帧」的前提。
skills/hyperframes-scene-builder/SKILL.md
- Use paused timelines for deterministic seekable animation.
这里在做什么：把可寻址/确定性当硬契约（同族 heygen-com 的 HF 契约也要求 paused GSAP timeline 与 tl.seek(0)）。
组合根与作用域纪律：显式声明 data-composition-id / data-width / data-height，选择器必须限定在组合根内，禁止会污染其他子组合的全局选择器。
skills/hyperframes-scene-builder/SKILL.md
- Avoid global selectors that can mutate other sub-compositions.
这里在做什么：多场景同挂载时的隔离问题——HyperFrames 类「一页多组合」架构最实际的坑。
渲染循环是「低质草稿迭代 → 定稿才提高质量/帧率」：draft 质量 + --workers 2 快速看效果，只有场景已批准或要验证帧率相关动作时才提。
skills/hyperframes-scene-builder/SKILL.md
Use higher FPS or quality only when the scene is approved or when testing frame-rate-specific motion.
这里在做什么：把渲染成本当约束管理（GPU/Chrome 不稳时还要降 worker 数），避免每次微调都全质量重渲。
证明帧必须来自渲染出的 MP4，而不是浏览器截图——截图不经过编码/合成路径，会掩盖真实差异。
skills/hyperframes-scene-builder/SKILL.md
- Generate proof frames from the rendered MP4, not only browser screenshots.
这里在做什么：把「验证必须验产物」写进规则；同族 render-qa 也要求在同一支成片上抽帧。
内建 HyperFrames 特有风险清单：时间线 ID 不匹配、嵌套组合里的未作用域选择器、GSAP 覆盖既有 CSS transform、预览与渲染之间的 CDN/字体加载差异、渲染 worker 里媒体资源解析失败、单文件过大导致 agent 无法检视。
skills/hyperframes-scene-builder/SKILL.md
- CDN or font loading differences between preview and render.
这里在做什么：把「预览通过 ≠ 渲染通过」的六类已知成因列出，供排查时逐个排除。
carryover 纪律：某个转场若忘了新标签或新画面，下一场景复制的那一帧也要一起改。
skills/hyperframes-scene-builder/SKILL.md
- If a scene transition forgets a new label or visual, patch the next scene's carryover frame too.
这里在做什么：把 scene-continuity-and-transitions 的 carryover 审计在「构建」侧复述一遍，形成双保险。
2核心能力
01HyperFrames 渲染三连命令：preview / lint / render（含 --composition / --output / --fps / --quality draft / --workers）
02组合与 GSAP 作者规则：显式组合根、时间线注册到相同 composition ID、set 初始化、已有 CSS transform 时用 fromTo、避免纯透明度与反弹、末帧要稳到能抽证明帧
03可视 QA：抽首帧/关键节拍/末帧 PNG；参考图场景要比对末帧而不只开头；检查文字在视频分辨率上的适配；检查后续场景里被复制的隐藏帧是否同步更新；检查 CSS/SVG/inline 里的主题色
04常见修复手册：转场漏标签/漏画面要补下一场景 carryover；时间线对象过早出现要查初始 opacity/路径进度/节点可见性；路径点随线进度揭示；文字被环或卡片裁切要缩整个系统缩放而非只缩标签；产品 UI 被裁改无裁切或动态裁切
05可复用组件模式清单：GlassPanel、LogoRow、CaptionSafeArea、ChartFrame、PathCurve、PointReveal、CameraSwipe、FinalFrameCarryover、CTAStack——不必是正式 JS 类，CSS 类/HTML 片段/helper 函数均可
06文件组织正/反例：一场景一 HTML、小颗粒子组合、token 靠近文件顶部、重复视觉用组件、资产路径易替换；反对单文件巨物、无注释的魔法数字、重复颜色、无注释的隐藏末帧、影响全局的 CSS
07证明帧抽取清单：首帧、首次大揭示、主动画中点、用户点名时间戳、末帧、下一场景 carryover 起始（如相关）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames CLI（npx hyperframes preview / lint / render），Node/npm 生态工具；首次 npx 会从 npm registry 解析该包 |
| package | HyperFrames 渲染器（本地合成与编码，含无头 Chrome/worker 渲染环境） |
| package | GSAP（时间线动画库；由组合页面引入，规则围绕暂停时间线与 set/fromTo 语义） |
| network | 产物期引用面：组合页面若引用 CDN 脚本或网络字体，preview 与 render worker 会各自拉取，行为可能不一致（按范式属产物期引用，不判级，仅记录） |
| cli | ffmpeg（间接：抽帧与证明帧由同族 render-qa skill 的 scripts/extract_proof_frames.py 承担） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: （由宿主 agent 执行）npx hyperframes preview / lint / render —— SKILL.md 的 Render
- 网络端点: 声明外部网络访问: registry.npmjs.org（推断）：npx 在本地未安装 hyperframes 时会从 npm registry 解析或下载该包——属工具
- 本地工作目录: 文件读写与工件输出: compositions/*.html（场景源，一场景一文件）与共享 token/组件
审计说明： 。skill 目录只有 SKILL.md（纯指令，无脚本、无端点、无凭证）；接触面是本地 CLI（npx hyperframes preview/lint/render，本地无头浏览器渲染）与本地写盘（compositions/、renders/、snapshots/），符合蓝档「仅调用本地工具/CLI，或仅本地读写」。**没有把素材送外部服务**：全量扫描本 skill 目录内无 http(s):// 端点、无 fetch/requests、无 token/env 读取。唯一涉及网络的两处均不属素材外发：① npx 解析 CLI 包（工具链安装，且属 npx 行为而非文档指令）；② 产物页引用 CDN/字体由浏览器端拉取（范式规定产物期引用不判级，故只记 reason）。九件同族 skill 判级口径一致：目录内只有 SKILL.md，行为面是本地读写与本地 CLI，无端点、无凭证、无素材外发。
5第二遍独立确认
- [ok] 「无端点无凭证」是否成立 — 目录内正则扫描只命中 npx hyperframes 三条命令；无 http(s):// URL、无 token/env/cookie。父仓库 .gitignore 也把 .env 排除，属仓库层卫生，非本 skill 声明。
- [unlocatable] 渲染命令是否与 HyperFrames CLI 的真实用法相符 — 本仓未 vendored HyperFrames（README 明写 This repo does not vendor HyperFrames），pin 内无法核验 --composition/--output/--quality draft/--workers 这些参数是否与上游 CLI 一致；本次侦查为只读且不得运行渲染，故不验证，登记为待补。
- [ok] 「证明帧从渲染 MP4 抽取」在仓库层是否有落地工具 — scripts/extract_proof_frames.py 用 ffmpeg -ss <time> -i <video> -frames:v 1 -q:v 2 抽单帧，并可用 xstack 拼接触表；与本 skill 的要求（从渲染产物而非浏览器截图抽帧）一致。
- [discrepancy] 是否声明了 HyperFrames 的安装前提 — SKILL.md 直接给 npx hyperframes 命令，但未写 HyperFrames 的版本、安装方式或项目初始化要求（同族 end-to-end-video-playbook 也只把它当引擎名字）。用户需自行确保 CLI 可用，否则三条命令全部失败。
- [ok] 「预览与渲染的 CDN/字体差异」是否属可判级的外发 — 该条描述的是产物页在浏览器端拉取 CDN/字体（产物期引用），按风险范式不判级；本 skill 也把它写成需要注意的渲染风险而非流程中的联网步骤，故只记入 reason 与 risks，不升档。
- [ok] 组件清单是否真是约定而非强制的类 — SKILL.md 原文 These do not need to be formal JS classes. They can be CSS classes, HTML snippets, or helper functions as long as future agents can find and reuse them.——属约定而非 API，不存在「清单里的类未实现」这种缺口。
6结论
适合： 适合：已经选定 HyperFrames 作为渲染引擎、要新建或修改 HTML/CSS/JS 场景的场合——搭组合骨架、写 GSAP 时间线、定渲染命令、做可视 QA 与抽证明帧、排查「预览对但渲染错」这类 HyperFrames 特有问题，以及多场景同挂载时的选择器隔离。
不适合： 不适合：① 还没决定渲染引擎或需要通用网页动画（应先用同族 intake 与设计层，或另找通用前端 skill）；② 需要视觉设计系统与审美判据（走 motion-design-systems）；③ 需要装配、字幕、混音、验收流程（走 audio-sync-assembly / captions-and-music-bed / render-qa-and-surgical-changes）；④ 环境里无法安装 HyperFrames CLI 的情况——本 skill 的核心能力（渲染与抽帧验证）全部依赖它。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload hyperframes-scene-builder.tar.gz
sha256:
Option B · Copy Guide for Agentb8691be00b4eea0e…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit f6b043d9fd.