--- name: Coco Ads slug: coco-ads category: Automation description: Coco Ads turns a shipped project into a short launch video made from the code itself, using HyperFrames and local rendering. Use it when you want a shareable promo, demo ad, or product launch clip. github: "https://github.com/coco-research/coco/tree/main/skills/coco-ads" language: HTML stars: 218 forks: 11 install: "npx degit https://github.com/coco-research/coco/tree/main/skills/coco-ads ~/.claude/skills/coco-ads" installs_to: ~/.claude/skills/coco-ads source_path: skills/coco-ads/SKILL.md collection_size: 25 category_size: 1860 collection_url: "https://dirskills.com/collections/coco-research/coco" added: 2026-09-04T05:25:18.366Z last_synced: 2026-09-04T05:25:18.366Z canonical_url: "https://dirskills.com/skills/coco-ads" --- # Coco Ads Coco Ads turns a shipped project into a short launch video made from the code itself, using HyperFrames and local rendering. Use it when you want a shareable promo, demo ad, or product launch clip. **Install:** ```bash npx degit https://github.com/coco-research/coco/tree/main/skills/coco-ads ~/.claude/skills/coco-ads ``` ## README # /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 `/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:** `/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 `/composition-brief.md`, then build the composition in `/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 `/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 `/brag.mp4`, and write `/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, dry, understated | The joke is that nothing is a joke | | `cinematic` | Dramatic, trailer-scale | Big motion, bigger claims | | `app-store` | Smooth, feature-card clean | Corporate but not boring | --- ## Creative laws These apply to every video regardless of tone. **Short.** 15–25 seconds. Not one second more without a reason. **Readable.** Keep the pace high through motion and cuts, never by flashing text. Every line a viewer must read holds long enough to read it (short label ~0.8s settled; a sentence ~0.3s per word). Fast-in, then hold — never fast-in, then gone. **Specific.** The video must feel like it was made for this exact project, not any project. **Show the thing.** At least one scene must display actual UI, copy, or a key visual from the product. No abstract filler. **No generic SaaS language.** "Streamline your workflow" is banned. Use the project's actual copy and claims. **The hook is everything.** The first 2 seconds decide whether someone keeps watching. Plan the hook before anything else. **Funny earns its place.** Humor should come from the project's absurdity, not from trying to be funny. **Pattern:** ``` Hook (2-3s) → Reveal (2-4s) → 2-3 sharp highlights (5-12s) → Punchline/outro (2-4s) ``` Adapt this. The pattern is a starting shape, not a template.