Communitygithub.com

octaviosilva2/claude-video-motion

生成确定性视频,使用HyperFrames在Chrome/FFmpeg中捕获HTML/CSS合成,并声明格式、帧率、时长和分辨率,需用户授权渲染。当交付物必须是渲染后的媒体文件(MP4、WebM、MOV、PNG)时使用。

claude-video-motion 是什么?

该技能专用于生成确定性视频输出,基于HyperFrames引擎,将HTML/CSS动画合成捕获为媒体文件(MP4、WebM等)。核心原则是交付物必须是渲染后的媒体文件,而非用于网站或交互式UI的动画资产。技能强制要求用户在开始合成前明确声明格式、分辨率、帧率和时长(无默认值),并且每次渲染都需用户显式授权。依赖Node、Chrome和FFmpeg基础设施,所有依赖安装和资源使用(如音乐、音效、旁白)都必须逐项获得用户确认。技能强调可复现性,只有锁定所有组件(HyperFrames版本、Chrome、FFmpeg、字体、资源、编解码器等)才能保证字节级一致的输出。适用于Claude Code等AI Agent平台,需要用户具备运行Node和Chrome的环境。

兼容平台✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/octaviosilva2/claude-video-motion/tree/HEAD/skill/frontend-video

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

入口门禁——在任何合成之前

触发条件:交付物是一个渲染后的媒体文件。 MP4、WebM、MOV、PNG。 关注的是交付格式,而非外观。

不激活此技能:

  • 用于网站内的视频——英雄区、背景、用户证言。属于普通网页资产。
  • “看起来像视频”但可交互的动画UI部分——仍然属于前端网页。

区别在于交付格式。如果结果在浏览器中打开并能响应点击,则不属于此技能。

格式、分辨率、帧率和时长没有默认值

四个参数都没有。选择 "1080p 30fps 因为很常见" 恰好是门禁机制要防止的情况。在合成开始前,这四个参数必须由用户确认(使用 AskUserQuestion),同时给出针对目标平台(例如竖屏 1080×1920 用于 Reels/TikTok/Shorts)的建议。

操作成本——在承诺之前先确认

HyperFrames 不是一个 import 库:它是一个生产流程。依赖于已安装的 Node、Chrome 和 FFmpeg,并且捕获过程对资源消耗很大。

在承诺使用此路线之前,先确认基础设施是否存在。在编写完整个合成代码后才发现缺少 FFmpeg,那就太晚了。

安装任何依赖(Node、FFmpeg、Chrome、hyperframes 包)都由用户决定。 说明缺少什么及相应的命令,并等待用户确认。

渲染永远不会自动进行

未经用户明确授权,不得执行任何渲染操作。 渲染会消耗机器时间,并且在涉及媒体生成时,还会消耗实际金钱。

当缺少某个资源而其他替代方案是生成它时:说明缺少什么以及你会生成什么——然后停在那里。

如何使用

frontend-video/
├── SKILL.md                ← 本文件。唯一始终读取的文件
└── referencias/
    ├── hyperframes.md      门禁,格式/帧率/时长,确定性时间,
    │                       适配器,字幕,渲染授权
    ├── direcao-visual.md   带有书面理由的令牌,反通用,分解的参考
    ├── assets.md           来源,许可证,优化——这里资源就是交付物
    └── validacao.md        适用于媒体的门禁
你的任务打开文件
决定格式、分辨率、帧率、时长hyperframes.md §3
内容、字体、字幕、版权hyperframes.md §4
确定性时间、可复现输出、场景适配器hyperframes.md §5
作品的可访问性和性能hyperframes.md §6
授权渲染hyperframes.md §7
合成的审美方向direcao-visual.md
图像、字体、音乐、特效、旁白的许可证assets.md
完成交付validacao.md

始终忽略: SEO、可索引的DOM、导航旅程和应用状态——确定性媒体没有这些概念。作为最终交付物的Web运行时也不适用:这里浏览器只是捕获工具,而非目的地。

音乐、音效和旁白

  • 音乐和音效: 只有在用户确认后才能下载,逐个文件。许可证必须允许预期的使用场景(如果是商业用途)。记录每个音轨的来源、作者和许可证。详细信息见 assets.md。
  • 旁白: 本技能不生成语音。请撰写旁白文本,分成短段落,并请用户在他自己的语音服务(例如 ElevenLabs)中生成并发送文件。生成语音需要花钱:说明段落内容后停在那里。

可复现性——“确定性”真正要求什么

引擎使得合成过程可按时间搜索。但这本身并不能保证输出完全相同。

承诺可逐字节复现的文件需要锁定所有以下内容:HyperFrames、Chrome、FFmpeg、字体、资源、编解码器和标志、分辨率、帧率、时长和环境。没有这种锁定的提交不能做出这样的承诺。

已审计的来源:仓库 heygen-com/hyperframes,提交 af1cb1c10da33bade100db8233435c7591b7c0bc,该提交中的主要包版本为 0.8.17,根目录和CLI中均为 Apache-2.0 许可证。已于 2026-08-28 验证。该仓库中的 exemplo-p01/ 使用版本 0.8.166 渲染,版本锁定在 package.json 中。在你的项目中锁定版本,如果合成依赖于能力记录中未覆盖的功能,则重新审计。

始终有效的原则

  1. 真实内容,绝不捏造——不能使用看起来像最终的占位符。
  2. 字幕和对比度是交付物的一部分,不是额外的附加项。
  3. 对实际输出进行验证,而不是预览。预览显示的内容与最终文件包含的内容可能存在差异——编解码器、颜色和时间轴。
  4. 场景的自有代码仍负责自身的清理工作。 合成中的 Three/WebGL 场景都需要像在其他地方一样进行拆除。

相关技能