Questions? hello@viberation.devGet supportBlogDocsChangelog

Colour mode

XGitHub
Get started

Product Launch Video

Skills#design#official

Turn a product page or script into a launch video.

From HeyGen's HyperFrames. Give your agent a product URL, script or brief and it produces a launch or promo video: feature reveals, product demos and app promos. Needs the HyperFrames CLI.

Install this skill

npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video

Runs the open-source skills CLI in your own terminal. It asks which agents to add the skill to. Read what it tells your agent to do before you install it.

Download skill (.zip)

Install for your agent

  • Claude Code

    Run this in your project

    npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video -a claude-code

    Add -g to install it for every project instead.

    Or ask Claude Code to do it

    Install the "product-launch-video" skill from https://github.com/heygen-com/hyperframes for Claude Code.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .claude/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .claude/skills/ for this project, or ~/.claude/skills/ for all your projects.

    Picked up in the current session, no restart needed.

    Claude Code skills docs
  • Claude.aiNot supported

    This skill is marked as not working in Claude.ai, usually because it needs a terminal or files that Claude.ai does not have.

    Claude.ai skills docs
  • ChatGPTNot supported

    This skill is marked as not working in ChatGPT, usually because it needs a terminal or files that ChatGPT does not have.

    ChatGPT skills docs
  • Codex

    Run this in your project

    npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video -a codex

    Add -g to install it for every project instead.

    Or ask Codex to do it

    Install the "product-launch-video" skill from https://github.com/heygen-com/hyperframes for Codex.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.agents/skills/ for all your projects.

    Restart Codex if the skill does not show up.

    Codex skills docs
  • Cursor

    Run this in your project

    npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video -a cursor

    Add -g to install it for every project instead.

    Or ask Cursor to do it

    Install the "product-launch-video" skill from https://github.com/heygen-com/hyperframes for Cursor.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .cursor/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .cursor/skills/ for this project, or ~/.cursor/skills/ for all your projects.

    Run it by typing / and the skill name in chat.

    Cursor skills docs
  • GitHub Copilot

    Run this in your project

    npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video -a github-copilot

    Add -g to install it for every project instead.

    Or ask GitHub Copilot to do it

    Install the "product-launch-video" skill from https://github.com/heygen-com/hyperframes for GitHub Copilot.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .github/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .github/skills/ for this project, or ~/.copilot/skills/ for all your projects.

    Works in Copilot CLI, the cloud agent and agent mode in VS Code and JetBrains.

    GitHub Copilot skills docs
  • Antigravity

    Run this in your project

    npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video -a antigravity

    Add -g to install it for every project instead.

    Or ask Antigravity to do it

    Install the "product-launch-video" skill from https://github.com/heygen-com/hyperframes for Antigravity.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .agents/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .agents/skills/ for this project, or ~/.gemini/config/skills/ for all your projects.

    Antigravity skills docs
  • Gemini CLI

    Run this in your project

    npx skills add https://github.com/heygen-com/hyperframes --skill product-launch-video -a gemini-cli

    Add -g to install it for every project instead.

    Or ask Gemini CLI to do it

    Install the "product-launch-video" skill from https://github.com/heygen-com/hyperframes for Gemini CLI.
Copy the skill folder (the one containing SKILL.md, with any scripts or reference files next to it) into .gemini/skills/ in this project.
Before copying, show me the SKILL.md and list any scripts it includes, and wait for me to confirm.

    Or copy the folder yourself

    Unzip the download into .gemini/skills/ for this project, or ~/.gemini/skills/ for all your projects.

    Run /skills to check it was found.

    Gemini CLI skills docs
Installs
245K via skills.sh
GitHub
50.1K stars ↗
Last updated
15 Sept 2026
Licence
Apache-2.0

Security checks

Run by independent scanners and published on skills.sh. Their results, not a Viberation review.

  • Gen Agent Trust Hub Pass

    The skill is a comprehensive tool for creating product launch videos using the HyperFrames framework. It automates capturing website assets, generating narration via HeyGen, and assembling an HTML-based video composition. It follows security best practices such as using argument arrays for command execution and whitelisting HTML attributes.

    14 Sept 2026

  • Socket Pass

    No alerts

    14 Sept 2026

  • Snyk Warning

    Risk: MEDIUM · 1 issue

    14 Sept 2026
What's inside (30 files)
  • references/cut-catalog.md13.1K chars
  • references/motion-language.md15.4K chars
  • references/story-design.md32.3K chars
  • references/visual-design.md16.3K chars
  • scripts/assemble-index.mjs32.3K chars
  • scripts/assemble-index.test.mjs5.2K chars
  • scripts/audio.mjs12.6K chars
  • scripts/audio.test.mjs9.6K chars
  • scripts/build-frame.mjs25.2K chars
  • scripts/captions.mjs24.7K chars
  • scripts/captions.test.mjs9.3K chars
  • scripts/capture-skill-guardrails.test.mjs1.7K chars
  • scripts/frame-packets.mjs1.1K chars
  • scripts/frame-packets.test.mjs6.9K chars
  • scripts/lib/assets.mjs2.2K chars
  • scripts/lib/dimensions.mjs2.3K chars
  • scripts/lib/pad-frame-duration.mjs1.6K chars
  • scripts/lib/pad-frame-duration.test.mjs3K chars
  • scripts/lib/storyboard.mjs8K chars
  • scripts/lib/tokens.mjs10.1K chars
  • scripts/lib/tokens.test.mjs2.3K chars
  • scripts/lib/transition-registry.mjs1.6K chars
  • scripts/lib/transitions.json3.9K chars
  • scripts/media-contract.test.mjs10.7K chars
  • scripts/stage-assets.mjs1.7K chars
  • scripts/stage-assets.test.mjs2.2K chars
  • scripts/transitions.mjs15.8K chars
  • scripts/transitions.test.mjs2.9K chars
  • SKILL.md32.6K chars
  • sub-agents/frame-worker.md3.5K chars

SKILL.md, first part. Shown as plain text.

---
name: product-launch-video
description: "Turn a product or marketing URL, pasted script, or brief into a product launch / promo video — SaaS promos, feature reveals, product demos, app and company launches. Use when the user wants to market, launch, promote, or reveal a product; the default for any commercial URL. Site tours / showcases of a website route here too — the brief carries the show-it-as-is intent. Unclear → /hyperframes."
---

> **First, keep this skill fresh — confirm with the user before running:** `npx hyperframes skills update product-launch-video`. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them.

> **media-use**: Before sourcing audio/images/logos, call `/media-use` to resolve BGM/SFX/images from the HeyGen catalog and brand logos from their official sources. Run `--adopt` first to register existing assets. See `/media-use` skill.

> **figma source**: If the source is a figma.com URL, run `/figma` first — asset export, brand tokens, and components/storyboard reconstruction if needed — then build this workflow from its output. Don't drive Figma via raw MCP tools directly: that skips SVG sanitization, `.media/manifest.jsonl` provenance, and brand-token `var()` binding, so a later brand change can't propagate without a full re-import.

# Product Launch to HyperFrames

Use this skill to capture a product, understand its brand, plan a launch video, and build it frame by frame in HyperFrames.

> **The front door is `/hyperframes`.** You are the orchestrator. Run each step, verify its gate, and only then continue to the next step. This skill is for a **product being marketed, launched, promoted, or revealed**, including requests such as "promo for our site" when the purpose is promotional. A site tour / showcase ask stays here too: `BRIEF.md` carries the show-it-as-is intent, and the captured screens become the assets the video features. Any other intent, a bare "make a video", or any uncertainty → read `/hyperframes` first — the intent layer owns every route decision, and a fresh creation arriving here without `BRIEF.md` goes through it anyway (Setup's opening rule).

You are the orchestrator. Work in `videos/<project>/`. Run steps in order and pass each gate before continuing. User-gated steps are Step 0, Step 3, and Step 6. Read `../hyperframes/references/brief-contract.md` before Step 0 — it defines the gate types and how `BRIEF.md`'s `flow`/`storyboard` derive the mode that governs the Step 3/4/6 gates. Do every step yourself except Step 5, where you dispatch one sub-agent per frame. Do not put design or motion rules here; those live in the frame-worker sub-agent, this skill's local `../hyperframes-animation/rules/` + `../hyperframes-animation/blueprints/`, and `hyperframes-creative`.

Workflow: Step 0 setup -> `hyperframes.json`; Step 1 capture -> `capture/`; Step 2 design system -> `frame.md`; Step 3 storyboard/script -> `STORYBOARD.md` and `SCRIPT.md`; Step 3.1 audio -> `audio_meta.json`; Step 4 visual design -> enriched `STORYBOARD.md`; Step 5 frames -> `compositions/frames/NN-*.html` and `index.html`; Step 6 final render -> `renders/video.mp4`.

---

## Step 0: Setup

Goal: Enter with a confirmed brief, create the HyperFrames project, and make the brief durable.

**The brief is confirmed by the intent layer, not by questions asked here.** Opening rule, in order: **(1)** `BRIEF.md` exists → read it and ask nothing — the brief is settled, and its `flow`/`storyboard` derive the mode (brief contract § 1). **(2)** No `BRIEF.md` but the project exists (`hyperframes.json` / `STORYBOARD.md` on disk) → resume from the storyboard's frontmatter and the recorded preferences; never re-interrogate a half-built project. **(3)** Neither — a fresh creation request that arrived here directly → read `/hyperframes` and run its intent layer (`references/intent-interview.md`): it checks recipes and remembered defaults, conducts this

Key info

Pricing
Open source
Category
Skills
Skill category
Marketing & content
Works in
Coding agents such as Claude Code, Codex and Cursor; not Claude.ai or ChatGPT
Best for
Beginner
Made by
HeyGen's HyperFrames project (official)
Use it when
You want a launch video made from your product page or a script

More in Skills