Remotion Scaffold
Creates the foundational folder structure, configuration files, and organizational framework for Remotion video projects. This skill focuses exclusively on project setup and does NOT generate animation logic or component implementation.
What This Skill Does
Generates project scaffolding for:
Directory structure — Organized folder layout for compositions, scenes, assets Configuration files — Base constants.ts, types.ts with empty templates Empty scene templates — Placeholder scene components with TODO markers Asset directories — Organized folders for images, audio, fonts Registration setup — Composition registration in Root.tsx Scope Boundaries
IN SCOPE:
Creating folder structure Writing empty file templates Setting up configuration skeleton Directory organization patterns
OUT OF SCOPE:
Animation implementation (use /remotion-animation) Scene component logic (use /remotion-component-gen) Sequence composition (use /remotion-composition) Component generation (use /remotion-component-gen) Input/Output Formats Input Format: Project Requirements
Accepts project setup requirements:
Natural Language:
Create a new Remotion project scaffold for a 30-second video with 4 scenes.
Structured Format:
Project Requirements
Project Name: ProductDemo Duration: 30 seconds Frame Rate: 30 fps Dimensions: 1920x1080 (16:9) Number of Scenes: 4 (Intro, Features, Demo, CTA) Asset Types: Images, Audio (music + SFX)
Output Format: SCAFFOLD_MANIFEST.md
Generates a manifest documenting created structure:
Scaffold Manifest: ProductDemo
Status
✅ Directory structure created ✅ Configuration files generated ✅ Scene templates created (empty) ⏳ Ready for implementation
Generated Structure
src/remotion/compositions/ProductDemo/ ├── index.tsx # ✅ Created - Main composition (empty) ├── constants.ts # ✅ Created - Constants template ├── types.ts # ✅ Created - Type definitions └── scenes/ ├── Scene1Intro.tsx # ✅ Created - Empty template ├── Scene2Features.tsx # ✅ Created - Empty template ├── Scene3Demo.tsx # ✅ Created - Empty template └── Scene4CTA.tsx # ✅ Created - Empty template
public/ ├── images/ # ✅ Created - Empty directory ├── audio/ │ ├── music/ # ✅ Created - Empty directory │ └── sfx/ # ✅ Created - Empty directory └── fonts/ # ✅ Created - Empty directory
File Templates Created
Main Composition: index.tsx
```typescript import { AbsoluteFill, Sequence } from "remotion"; import { SCENE_TIMING } from "./constants"; import { Scene1Intro } from "./scenes/Scene1Intro"; import { Scene2Features } from "./scenes/Scene2Features"; import { Scene3Demo } from "./scenes/Scene3Demo"; import { Scene4CTA } from "./scenes/Scene4CTA"; import type { ProductDemoProps } from "./types";
export function ProductDemo({}: ProductDemoProps) {
return (
{/* Additional scenes... */}
</AbsoluteFill>
); }
Constants: constants.ts // TODO: Define color palette export const COLORS = { // Add colors here } as const;
// TODO: Configure spring animations via /remotion-animation export const SPRING_CONFIGS = { // Add spring configs here } as const;
// Scene timing (30fps, 30 seconds total = 900 frames) const FPS = 30;
export const SCENE_TIMING = { intro: { start: 0, duration: 5 * FPS }, features: { start: 5 * FPS, duration: 10 * FPS }, demo: { start: 15 * FPS, duration: 10 * FPS }, cta: { start: 25 * FPS, duration: 5 * FPS }, } as const;
Types: types.ts export interface ProductDemoProps { // Add custom props here }
export interface SceneProps { // Common scene props }
Scene Template: scenes/Scene1Intro.tsx import { AbsoluteFill } from "remotion";
export function Scene1Intro() {
return (
Next Steps Define animations → Run /remotion-animation to generate animation configs Build composition → Run /remotion-composition to structure Sequence layout Implement scenes → Run /remotion-component-gen for each scene Configure render → Run /remotion-render-config for output settings Add assets → Run /remotion-asset-coordinator for asset preparation Configuration Summary Setting Value Composition ID ProductDemo Duration 30 seconds (900 frames) Frame Rate 30 fps Dimensions 1920x1080 (16:9) Scenes 4 (Intro, Features, Demo, CTA) Status Scaffold complete, ready for implementation File Locations
All files created in:
Composition: /path/to/project/src/remotion/compositions/ProductDemo/ Assets: /path/to/project/public/ Scaffold Checklist
Creation checklist:
Create composition folder structure Generate main composition file (index.tsx) with TODO markers Generate constants file (constants.ts) as template Generate types file (types.ts) Create empty scene component files Create asset directories (public/images/, public/audio/) Add composition registration skeleton Animation implementation (next: /remotion-animation) Composition logic (next: /remotion-composition) Scene implementation (next: /remotion-component-gen)
Directory Structure Patterns
Pattern 1: Simple Project (1-2 scenes)
src/remotion/compositions/VideoName/ ├── index.tsx # Main composition ├── constants.ts # Configuration constants └── types.ts # TypeScript types
Pattern 2: Multi-Scene Project (3+ scenes)
src/remotion/compositions/VideoName/ ├── index.tsx # Main composition ├── constants.ts # Shared constants ├── types.ts # Type definitions └── scenes/ ├── Scene1.tsx ├── Scene2.tsx └── Scene3.tsx
Pattern 3: Complex Project (with audio)
src/remotion/compositions/VideoName/ ├── index.tsx # Main composition ├── constants.ts # Configuration ├── types.ts # Types ├── audio.ts # Audio configuration └── scenes/ └── ...
Pattern 4: Component Library Project
src/remotion/ ├── components/ │ ├── particles/ │ ├── text/ │ ├── progress/ │ └── transitions/ ├── compositions/ │ └── VideoName/ └── utils/ ├── seededRandom.ts └── timing.ts
File Templates
Empty Main Composition
```typescript import { AbsoluteFill } from "remotion"; import type { VideoNameProps } from "./types";
export function VideoName({}: VideoNameProps) {
return (
Empty Constants Template // TODO: Define via /remotion-animation export const COLORS = {} as const; export const SPRING_CONFIGS = {} as const; export const SCENE_TIMING = {} as const;
Empty Types Template export interface VideoNameProps { // Add props here }
Empty Scene Template import { AbsoluteFill } from "remotion";
export function Scene1() {
return (
Registration Template
Add to src/remotion/Root.tsx:
import { Composition } from "remotion"; import { VideoName } from "./compositions/VideoName";
// Add to RemotionRoot component:
Video Format Presets
Quick reference for common video formats:
// YouTube (16:9)
// Instagram Reels / TikTok (9:16)
// Twitter/X (16:9)
// Square (1:1)
Asset Directory Organization
Standard asset directory structure:
public/ ├── images/ │ ├── logos/ │ ├── backgrounds/ │ └── icons/ ├── audio/ │ ├── music/ │ └── sfx/ └── fonts/ └── [custom-fonts].woff2
Scaffold Workflow Parse requirements → Extract project name, duration, scenes, format Create directories → Generate folder structure Write empty templates → Create files with TODO markers Setup registration → Add composition to Root.tsx Generate manifest → Document created structure in SCAFFOLD_MANIFEST.md Hand off → Direct to specialized skills for implementation Integration with Other Skills
This skill is the FIRST STEP in the pipeline:
remotion-scaffold (this skill) ↓ outputs: SCAFFOLD_MANIFEST.md remotion-animation ↓ outputs: ANIMATION_CONFIG.md remotion-composition ↓ outputs: COMPOSITION_STRUCTURE.md remotion-component-gen (per scene) ↓ outputs: SCENE_COMPONENT.md remotion-render-config ↓ outputs: RENDER_CONFIG.md
Works with:
/motion-designer — Project requirements may come from design specs /remotion-animation — Next step for animation configuration /remotion-composition — Next step for composition structure /remotion-component-gen — Next step for scene implementation /remotion-render-config — Final step for render settings
This skill provides clean, minimal project scaffolding that serves as the foundation for the Remotion implementation pipeline.