cmo-remotion

Files (5)

• SKILL.md
• CRTComposition.tsx · templates/
• README.md · templates/
• Root.tsx · templates/
• index.ts · templates/

SKILL.md (first lines)

# /cmo-remotion — Brand-Grounded Remotion Video Pipeline

The mktg-native end-to-end pipeline for **building a new Remotion video from a brief**. Brief in, MP4 out. Brand memory grounds it; `remotion-best-practices` powers the compose stage.

## North Star

The user wants a Remotion video that is *theirs* — voiced like their brand, aimed at their audience, hitting their positioning. They do not want a generic motion-graphics template, and they do not want to recreate someone else's video literally.

This skill is the Remotion equivalent of `/cmo-video`, with one key difference: `/cmo-video` is a *style transfer pipeline* — point it at a reference URL and it deconstructs the reference, generates fresh assets in that idiom, and ships a recreation. `/cmo-remotion` is a *brief-to-render pipeline* — start from a goal ("explain our product in 30s", "demo the CRT shader", "ad for our launch"), ground it in `brand/`, and ship.

You collaborate with the user across six stages, the same way `/cmo` collaborates across the marketing skill stack: suggest, ask one question at a time, push back when the brief is too big, and never silently advance. Show the beat sheet, get a yes, then scaffold. Show the asset list, get a yes, then generate. Show a single frame at composition midpoint, get a yes, then bake the full render.

## When to use (vs other video skills)

| User says | Route to | Why |
|---|---|---|
| "make a video like this <URL>" | personal `/cmo-video` | That pipeline is style-transfer from a reference. Stop after stage 2 if they only want the deconstruction. |
| "I have these PNG slides, make a video" | `/video-content` | Three-tier ffmpeg/Remotion pipeline that takes existing slides → video. No scaffold, no compose-from-scratch. |
| "make me a TikTok slideshow" | `/tiktok-slideshow` | Format-specific orchestrator that chains `/slideshow-script → /paper-marketing → /video-content`. |
| "build me a Remotion video about X" | **this skill** | New composition from a brief. Code-driven, frame-driven, brand-grounded. |
| "make a CRT shader / glitch / scanline video" | **this skill** | Stage 5 loads `remotion-best-practices/rules/html-in-canvas.md` and points you at the CRT template. |
| "edit my finished video" | Not this skill | Remotion is a video *generator*, not an editor. Use a real NLE for cuts on existing footage. |
| "transcribe / summarize this video" | `mktg transcribe` then `/summarize` | Different intent. |

## Workflow — the six stages

```
1. BRIEF       capture goal + audience + runtime + aspect + one-line takeaway
2. SCRIPT      beat sheet (scene · duration · voiceover · onscreen · visual · motion)
3. SCAFFOLD    npx create-video@latest --yes --blank --no-tailwind <slug>
4. ASSETS      generate PNGs via /codex:image or /image-gen → rembg → public/
5. COMPOSE     load remotion-best-practices, pick rule files by intent, build frame-driven
6. BAKE        single-frame midpoint check → npx remotion render → MP4
```

Each stage produces a checkpoint artifact under `marketing/video/<slug>/<n>-<stage>/`. The pipeline is **resumable** — read `pipeline.json`, pick a stage, continue. Never re-run a completed stage unless the user explicitly asks for "redo stage X".

### Stage 1 — BRIEF

Capture in one short conversation:

- **Goal.** "What's this video supposed to do?" (Drive signups, explain product, demo a feature, build authority, hype a launch.)
- **Audience.** "Who's watching?" If `brand/audience.md` is populated, propose the most relevant persona; ask if it's right.
- **Runtime.** Default to 8–15s for social, 30–90s for product film, ≤10s for shaders/loops. Push back on anything over 60s without a real reason.
- **Aspect ratio.** 1080×1920 vertical (TikTok/Reels), 1920×1080 horizontal (YouTube/landing page), 1080×1080 square. Default by goal.
- **One-sentence takeaway.** "If they only remember one thing, what is it?" If they can't say it in a sentence, the script is going to fail — slow down here.

If `brand/voice-profile.md`, `brand/positioning.md`, or `brand/creative-kit.md` are present, ground every brief decision in them. Quote the relevant line back: "Your voice profile says you avoid hype words — so the takeaway shouldn't lead with 'revolutionary'. How about 'the part of {X} no one shows you'?"

### Stage 2 — SCRIPT

A beat sheet is a table — one row per scene — with these columns:

| Scene | Duration | Voiceover (if any) | Onscreen text | Visual | Motion |
|-------|----------|---------------------|---------------|--------|--------|

The script is the **load-bearing stage**. A bad script makes a beautiful render boring. Co-write it: propose 2–3 beats, get a reaction, revise. Don't dump 8 beats in one shot.

Before approving, run the one-line gut check: *"If I read just the voiceover column out loud, does it tell the story?"* If not, rewrite.

### Stage 3 — SCAFFOLD

```bash
npx create-video@latest --yes --blank --no-tailwind <project-slug>
cd <project-slug>
npm install
```

Use `--blank` so we don't inherit the demo composition. Use `--no-tailwind` so the project stays minimal — Remotion has no inherent need for Tailwind, and the styles we author live alongside the components.

Project lives at `marketing/video/<slug>/project/`. Add `out/`, `node_modules/`, and any large generated assets to `.gitignore` if not already there.

### Stage 4 — ASSETS

If the video is **code-driven** (CRT shader, type-only, geometric) — skip this stage. The composition needs no PNGs.

Otherwise:
- Use `/codex:image` (preferred for craft-grade prompting) or `/image-gen` (Gemini Nano Banana 2 — model `gemini-3.1-flash-image-preview`, never older).
- Cap the asset count: ≤ 12 generated images for a single-scene 8s video, ≤ 8 per scene for multi-scene work. More than that and you're bloating cost and inviting style drift.
- Cut every transparent-background asset through `rembg`. Image models lie about transparency.
- Drop final assets into `<project>/public/`.

### Stage 5 — COMPOSE

**This stage is a prerequisite gate, not a reference.** Before you write the composition, load:

1. `marketing-cli/skills/remotion-best-practices/SKILL.md` — top-level entry to the rules.
2. The **specific** rule files that match your intent (pick what applies, don't load everything):

| Intent | Rule file |
|---|---|
| Code-driven shader / CRT / glitch | `rules/html-in-canvas.md` |
| Typewriter / animated text | `rules/text-animations.md` + `rules/assets/text-animations-typewriter.tsx` |
| Scene-to-scene cuts and crossfades | `rules/transitions.md` |
| Voiceover narration | `rules/voiceover.md` + `rules/audio.md` |
| Captions / subtitles | `rules/subtitles.md` + `rules/import-srt-captions.md` |
| Light leaks / film texture | `rules/light-leaks.md` |
| 3D / Three.js | `rules/3d.md` |
| Lottie | `rules/lottie.md` |
| Map embeds | `rules/mapbox.md` |
| Local fonts | `rules/local-fonts.md` |
| Google fonts | `rules/google-fonts.md` |

For the **CRT shader** intent specifically, copy the canonical drop-in: see [./templates/CRTComposition.tsx](./templates/CRTComposition.tsx).

Compose against the brand. Pull primary/secondary colors from `brand/creative-kit.md`. Match typography to the visual identity. The Remotion `<Composition>` is just the renderer — the grammar comes from the brand.

### Stage 6 — BAKE

Always render-then-inspect. Never trust the first render.

```bash
# Sanity check at composition midpoint (catches static layout bugs cheap)
npx remotion still <CompositionId> out/check.png --frame=<half-of-durationInFrames>

# Full render
npx remotion render <CompositionId> out/<name>.mp4

# WebGL effects (HtmlInCanvas, three.js, shader compositions) need ANGLE

From MoizIbnYousaf/marketing-cli, MIT.

More from MoizIbnYousaf/marketing-cli