Remotion Asset Coordinator

Streamlines the asset preparation workflow from motion design specs to production-ready files. Identifies requirements, recommends sources, guides optimization, and generates proper import code.

What This Skill Does

Coordinates the complete asset lifecycle:

1. Requirement extraction — Parse specs for all asset needs
2. Source recommendations — Suggest free/paid asset sources
3. Format guidance — Recommend optimal formats for each asset type
4. Preparation workflows — Step-by-step asset prep instructions
5. Import code generation — Create validated staticFile imports
6. Quality validation — Verify assets meet production standards

Input/Output Formats

Input Format: VIDEO_SPEC.md OR CODE_SCAFFOLD.md

This skill accepts either:

Option 1: VIDEO_SPEC.md (from /motion-designer)

# Video Title

## Assets Required

### Images
- Logo (800x800, transparent background)
- Product photo (1920x1080)

### Audio
- Background music (full duration, 0.4 volume)
- Whoosh sound effect (5s mark, 0.6 volume)

### Fonts
- Inter (weights: 400, 600, 700)

Option 2: CODE_SCAFFOLD.md (from /remotion-spec-translator)

## TODO Markers

- [ ] **Assets Required**
  - [ ] Add `public/logo.png` (800x800)
  - [ ] Add `public/audio/background.mp3`
  - [ ] Add `public/audio/whoosh.mp3`

Output Format: ASSET_MANIFEST.md

Generates a comprehensive asset preparation manifest:

# Asset Manifest: [Video Title]

## Status Overview
- 🔴 Not Started: 3 assets
- 🟡 In Progress: 0 assets
- 🟢 Ready: 0 assets

**Progress:** 0/3 assets ready

## Required Assets

### Images (2 required)

#### 1. Logo
- **Status:** 🔴 Not Started
- **File Path:** `public/images/logo.png`
- **Specifications:**
  - Format: PNG (transparency required)
  - Dimensions: 800x800 pixels (2x for retina)
  - Display size: 400x400px
  - File size target: < 200KB

- **Source Recommendations:**
  - Option 1: Export from Figma/design tool
  - Option 2: Create in Photoshop/Illustrator
  - Optimization: Use pngquant or tinypng.com

- **Preparation Steps:**
  1. Export at 800x800 resolution
  2. Ensure transparent background
  3. Optimize with `pngquant --quality=80-95 logo.png`
  4. Verify file size < 200KB
  5. Save to `public/images/logo.png`

- **Import Code:**
  ```typescript
  import { Img, staticFile } from 'remotion';

  <Img
    src={staticFile('images/logo.png')}
    alt="Logo"
    style={{
      width: 400,
      height: 400,
    }}
  />

2. Product Photo

• Status: 🔴 Not Started

• File Path: public/images/product.jpg

• Specifications:

  • Format: JPEG (no transparency needed)
  • Dimensions: 1920x1080 pixels
  • Quality: 85-90%
  • File size target: < 500KB

• Source Recommendations:

  • Option 1: Unsplash (free, high-quality) - https://unsplash.com
  • Option 2: Pexels (free) - https://pexels.com
  • Option 3: Custom photography

• Preparation Steps:

  1. Download or shoot at 1920x1080+
  2. Edit/crop to exact 1920x1080
  3. Export as JPEG 85-90% quality
  4. Verify file size < 500KB
  5. Save to public/images/product.jpg

• Import Code:

  import { Img, staticFile } from 'remotion';
  
  <Img
    src={staticFile('images/product.jpg')}
    style={{
      width: '100%',
      height: '100%',
      objectFit: 'cover',
    }}
  />
  

Audio (2 required)

3. Background Music

• Status: 🔴 Not Started

• File Path: public/audio/music/background.mp3

• Specifications:

  • Format: MP3
  • Duration: 30 seconds
  • Bitrate: 192-256 kbps
  • Sample rate: 44.1 kHz or 48 kHz
  • Channels: Stereo

• Source Recommendations:

  • Option 1: YouTube Audio Library (free) - https://studio.youtube.com
  • Option 2: Incompetech (free, attribution) - https://incompetech.com
  • Option 3: Epidemic Sound (paid) - https://epidemicsound.com

• Preparation Steps:

  1. Download/purchase 30s music track
  2. Trim to exactly 30 seconds if needed
  3. Convert to MP3 if needed: ffmpeg -i input.wav -b:a 192k output.mp3
  4. Apply fade out at end if needed
  5. Save to public/audio/music/background.mp3

• Import Code:

  import { Audio, staticFile, useVideoConfig } from 'remotion';
  
  const { durationInFrames } = useVideoConfig();
  
  <Audio
    src={staticFile('audio/music/background.mp3')}
    volume={0.4}
    startFrom={0}
    endAt={durationInFrames}
  />
  

4. Whoosh Sound Effect

• Status: 🔴 Not Started

• File Path: public/audio/sfx/whoosh.mp3

• Specifications:

  • Format: MP3
  • Duration: 1-2 seconds
  • Bitrate: 192 kbps
  • Timing: Plays at 5s mark (frame 150 at 30fps)

• Source Recommendations:

  • Option 1: Freesound (free, Creative Commons) - https://freesound.org
  • Option 2: Zapsplat (free, attribution) - https://zapsplat.com
  • Option 3: AudioJungle (paid) - https://audiojungle.net

• Preparation Steps:

  1. Download whoosh/transition sound effect
  2. Trim to 1-2 seconds
  3. Normalize volume if needed
  4. Convert to MP3: ffmpeg -i input.wav -b:a 192k whoosh.mp3
  5. Save to public/audio/sfx/whoosh.mp3

• Import Code:

  import { Audio, Sequence, staticFile } from 'remotion';
  
  <Sequence from={150} durationInFrames={60}>
    <Audio
      src={staticFile('audio/sfx/whoosh.mp3')}
      volume={0.6}
    />
  </Sequence>
  

Fonts (1 required)

5. Inter Font

• Status: 🟢 Ready (Google Font)

• Weights Needed: 400 (Regular), 600 (Semibold), 700 (Bold)

• Source: Google Fonts via @remotion/google-fonts

• Installation:

  npm install @remotion/google-fonts
  

• Import Code:

  import { loadFont } from '@remotion/google-fonts/Inter';
  
  const { fontFamily } = loadFont({
    weights: ['400', '600', '700'],
  });
  
  <div style={{
    fontFamily,
    fontWeight: 600,
  }}>
    Text content
  </div>
  

Directory Structure

Create this folder structure in your project:

public/
├── images/
│   ├── logo.png          # 🔴 Required
│   └── product.jpg       # 🔴 Required
└── audio/
    ├── music/
    │   └── background.mp3  # 🔴 Required
    └── sfx/
        └── whoosh.mp3      # 🔴 Required

Quick Reference: Optimization Commands

Images

# Optimize PNG
pngquant --quality=80-95 input.png -o output.png

# Convert to JPEG
magick input.png -quality 90 output.jpg

# Resize image
magick input.png -resize 1920x1080 output.png

Audio

# Convert to MP3
ffmpeg -i input.wav -b:a 192k output.mp3

# Trim audio
ffmpeg -i input.mp3 -ss 00:00:00 -t 00:00:30 -c copy output.mp3

# Normalize volume
ffmpeg -i input.mp3 -filter:a "volume=1.5" output.mp3

Quality Checklist

Before marking assets as ready:

• All files in correct directories
• File names match import paths exactly
• Image dimensions correct (2x for retina if needed)
• Image formats appropriate (PNG for transparency, JPEG for photos)
• Image file sizes optimized (< 500KB ideal)
• Audio files in MP3 format
• Audio durations correct
• Audio bitrates appropriate (192-256 kbps)
• Fonts installed and imported correctly
• All staticFile() paths tested

Next Steps

1. Gather assets using source recommendations above
2. Prepare assets following preparation steps for each
3. Validate quality using the checklist
4. Update status to 🟢 Ready as assets are completed
5. Implement code using provided import snippets
6. Run /remotion-video-reviewer to verify asset integration

**This document provides:**
- Complete asset inventory with specifications
- Source recommendations (free and paid)
- Step-by-step preparation workflows
- Ready-to-use import code snippets
- Quality validation checklist
- Progress tracking (🔴 🟡 🟢)

**Feeds into:** Developer implementation → `/remotion-video-reviewer` for quality check

## Asset Categories

### Images

**Types:**
- P