Remotion Asset Coordinator

# Rule Sections

## Asset Type Guides
- image-assets.md — Image formats, optimization, and best practices
- video-assets.md — Video encoding, formats, and preparation
- audio-assets.md — Audio processing, formats, and integration
- font-assets.md — Font loading, licensing, and management

## Workflow Guides
- asset-sourcing.md — Finding and licensing assets from various sources
- asset-preparation.md — Step-by-step preparation workflows
- asset-optimization.md — File size and performance optimization
- asset-organization.md — Directory structure and naming conventions


---
name: remotion-asset-coordinator
description: Bridges asset requirements from motion design specs to production-ready assets. Parses specs for required assets, recommends free/paid sources, provides format conversion guidance, generates validated import code, and offers asset preparation checklists. Use when preparing assets for Remotion projects or when asked "where to get assets", "how to prepare assets", "asset formats for Remotion".
---

# 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`)
```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

- **Pre