/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)

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:

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

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):

For the CRT shader intent specifically, copy the canonical drop-in: see ./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.

# 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
npx remotion render --gl=angle <CompositionId> out/<name>.mp4

After the first render, sample frames at 0%, 12.5%, 37.5%, 62.5%, 90% of duration with npx remotion still. Eyeball each. Fix what bugs the user. Re-render.

Required Reading Before Stage 3

You must load these before you scaffold a Remotion project — they c