remotion-asset-coordinator
installsforks
How to install remotion-asset-coordinator?
ncklrs/startup-os-skills/remotion-asset-coordinator
$npx -y skills add ncklrs/startup-os-skills --skill remotion-asset-coordinatorBridges 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
SKILL.md
| 1 | # Remotion Asset Coordinator |
| 2 | |
| 3 | Streamlines the asset preparation workflow from motion design specs to production-ready files. Identifies requirements, recommends sources, guides optimization, and generates proper import code. |
| 4 | |
| 5 | ## What This Skill Does |
| 6 | |
| 7 | Coordinates the complete asset lifecycle: |
| 8 | |
| 9 | 1. **Requirement extraction** — Parse specs for all asset needs |
| 10 | 2. **Source recommendations** — Suggest free/paid asset sources |
| 11 | 3. **Format guidance** — Recommend optimal formats for each asset type |
| 12 | 4. **Preparation workflows** — Step-by-step asset prep instructions |
| 13 | 5. **Import code generation** — Create validated staticFile imports |
| 14 | 6. **Quality validation** — Verify assets meet production standards |
| 15 | |
| 16 | ## Input/Output Formats |
| 17 | |
| 18 | ### Input Format: VIDEO_SPEC.md OR CODE_SCAFFOLD.md |
| 19 | |
| 20 | This skill accepts either: |
| 21 | |
| 22 | **Option 1: VIDEO_SPEC.md** (from `/motion-designer`) |
| 23 | ```markdown |
| 24 | # Video Title |
| 25 | |
| 26 | ## Assets Required |
| 27 | |
| 28 | ### Images |
| 29 | - Logo (800x800, transparent background) |
| 30 | - Product photo (1920x1080) |
| 31 | |
| 32 | ### Audio |
| 33 | - Background music (full duration, 0.4 volume) |
| 34 | - Whoosh sound effect (5s mark, 0.6 volume) |
| 35 | |
| 36 | ### Fonts |
| 37 | - Inter (weights: 400, 600, 700) |
| 38 | ``` |
| 39 | |
| 40 | **Option 2: CODE_SCAFFOLD.md** (from `/remotion-spec-translator`) |
| 41 | ```markdown |
| 42 | ## TODO Markers |
| 43 | |
| 44 | - [ ] **Assets Required** |
| 45 | - [ ] Add `public/logo.png` (800x800) |
| 46 | - [ ] Add `public/audio/background.mp3` |
| 47 | - [ ] Add `public/audio/whoosh.mp3` |
| 48 | ``` |
| 49 | |
| 50 | ### Output Format: ASSET_MANIFEST.md |
| 51 | |
| 52 | Generates a comprehensive asset preparation manifest: |
| 53 | |
| 54 | ```markdown |
| 55 | # Asset Manifest: [Video Title] |
| 56 | |
| 57 | ## Status Overview |
| 58 | - 🔴 Not Started: 3 assets |
| 59 | - 🟡 In Progress: 0 assets |
| 60 | - 🟢 Ready: 0 assets |
| 61 | |
| 62 | **Progress:** 0/3 assets ready |
| 63 | |
| 64 | ## Required Assets |
| 65 | |
| 66 | ### Images (2 required) |
| 67 | |
| 68 | #### 1. Logo |
| 69 | - **Status:** 🔴 Not Started |
| 70 | - **File Path:** `public/images/logo.png` |
| 71 | - **Specifications:** |
| 72 | - Format: PNG (transparency required) |
| 73 | - Dimensions: 800x800 pixels (2x for retina) |
| 74 | - Display size: 400x400px |
| 75 | - File size target: < 200KB |
| 76 | |
| 77 | - **Source Recommendations:** |
| 78 | - Option 1: Export from Figma/design tool |
| 79 | - Option 2: Create in Photoshop/Illustrator |
| 80 | - Optimization: Use pngquant or tinypng.com |
| 81 | |
| 82 | - **Preparation Steps:** |
| 83 | 1. Export at 800x800 resolution |
| 84 | 2. Ensure transparent background |
| 85 | 3. Optimize with `pngquant --quality=80-95 logo.png` |
| 86 | 4. Verify file size < 200KB |
| 87 | 5. Save to `public/images/logo.png` |
| 88 | |
| 89 | - **Import Code:** |
| 90 | ```typescript |
| 91 | import { Img, staticFile } from 'remotion'; |
| 92 | |
| 93 | <Img |
| 94 | src={staticFile('images/logo.png')} |
| 95 | alt="Logo" |
| 96 | style={{ |
| 97 | width: 400, |
| 98 | height: 400, |
| 99 | }} |
| 100 | /> |
| 101 | ``` |
| 102 | |
| 103 | #### 2. Product Photo |
| 104 | - **Status:** 🔴 Not Started |
| 105 | - **File Path:** `public/images/product.jpg` |
| 106 | - **Specifications:** |
| 107 | - Format: JPEG (no transparency needed) |
| 108 | - Dimensions: 1920x1080 pixels |
| 109 | - Quality: 85-90% |
| 110 | - File size target: < 500KB |
| 111 | |
| 112 | - **Source Recommendations:** |
| 113 | - Option 1: Unsplash (free, high-quality) - https://unsplash.com |
| 114 | - Option 2: Pexels (free) - https://pexels.com |
| 115 | - Option 3: Custom photography |
| 116 | |
| 117 | - **Preparation Steps:** |
| 118 | 1. Download or shoot at 1920x1080+ |
| 119 | 2. Edit/crop to exact 1920x1080 |
| 120 | 3. Export as JPEG 85-90% quality |
| 121 | 4. Verify file size < 500KB |
| 122 | 5. Save to `public/images/product.jpg` |
| 123 | |
| 124 | - **Import Code:** |
| 125 | ```typescript |
| 126 | import { Img, staticFile } from 'remotion'; |
| 127 | |
| 128 | <Img |
| 129 | src={staticFile('images/product.jpg')} |
| 130 | style={{ |
| 131 | width: '100%', |
| 132 | height: '100%', |
| 133 | objectFit: 'cover', |
| 134 | }} |
| 135 | /> |
| 136 | ``` |
| 137 | |
| 138 | ### Audio (2 required) |
| 139 | |
| 140 | #### 3. Background Music |
| 141 | - **Status:** 🔴 Not Started |
| 142 | - **File Path:** `public/audio/music/background.mp3` |
| 143 | - **Specifications:** |
| 144 | - Format: MP3 |
| 145 | - Duration: 30 seconds |
| 146 | - Bitrate: 192-256 kbps |
| 147 | - Sample rate: 44.1 kHz or 48 kHz |
| 148 | - Channels: Stereo |
| 149 | |
| 150 | - **Source Recommendations:** |
| 151 | - Option 1: YouTube Audio Library (free) - https://studio.youtube.com |
| 152 | - Option 2: Incompetech (free, attribution) - https://incompetech.com |
| 153 | - Option 3: Epidemic Sound (paid) - https://epidemicsound.com |
| 154 | |
| 155 | - **Preparation Steps:** |
| 156 | 1. Download/purchase 30s music track |
| 157 | 2. Trim to exactly 30 seconds if needed |
| 158 | 3. Convert to MP3 if needed: `ffmpeg -i input.wav -b:a 192k output.mp3` |
| 159 | 4. Apply fade out at end if needed |
| 160 | 5. Save to `public/audio/music/background.mp3` |
| 161 | |
| 162 | - **Import Code:** |
| 163 | ```typescript |
| 164 | import { Audio, staticFile, useVideoConfig } from 'remotion'; |
| 165 | |
| 166 | const { durationInFrames } = useVideoConfig(); |
| 167 | |
| 168 | <Audio |
| 169 | src={staticFile('audio/music/background.mp3')} |
| 170 | volume={0.4} |
| 171 | startFrom={0} |
| 172 | endAt={durationInFrames} |
| 173 | /> |
| 174 | ``` |
| 175 | |
| 176 | #### 4. Whoosh Sound Effect |
| 177 | - **Status:** 🔴 Not Started |
| 178 | - **File Path:** `pub |
People who liked this also viewed
6 picksType
- find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 2026
- grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026
- vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026
- improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026
- setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026
- triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026
