make-a-video
Beginner-friendly end-to-end video creator for HyperFrames. Use when the user says "make a video", "create a video", "new video", "build a video", "video from scratch", "I want to make a video", "help me create a video", or when someone who's never used HyperFrames before arrives with a concept, script, or rough idea and wants a finished MP4. Interviews the user in one pass, then builds the full video with mandatory preview and visual-verification gates.
1How It Works & Mechanism
The entire process is a "two-phase, eight-gate" state machine: Phase 1 conducts a complete interview in one pass (Gates 1–4), and Phase 2 builds sequentially gate by gate (Gates 5–8), where each gate must produce concrete deliverables consumed by the next, strictly forbidding gate skipping.
Two phases, eight sequential gates. Every gate produces a concrete artifact the next gate consumes. Don't skip gates.
Initial routing at the entry point: URL input → website-to-hyperframes; 9:16 talking-head with human face → execute up to Gate 4 with this skill, then hand off to short-form-edit; framework rules lookup only → hyperframes.
**Hand off when:** - The user pastes a URL and wants a video from that site → invoke `/website-to-hyperframes` … - The user asks for framework rules, not a video → invoke `/hyperframes`
Hard gates exist in the interview phase: Gate 1 gathers six essential requirements (purpose, audience, duration, aspect ratio, frame rate, platform constraints), and Gate 4 requires generating BRIEF.md and waiting for the user's explicit approval before starting construction.
4. **Show the brief. WAIT for explicit approval.** Don't proceed to Gate 5 without a clear "yes, build it."
The style phase audits first and asks questions second, strictly avoiding imposing a brand on the user: scans the workspace and project assets first, then progressively queries palette, typography, logo, references, pacing, and music; only falls back to MOTION_PHILOSOPHY defaults if the user explicitly declines to provide them.
**Before asking the user anything, inventory existing assets.** Check `<workspace-root>/assets/` and any project `assets/` folder. Don't ask for what's already there.
The construction phase provides a reproducible scaffold: `npx hyperframes init` (or reusing hyperframes.json/meta.json from a sibling project), assets/style-profile.md as the single source of truth, beat-by-beat storyboard specifying concept, visuals, motion language, easing, exit, and audio, along with a recommended 20% / 55% / 25% three-act structure.
- Act 1 (hook) ≈ 20% of duration - Act 2 (body) ≈ 55% - Act 3 (payoff + outro with 4–6 second hold) ≈ 25%
Sub-compositions strictly enforce a three-part template: scoped styles ([data-composition-id]), IIFE-wrapped paused GSAP timelines, and a trailing SLOT anchor padding tween at the end; timelines are registered to window.__timelines.
tl.to({}, { duration: SLOT_DURATION }, 0); // anchor — MOTION_PHILOSOPHY Law 11 … window.__timelines["scene-name"] = tl;
Determinism is a strict constraint: forbid Math.random(), Date.now(), and render-time fetch(); use seeded PRNGs or harmonic sine hashes instead.
No `Math.random()`, no `Date.now()`, no render-time `fetch()`. Use seeded PRNGs or harmonic-sin hashes (MOTION_PHILOSOPHY §3.10).
Two mandatory preview gates plus frame visual inspection: draft rendering starts only after passing lint and Studio (localhost:3002) checks with explicit user consent; the draft must undergo ffmpeg frame extraction and actual visual inspection using the Read tool, followed by local server preview and user sign-off before the final render.
3. **Call the `Read` tool on every PNG.** The Read tool loads the image into context — don't just list filenames. … Do NOT use Python's `http.server` — it doesn't support HTTP Range requests, so scrubbing breaks.
2Core Capabilities
3External Dependencies
| Kind | Dependency / Endpoint |
|---|---|
| cli | HyperFrames CLI（init / lint / preview / render / transcribe / tts / add，仓库依赖 hyperframes 包） |
| cli | ffmpeg（从草稿成片抽帧做目检） |
| cli | npx serve（本地静态服务器，供用户试播签核；文档明确禁用 Python http.server 因无 Range 支持） |
| network | HyperFrames Studio 预览服务器（本地） |
| network | Google Fonts（**产物期**：style-intake 的默认字体对在生成的 composition 里按需引，浏览器/渲染器加载） |
| cli | 宿主问答工具 AskUserQuestion（访谈阶段逐题提问） |
| package | 工作区外部依赖 MOTION_PHILOSOPHY.md（作者自述为『本 skill 唯一假定存在的外部参考』） |
4Recommended Governance & Evidence
- scripts/: Execute local scripts or commands: 0 scripts inside the skill itself (contains SKILL.md + 6 reference files verified via find -type f)
- 网络端点: Declare external network access: Runtime only: local loopback only — Studio preview http://localhost:3002 and playback test server http://localhost:8080; none
- 本地工作目录: File read/write & artifact outputs: Project files under video-projects/<slug>/ (or user-specified directory): BRIEF.md, STORYBOARD.md, index.html, com
5Second-Pass Verification
- [ok] 目录文件清单与脚本面 — find 返回 SKILL.md（12.6KB）+ references/{build-checklist,catalog-intent-map,composition-scaffold,interview-questions,storyboard-template,style-intake}.md；无 scripts/、无 .js/.mjs/.py，无隐藏文件。
- [ok] URL/网络面归类 — 命中的 URL 三类：localhost:3002（Studio）、localhost:8080（试播）、fonts.googleapis.com（默认字体对，产物期）。无第三方 API 端点、无上传路径、无云服务名。
- [ok] 凭证面反例搜索 — 0 处 env/API_KEY/TOKEN/SECRET 命中；全文未要求账号、配额或密钥（与 edit-video 形成对照：那里把服务前置与成本纪律写进主流程）。
- [ok] 门禁与非协商条款回源 — Gate 4 的 'WAIT for explicit approval.'、Gate 7 的 'Silence is not approval.'、Gate 8 的 Read-every-PNG、SLOT 锚、class="clip" 禁令、Math.random/Date.now 禁令、'Never put index.html at the workspace root.' 均在源码定位到，无遗漏改写。
- [ok] references 引用完整性 — SKILL.md References 段列的 6 个文件全部存在于 references/ 目录，且每个文件开头自述所属 Gate（Gate 1-3 / Gate 5 / Gate 6 / Gates 7-8），引用链无死链。
- [ok] CLI 能力是否被误记为云服务 — 文档只写 `npx hyperframes tts --help` 与 `npx hyperframes transcribe ...`，未指定服务商或密钥；故 external_deps 只记 CLI 本体，不虚增 API 条目。
6Verdict & Scenarios
d16534f6ceefd132…