/coco-ads

name: coco-ads
description: Turn the project you just shipped into a short, polished, shareable launch video (an "ad") using HyperFrames. Use when someone says "/coco-ads", "make a launch video", "brag about this", "turn this into a promo", "make an ad for this", or wants to share what they built. Reads the project code directly — no live URL or screenshots needed. Renders locally.
argument-hint: "[--tone <preset|freeform>] [--format landscape|vertical|square] [--duration <s>] [--no-music] [--title <name>]"
user-invocable: true
domain: design

/coco-ads — launch videos from your repo

You built it. Now let CoCo make the ad.

`/coco-ads` turns the current project into a short (15–25s), polished, shareable launch video using the HyperFrames toolchain, rendered **locally**. It is narrow, opinionated, and fast.

> **Credit / lineage.** This skill adapts the launch-video flow from [**brag** by Shunit Haviv](https://github.com/latent-spaces/brag) and runs on the [**HyperFrames**](https://www.npmjs.com/package/hyperframes) HTML-composition + render engine by HeyGen. Bundled music is "Happy Beats / Business Moves" by ende.app; bundled SFX are CC0 (Kenney.nl). See [`CREDITS.md`](../../CREDITS.md). Re-implemented in CoCo's voice with attribution. Upstream `brag` is MIT-licensed (Copyright (c) 2026 Shunit Haviv Hakimi); its notice is retained at [`LICENSE`](LICENSE) in this skill directory.

Requirements

The render path is fully local (HeyGen cloud/Lambda paths are never used). It needs:

• **Node 22+** and **FFmpeg** on `PATH`.
• The **HyperFrames** CLI, run via `npx hyperframes …` (auto-fetched on first use). The composition skills install once with `npx hyperframes skills`.
• A quick environment check: `npx hyperframes doctor` (Chrome headless-shell + FFmpeg). "Docker not running" is fine — Docker is only for distributed cloud renders, which this skill does not use.

No data leaves the machine on the default render path. If `GEMINI_API_KEY` is set, the optional snapshot frame-analysis would call Gemini — keep it off (`--describe false`) when bragging about anything you would not paste in public.

What this skill does

1. Reads the current project code to understand the app. 2. Plans a short concept specific to this project. 3. Scripts and storyboards the video. 4. Hands a focused composition brief to HyperFrames. 5. Validates, renders locally, and writes share copy.

Parsing the invocation

/coco-ads
/coco-ads --tone chaotic
/coco-ads --tone polished --format vertical
/coco-ads this. Make it feel like a ridiculous startup launch.

| Option | Values | Default | |---|---|---| | `--tone` | preset or freeform description | inferred | | `--format` | `landscape`, `vertical`, `square` | `landscape` | | `--duration` | seconds | auto (15-25s) | | `--no-music` | flag | music on | | `--no-sfx` | flag | sfx on | | `--title` | string | inferred from project |

Tone can be a preset (`default`, `polished`, `yc-parody`, `chaotic`, `deadpan`, `cinematic`, `app-store`) or a creative direction such as "fake Series A launch from 2016". When the user gives freeform direction, map it to the nearest preset for pacing and structure, but preserve the user's direction in the plan and composition brief.

---

Output directory

By default, output goes to `coco-ads-output/`. To avoid overwriting previous runs, use a timestamped directory (`coco-ads-output-YYYY-MM-DD-HHmmss/`) when the user asks for a new run or one already exists. Generate the timestamp once at the start of the run and use it consistently for the plan, brief, composition, render, and share copy. Keep `coco-ads-output/` out of version control.

---

Step 1: Inspect the project

**Read:** [references/step-1-inspect.md](references/step-1-inspect.md)

Scan the project directory and extract what you need to plan the video.

**Gate:** You can answer all 9 questions in the planning rubric.

---

Step 2: Plan and storyboard

**Read:** [references/step-2-plan.md](references/step-2-plan.md)

Write `<output-dir>/coco-ads-plan.md`. Answer the planning rubric, commit to a creative angle, and write the beat-by-beat storyboard (scenes, text, timing, transitions, SFX cues). Include a compact `Music cue guidance` section when music is selected.

**Gate:** `<output-dir>/coco-ads-plan.md` exists with a full storyboard; scene durations sum to 15–25 seconds.

---

Step 3: Hand off to HyperFrames

**Read:** the installed HyperFrames composition skills (`npx hyperframes skills` if absent), then [references/step-3-compose.md](references/step-3-compose.md) and [references/audio.md](references/audio.md).

Write `<output-dir>/composition-brief.md`, then build the composition in `<output-dir>/composition/`. `/coco-ads` owns product angle, source material, storyboard, tone, format, audio selection, and delivery; HyperFrames owns the concrete composition structure, animation mechanics, and render workflow.

**Gate:** `npx hyperframes lint` passes with zero errors inside `<output-dir>/composition/`.

---

Step 4: Validate, render, and deliver

**Read:** [references/step-4-deliver.md](references/step-4-deliver.md)

Validate (`npx hyperframes validate` + `inspect`), render to `<output-dir>/brag.mp4`, and write `<output-dir>/share-copy.txt`.

**Gate:** the rendered MP4 exists and share copy is written.

---

Tone system

Seven presets ship with `/coco-ads`. Each changes scripting energy, pacing, typography personality, and transition style. Presets are defaults, not limits — always allow a freeform creative direction to refine or override.

Full definitions: [references/tones.md](references/tones.md)

| Tone | Energy | One-liner | |---|---|---| | `default` | Playful, clean, postable | The good-vibes default | | `polished` | Serious, elegant | For projects that are not jokes | | `yc-parody` | Deadpan startup energy | Fake seriousness applied to absurd projects | | `chaotic` | Fast, loud, aggressive | Over-the-top and unhinged | | `deadpan` | Calm