Create Remotion Video

Prerequisites for creating video

• Need at least one connected workspace where styleguide + video project can live. If none, ask user to connect one.
• Need multiple workspaces if styleguide lives elsewhere or user wants cross-workspace references.

Process

Video work has process. Keep progress in project-root progress.md. ALWAYS FOLLOW EXACTLY THIS PROCESS!

Overview

0. Select styleguide for video

   • Find skills for styleguides for remotion videos.
   • ALWAYS ask user which one to use.
   • If none exists, create new one with this process.
   • Do NOT continue until styleguide choice is known.
   • Keep correct styleguide in mind for whole editing session.
   • Store chosen styleguide in spec.yaml.
   • If user asks for global style changes like typography/colors, FIRST update styleguide, THEN update video.
   • Keep all colors, typography, etc. in shared TS file.
   • Shared TS file MUST include all specs from styleguide DESIGN.md. Global changes should flow from this file.

1. Create project

   • Make clean standalone Remotion project in own folder.
   • IGNORE remotion-best-practices skill. Already included in this skill.
   • Start with minimal simple video.
   • If user gave no structure, ask where project should go.
   • Do NOT use workspace root unless user says so.
   • Install deps with workspace package manager. If fresh, prefer pnpm. npm only fallback. Respect user prefs from chat/skills.
   • Keep code, assets, story, copy in this folder.
   • Start dev server in shell. ALWAYS open it in new browser tab.

2. Create spec.yaml + progress.md in project folder.

3. Spec video

   • Define purpose + content.
   • Define publishing channels. Can be multiple.
   • Define target length.

4. Create video structure with empty/prefilled sequences from storyboards

   • Prefer storyboard templates from styleguide. If none exist, create them. -New storyboard templates MUST be added to styleguide.
   • Update main styleguide SKILL.md too.
   • First create template spec. Then create code.
   • If user changes storyboard, FIRST update template in styleguide, THEN update code.
   • For sequences, use layout definitions from styleguide. If missing, create new layout.
   • ALWAYS define new layouts with this structure.
   • Update main styleguide SKILL.md too.
   • First create layout spec. Then create code.
   • On layout/template change requests, FIRST update styleguide definition, THEN update code.
   • For reusable elements like logos, use elements from styleguide.
   • New reusable elements MUST be defined like this.
   • Show user. Iterate if needed.
   • Storyboard ALWAYS source of truth for structure.

5. Collect assets

   • Tell user what assets are needed.
   • If asset can be built directly, build it.
   • Tell user what they must gather FIRST.
   • Can reuse React components from other monorepo parts.

6. Build video

   • Iterate until video compiles clean.
   • Check website logs for issues. If website closed, reopen and check.
   • After EVERY video change, check logs again. Logs MUST stay clean.

7. Iterate on video

   • Ask user to watch all variants: portrait, landscape, etc.
   • If requested style change conflicts with styleguide, ask: update guide or make one-off?
   • Always update storyboard if scene order, length, or structure changes.
   • After feedback, improve and ask user to rewatch.

8. Channel copy + thumbnails

   • Create platform copy for all relevant channels in project-root publishing.md.
   • Create thumbnails for all relevant channels.

9. Render videos + thumbnails

   • Tell user to start render in Remotion Studio.
   • Tell user which render-setting overrides are needed.
   • Prefer high quality.
   • Standard HQ: CRF=5, JPEG=95 (always store in remotion config).
   • Help tune if user unhappy.

User may not know all details. Make good suggestions when useful, but ALWAYS ask if user likes proposal.

Guide user step by step. Always explain what you will do before doing it.

Special files

progress.md

• Tracks progress + key decisions.
• For each step, mark: not started, in progress, finished.
• Keep compact.
• Note important decisions + blockers.
• Use it to see what remains.

spec.yaml

Defines high-level project intent: content, purpose, length, channels, style, music style, voiceover. Details live in code.

If spec.yaml changes, ALWAYS refactor video code to match.

Examples:

title: Feature launch for new credit card
length: 25-35 seconds
content: real life scenes, text overlay, 3d-style animated card in intro, animated outro
voiceover: no
music: like normal video style
channels: youtube, youtube-shorts, tiktok, linkedin, instagram
transparent-bg: no
style: reuse from skill `my-company-video-style`

title: Mini animation with car
length: 5 seconds
content: 360° rotation around 3d car model
voiceover: no
music: none
channels: none
transparent-bg: yes
style: none

Publishing channels

• Build for channels user wants.
• If many channels share settings, reuse shared setup.
• If channel settings conflict, create multiple composition variants.
• Read channel guidelines for best practices (resolution, format, etc.) - YouTube - YouTube Shorts - Facebook - LinkedIn - X/Twitter - Instagram - TikTok

Optimize for landscape/portrait

• Video may ship in portrait and landscape.
• Create multiple composition variants when needed.
• Keep storyboard in sync.
• Optimize layout for each aspect ratio.

Background music

• If fitting, ask user if bg music is wanted.
• Suggest royalty-free music from internet, or Suno for music generation.

Copywriting

Adhere to following rules when generating text for header, titles, hero slides etc:

• Vary sentence lengths. Mix 3-word punchy sentences with long ones.
• Use industry slang, "dirty" verbs, and specific nouns. AVOID Buzzwords like "Robust", "seamless", "tapestry", "delve", "pivotal" unless styleguide or user asks for them.
• Use natural pivots or just jump to the next point. Minimize use of standard transitions like: "But here's the kicker,..." or "Why does this matter? ..."
• Avoid unnecessary "Summary loops" starting with "Ultimately" or "In essence."
• Do not use antithesis, “not X but Y” constructions, or dramatic contrast framing. Avoid phrases like “This is not just…,” and “Not only… but also…”.

Thumbnails

• Some channels need thumbnails.
• Sometimes need multiple thumbnails for A/B tests.
• Channel decides format.
• Use Remotion static composition for thumbnails.
• Put the thumbnail compositions into the same root project as the source video itself.

Two paths:

1. Reuse scene from video.
   • Overlay/resize scene text if needed.
   • Thumbnail text must stay readable at small size.
2. Make fresh scene.
   • Reuse style + assets.
   • Keep scene clean.

Completion

Video work is done when videos, thumbnails, and platform copy all exist and are worked out.

• ALWAYS check what work remains when finishing part of process.
• ALWAYS keep progress.md updated.
• ALWAYS keep spec.yaml in sync.
• ALWAYS update styleguide if global style changes happen, or new layouts/storyboards get created.

Remotion guide

New project setup

In empty folder/workspace with no Remotion project, scaffold one:

npx create-video@latest --yes --blank --no-tailwind my-video

Replace my-video with good name. Creates new folder with full project.

Start Studio to preview video: npx remotion studio

Add packages

npx remotion add ...
bunx remotion add ...
yarn remotion add ...
pnpm exec remotion add ...

Set render defaults

// remotion.config.ts
import { Config } from "@remotion/cli/config";
Config.setVideoImageFormat("png");
Config.setPixelFormat("yuva444p10le");
Config.setCodec("prores");
Config.setProResProfile("4444");

One-frame render check

Can render one frame with CLI to sanity-check layout, color, timing. Skip for trivial edits, pure refactors, or when Studio/prior renders enough.

npx remotion still [composition-id] --scale=0.25 --frame=30

At 30 fps, --frame=30 = one-second mark. --frame is zero-based.

If working with captions/subtitles, read ./references/rules/subtitles.md.

If trimming video or doing silence detection, read ./references/rules/ffmpeg.md.

If detecting + trimming silent audio/video segments, read ./references/rules/silence-detection.md.

If visualizing audio: spectrum bars, waveforms, bass-react effects, read ./references/rules/audio-visualization.md.

If using sound effects, read ./references/rules/sfx.md.

Respect workspace code style. If none, use normal pretty formatting. Examples may be minified. Your code should not be.

How to use

Read rule files as needed:

• 3D video objects with Three.js + React Three Fiber
• Animate elements
• Import images, video, audio, fonts
• Audio import, trim, volume, speed, pitch
• Dynamic duration, size, props
• Check if browser can decode imported video
• Include Bar, Pie, Line, Stock charts
• Building compositions (video scenes)
• Extract single video frames with Mediabunny
• Integrate Google + local fonts
• Get audio duration of import
• Get resolution of imported video
• Get duration of imported video
• Include GIF/APNG/AVIF/WebP assets
• Always import Images like this
• Create light leak overlays
• Use Lottie files
• Measure size of nodes in video
• Measure text, fit, overflow
• Delay, trim and set duration for components
• Style video elements with Remotion
• Text motion patterns
• Interpolate, Bézier easing, springs
• Scene transitions + overlays
• Render transparent bg video with alpha channel
• Trim animation start/end
• Import videos and control trim, volume, speed, loop, pitch
• Make compositions configurable with Zod schemas
• Include maps in videos with Mapbox maps + animation
• Adaptive silence detection with FFmpeg
• AI voiceover with ElevenLabs

Important rules

• Default to 30fps
• Unless explicitly asked for transparency, ALWAYS add bg color to project and composition
• ALWAYS COPY image/video/audio assets into public folder when using them
• ALWAYS PREFER existing react components from reusable packages, if in monorepo
• ALWAYS PREFER downloading/reusing assets from websites and brand kits instead of re-creating
  • NEVER recreate Logos manually (unless it's only text in a known font). Copy/Download logo instead.
  • NEVER recreate example gradient images. Copy/Download instead.
• Unless styleguides say different, do these things:
  • Fast and crisp transitions instead of slow fade-ins
  • Fade-in and fade-out should always include Blurring, Opacity and Translate
  • PREFER Word-by-word fade-in over Line-By-Line. Opt-in to typewriter for input demos or special technical cases
  • Light text/logos over Light BG must have slight shadow for contrast
  • NEVER use button-style CTA text formatting
    • Minimize use of button-style formatting of text unless it's in a "demo"-section of the video
  • Dynamic scene durations:
    • More text or diagrams must lead to longer scenes
    • Short outro scenes unless requested differently for social media channel
    • If voiceover exist, match it's length for scenes
    • If with bg music (only), cut on beat (ask user for BPM of song)
  • Create scene transitions with continuity (i.e. keep elements and move them instead of fading everything out)
    • Avoid presentation-like feeling of a video. Instead it must feel like a continuous story.