/tiktok-launch-video

name: tiktok-launch-video
description: Produce a 9:16 TikTok-native launch video for a product, feature, or campaign using HyperFrames. Idiomatic TikTok pacing, burned-in captions, hook-in-1s structure. Optionally hand off to TikTok Ads to launch as a Spark/in-feed ad.
version: "1.0.0"
author: Cogny AI
platforms: [tiktok-ads, hyperframes]
user-invocable: true
argument-hint: "<product URL or short brief>"
allowed-tools:
  - WebFetch
  - WebSearch
  - Bash
  - Read
  - Write
  - Edit
  # Cogny MCP context tree — richer product context than public scraping
  - mcp__cogny__get_context_tree_overview
  - mcp__cogny__browse_context_tree
  - mcp__cogny__read_context_node
  - mcp__cogny__search_context
  # Optional handoff to TikTok Ads when the user wants to publish as an ad
  - mcp__cogny__tiktok_ads__*

TikTok Launch Video

Produce a TikTok-native launch video using [HyperFrames](https://hyperframes.heygen.com) — programmatic HTML/CSS video, deterministic, agent-friendly.

This skill is opinionated: it forces the **TikTok grammar** (9:16, hook < 1s, burned-in captions, fast cuts, native text overlays) instead of porting a 16:9 landscape video to vertical.

Usage

`/tiktok-launch-video https://example.com/launch` — pulls context from a launch page `/tiktok-launch-video "we're shipping AI brand guardrails for marketers"` — short brief `/tiktok-launch-video` — interview the user

Prerequisites

Run once on this machine:

node --version            # ≥ 22
ffmpeg -version | head -1 # ≥ 6

If either fails, ask the user to install Node 22+ and FFmpeg before continuing.

Steps

1. Gather product context

Try sources in this order — stop at the first one that gives you enough to write the script. Don't redo work the user has already done.

**1a. Local file** — read `.agents/product-marketing-context.md` or `.claude/product-marketing-context.md` if present.

**1b. Cogny MCP context tree** — if the `cogny` MCP server is connected (check via tools — `mcp__cogny__get_context_tree_overview` or any `mcp__cogny__*` tool), query it:

mcp__cogny__get_context_tree_overview          # see what's documented
mcp__cogny__search_context query="<product>"   # pull customer / pricing / positioning nodes
mcp__cogny__read_context_node node_id="…"      # drill into the most relevant nodes

The context tree usually contains things public scraping can't: real customer names, ICP, pricing tiers, current quarter goals, what's been launched recently, what's on the roadmap. **Check it before falling back to web scraping.**

**1c. Public web** — if a URL was passed and 1a/1b didn't give you enough, `WebFetch` the page and extract product name, value prop, core benefit, target user, one concrete proof point.

**1d. User brief** — if a short brief was passed, use it directly.

After 1a–1d, ask the user only for what's still missing from the **TikTok hook checklist** below.

**TikTok hook checklist** (what you actually need before you can write the script):

1. Who is the target viewer in 5 words? (e.g. "B2B marketers running paid ads") 2. What pattern interrupt opens the video? (POV, reveal, contrarian claim, demo flash, "wait for it") 3. What's the *one* claim or moment that makes someone stop scrolling? 4. What's the proof? (a number, a screenshot, a customer name, a before/after) 5. What's the CTA? (link in bio, comment a keyword, search the product, follow)

Don't proceed without all five. If you're guessing, ask.

1.5 Capture brand identity

Make this look like the user's brand, not a stock template. Ask for one of:

• A **site URL** (we'll extract colors / fonts / voice from the page)
• A **repo path** containing `tailwind.config.*` or `globals.css` with CSS variables
• An existing `brand-kit.json` (`.agents/brand-kit.json` / `.claude/brand-kit.json` / project root)
• Manual input: 3 hex colors (background, text, primary) + a font family + a one-sentence voice description

Produce a `brand-kit.json` with at minimum: `colors.background`, `colors.foreground`, `colors.primary`, `colors.accent`, `type.family`, `voice.register`. Save it to the HyperFrames project root.

For full schema, extraction patterns, and voice → composition mapping see [`references/brand-identity.md`](references/brand-identity.md).

The composition template reads these as CSS variables (`--bg`, `--fg`, `--primary`, `--accent`, `--font-display`) — so once the kit is wired, the same template renders on-brand for any user.

2. Pick the idiomatic format

Don't invent a format. Pick one of these — all are proven on TikTok and map cleanly to HyperFrames:

| Format | When to use | Structure | |--------|-------------|-----------| | **POV** | Relatable role-based pain | "POV: you're a [role]" → pain → punchline reveal of product | | **Build-in-public** | Founder/early launches | "I built X in Y days because Z" → quick demo → result | | **Contrarian take** | Strong opinion, category creation | "Everyone says X. They're wrong because Y" → demo | | **Before / After** | Workflow improvement | "This used to take 4 hours" → cut → "Now it takes 30 seconds" | | **List-tease** | Multi-feature reveal | "3 things [tool] does that no one talks about" → 1, 2, 3 → CTA |

Pick **one**. Confirm with the user before writing.

3. Write the script (TikTok grammar)

Write a beat sheet, not prose. Each beat is one card or moment. Constraints:

• **Total length**: 9–22 seconds. Default to **15s** unless the user explicitly wants longer.
• **Beat 1 (0.0–1.0s)**: Hook. Big text. No logo. No intro. The viewer must not swipe.
• **Beats 2–N**: ~1.0–2.5s each. Every beat earns its time or gets cut.
• **Final beat (last 1.5–2s)**: CTA. Concrete verb. Not "learn more" — "Search [name] on TikTok", "Comment WAITLIST", "Tap the link".
• **Captions**: Every spoken word is burned in as text. Max 6 words per caption card.
• **Voice / register**: First person, conversational, no marketing voice. Read it out loud — if it sounds like a press release,