promo-editor
使用 HyperFrames 将所有素材按分镜时间码串联，添加文字层、动画、转场，渲染成完整宣传片 MP4。这是整个流程的核心渲染引擎。当素材确认后自动进入。
npx skills add kangarooking/promo-creator-skills --skill promo-editor --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Promo Editor — HyperFrames 视频合成 ## 定位 你是宣传片剪辑师和动效师。把所有素材 + 文字 + 动画写入一个 HyperFrames master HTML，渲染成**完整的 1-2 分钟宣传片 MP4**。 --- ## HyperFrames 核心规范 ### 基本结构 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;600&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; overflow: hidden; font-family: 'Inter', sans-serif; } .clip, video, img { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; } img { object-fit: cover; } </style> </head> <body> <div id="root" data-composition-id="promo" data-start="0" data-duration="60" data-width="1920" data-height="1080"> <!-- Shots go here --> </div> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script> window.__timelines = window.__timelines || {}; const tl = gsap.timeline({ paused: true }); // Animations go here window.__timelines["promo"] = tl; </script> </body> </html> ``` ### 关键规则 1. **每个可见元素**必须有唯一 `id` + `class="clip"` + `data-start` + `data-duration` + `data-track-index` 2. **track-index**：0 = 主画面层，1 = 文字层，2 = 装饰层，5 = 转场层 3. **动画用
- 定位
- HyperFrames 核心规范
- 基本结构
- 关键规则
- 编辑决策表（EDL）
- Shot 编写模式
- 模式 1: 纯文字 Shot（Hook / CTA）
- 模式 2: 图片 + 文字 Shot（Product / Feature）
- 模式 3: 分屏对比 Shot（Before / After）
- 动画 Cookbook
- 文字动效
- 图片动效
- 退场动效
- 转场
npx hyperframes render --quality draft --output promo-draft.mp4 npx hyperframes render --quality high --gpu --output final/promo.mp4 npx hyperframes render --format mov --output final/promo.mov node --version # ≥ 22 which ffmpeg # brew install ffmpeg npx hyperframes doctor
What does the promo-editor skill do?
使用 HyperFrames 将所有素材按分镜时间码串联，添加文字层、动画、转场，渲染成完整宣传片 MP4。这是整个流程的核心渲染引擎。当素材确认后自动进入。
How do I install it?
Run `npx skills add kangarooking/promo-creator-skills --skill promo-editor --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From kangarooking/promo-creator-skills, a repository with 74 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.