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:

Requirement extraction — Parse specs for all asset needs
Source recommendations — Suggest free/paid asset sources
Format guidance — Recommend optimal formats for each asset type
Preparation workflows — Step-by-step asset prep instructions
Import code generation — Create validated staticFile imports
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

)

markdown

# 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

)

markdown

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

markdown

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

typescript

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:

typescript

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:

typescript

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:
bash
```
npm install @remotion/google-fonts
```

Import Code:

typescript

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

bash

# 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

bash

# 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

Gather assets using source recommendations above
Prepare assets following preparation steps for each
Validate quality using the checklist
Update status to 🟢 Ready as assets are completed
Implement code using provided import snippets
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:**
- Product photos
- Background images
- Textures and patterns
- Icons and illustrations
- Logos and brand assets

**Optimal Formats:**
- **PNG**: Logos, icons, text overlays (transparency needed)
- **JPEG**: Photos, backgrounds (no transparency)
- **SVG**: Simple graphics, icons (scalable, small file size)
- **WebP**: Modern alternative, smaller file sizes

**Recommendations:**
```typescript
// Logo (transparency required)
Format: PNG
Resolution: 2x intended display size (retina)
Example: 400x400 element → 800x800 PNG

// Product photo
Format: JPEG (85-90% quality)
Resolution: Exact or slightly larger than display
Example: 1920x1080 display → 1920x1080 or 2560x1440 JPEG

// Icon
Format: SVG (preferred) or PNG
Resolution: 2x display size if PNG

Videos

Types:

Background footage
Product demos
Screen recordings
Transitions

Optimal Formats:

MP4 (H.264): Best compatibility
WebM: Modern, smaller files
ProRes: High quality source footage

Recommendations:

typescript

// Background video
Format: MP4 (H.264)
Codec: H.264, High profile
Resolution: Match composition (1920x1080)
Bitrate: 5-10 Mbps
Frame rate: Match composition (30fps)

// Product demo
Format: MP4 (H.264)
Resolution: 1920x1080 or 3840x2160 (4K)
Bitrate: 10-20 Mbps
Alpha channel: Use ProRes 4444 if transparency needed

Audio

Types:

Background music
Sound effects (SFX)
Voiceover
Ambient texture

Optimal Formats:

MP3: Compressed, good compatibility
WAV: Uncompressed, best quality
AAC: Modern, better compression than MP3

Recommendations:

typescript

// Background music
Format: MP3 or AAC
Bitrate: 192-320 kbps
Sample rate: 44.1 kHz or 48 kHz
Channels: Stereo

// Sound effects
Format: WAV (for editing) → MP3 (for production)
Bitrate: 192 kbps (MP3)
Sample rate: 44.1 kHz
Channels: Stereo or Mono
Duration: Trim to exact needed length

// Voiceover
Format: WAV or MP3
Bitrate: 256-320 kbps
Sample rate: 48 kHz
Channels: Mono (sufficient for voice)

Fonts

Types:

Google Fonts (free, web-safe)
Custom fonts (brand-specific)
System fonts (fallbacks)

Recommendations:

typescript

// Google Fonts (preferred)
Method: Import via @remotion/google-fonts
Weights: Only import needed weights
Example: 400 (regular), 600 (semibold), 700 (bold)

// Custom fonts
Format: WOFF2 (best), WOFF, TTF
Location: /public/fonts/
Import: Via CSS @font-face

Asset Source Recommendations

Free Sources

Images & Illustrations:

Unsplash — High-quality photos (free, no attribution required)
Pexels — Photos and videos (free)
Pixabay — Photos, vectors, videos (free)
unDraw — Customizable illustrations (free, SVG)
Heroicons — Beautiful hand-crafted SVG icons (free)

Audio:

Freesound — Sound effects library (Creative Commons)
YouTube Audio Library — Music and SFX (free for commercial use)
Incompetech — Royalty-free music (attribution required)
Zapsplat — Free sound effects (attribution)

Fonts:

Google Fonts — 1400+ free fonts (web-safe)
Font Squirrel — Free fonts for commercial use

Paid/Premium Sources

Images:

Adobe Stock — Professional quality
Shutterstock — Massive library
Getty Images — Premium content

Audio:

Epidemic Sound — High-quality music library
Artlist — Unlimited music licensing
AudioJungle — Individual tracks, affordable

Fonts:

Adobe Fonts — Included with Creative Cloud
MyFonts — Massive font marketplace

Asset Preparation Workflows

Image Preparation

bash

# 1. Resize to appropriate dimensions
magick input.png -resize 1920x1080 output.png

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

# 3. Convert to JPEG (if no transparency)
magick input.png -quality 90 output.jpg

# 4. Generate WebP (modern format)
magick input.png -quality 85 output.webp

Manual workflow:

Open in Photoshop/GIMP/Figma
Resize to exact or 2x display dimensions
Export at appropriate quality
Verify file size (< 1MB for most images)

Video Preparation

bash

# Convert to H.264 MP4
ffmpeg -i input.mov -c:v libx264 -preset slow -crf 20 -c:a aac -b:a 192k output.mp4

# Resize video
ffmpeg -i input.mp4 -vf scale=1920:1080 -c:v libx264 -crf 20 output.mp4

# Extract clip segment
ffmpeg -i input.mp4 -ss 00:00:10 -t 00:00:05 -c copy output.mp4

# Compress video
ffmpeg -i input.mp4 -c:v libx264 -crf 28 -c:a aac -b:a 128k compressed.mp4

Audio Preparation

bash

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

# Trim audio
ffmpeg -i input.mp3 -ss 00:00:05 -t 00:00:10 -c copy trimmed.mp3

# Adjust volume
ffmpeg -i input.mp3 -filter:a "volume=1.5" louder.mp3

# Fade in/out
ffmpeg -i input.mp3 -af "afade=t=in:st=0:d=2,afade=t=out:st=28:d=2" faded.mp3

Import Code Generation

Images

Spec requirement: "Logo.png (800x800)"

Generated code:

typescript

import { Img, staticFile } from 'remotion';

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

Videos

Spec requirement: "Background video (1920x1080, 30fps)"

Generated code:

typescript

import { Video, staticFile } from 'remotion';

<Video
  src={staticFile('background-video.mp4')}
  style={{
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
  }}
/>

Audio

Spec requirement: "Background music (full duration)"

Generated code:

typescript

import { Audio, staticFile, useVideoConfig } from 'remotion';

// In component
const { durationInFrames } = useVideoConfig();

<Audio
  src={staticFile('background-music.mp3')}
  volume={0.5}
  startFrom={0}
  endAt={durationInFrames}
/>

Fonts

Spec requirement: "Inter font (400, 600, 700)"

Generated code:

typescript

import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont({
  weights: ['400', '600', '700'],
});

// In component
<div style={{
  fontFamily,
  fontWeight: 700,
}}>
  Text content
</div>

Asset Organization

Directory Structure

project/
├── public/
│   ├── images/
│   │   ├── logo.png
│   │   ├── product.jpg
│   │   └── background.webp
│   ├── videos/
│   │   ├── intro.mp4
│   │   └── demo.mp4
│   ├── audio/
│   │   ├── music/
│   │   │   └── background.mp3
│   │   └── sfx/
│   │       ├── whoosh.mp3
│   │       ├── pop.mp3
│   │       └── ding.mp3
│   └── fonts/
│       └── CustomFont.woff2
└── src/
    └── remotion/
        └── compositions/

Naming Conventions

typescript

// Good naming
logo.png              // Clear, simple
product-hero.jpg      // Descriptive
background-gradient.webp
whoosh-transition.mp3
background-music.mp3

// Bad naming
IMG_1234.jpg         // Not descriptive
final-FINAL-v2.png   // Confusing versions
my image.png         // Spaces (use hyphens)

Quality Validation Checklist

Before using assets in production:

Images:

Correct dimensions (2x for retina if needed)
Appropriate format (PNG for transparency, JPEG for photos)
Optimized file size (< 500KB ideal, < 1MB maximum)
No artifacts or compression issues
Transparent background if required

Videos:

Correct resolution (matches composition)
Correct frame rate (matches composition)
Appropriate codec (H.264)
Reasonable file size (< 50MB ideal)
No dropped frames
Audio included if needed

Audio:

Correct format (MP3 or WAV)
Appropriate bitrate (192-320 kbps)
Trimmed to exact duration
Normalized volume levels
No clipping or distortion
Fade in/out applied if needed

Fonts:

Legal license for commercial use
All required weights available
Proper format (WOFF2 preferred)
Loaded correctly in composition

Integration with Other Skills

Works with:

```
/motion-designer
```
— Extracts asset requirements from specs
```
/remotion-spec-translator
```
— Generates asset import code during translation
```
/remotion-video-reviewer
```
— Validates asset quality during review

Rules Directory

For detailed asset guidance:

rules/image-assets.md — Image preparation and optimization
rules/video-assets.md — Video encoding and preparation
rules/audio-assets.md — Audio processing and integration
rules/font-assets.md — Font loading and management

This skill ensures all assets are properly sourced, prepared, and integrated for production-ready Remotion videos.

remotion-asset-coordinator

NPX Install

Tags

SKILL.md Content

Remotion Asset Coordinator

What This Skill Does

Input/Output Formats

Input Format: VIDEO_SPEC.md OR CODE_SCAFFOLD.md

Output Format: ASSET_MANIFEST.md

2. Product Photo

Audio (2 required)

3. Background Music

4. Whoosh Sound Effect

Fonts (1 required)

5. Inter Font

Directory Structure

Quick Reference: Optimization Commands

Images

Audio

Quality Checklist

Next Steps

Videos

Audio

Fonts

Asset Source Recommendations

Free Sources

Paid/Premium Sources

Asset Preparation Workflows

Image Preparation

Video Preparation

Audio Preparation

Import Code Generation

Images

Videos

Audio

Fonts

Asset Organization

Directory Structure

Naming Conventions

Quality Validation Checklist

Integration with Other Skills

Rules Directory