Remotion Scaffold
Scaffold Remotion composition folders, scene splits, constants, and Root registration so programmatic promo or product videos stay maintainable as they grow past 15 seconds.
Overview
remotion-scaffold is an agent skill for the Build phase that standardizes Remotion composition folders, scene files, constants, and Root registration.
Install
npx skills add https://github.com/ncklrs/startup-os-skills --skill remotion-scaffoldWhat is this skill?
- Documents folder pattern: index.tsx, constants.ts, types.ts, optional scenes/ for multi-scene work
- Rules for single-file vs multi-file when duration exceeds 15 seconds or you need 3+ scenes
- HIGH-impact composition-structure guidance with scene-patterns and constants-organization splits
- Registration rules for wiring compositions in Root.tsx
- Cross-links structure, scene, constants, and registration rule files for team-scale Remotion repos
- HIGH-impact composition-structure rules
- Four linked rule sections: structure, scene-patterns, constants, registration
- Guidance threshold: 15 seconds / 3+ scenes for multi-file layout
Adoption & trust: 1 installs on skills.sh; 27 GitHub stars; 3/3 security scanners passed (skills.sh audits); trending (+100% hot-view momentum).
What problem does it solve?
Your Remotion repo mixes scenes, timing, and types in one file so longer videos become impossible to collaborate on or extend safely.
Who is it for?
Solo builders adding Remotion to a startup stack for marketing or in-app video who want the agent to mirror startup-os Remotion conventions from day one.
Skip if: Teams that only need one-off FFmpeg scripts, non-React video pipelines, or projects where video is fully outsourced and never touched in-repo.
When should I use this skill?
Starting or reorganizing a Remotion composition in a startup-os or similar repo before implementing scenes and animations.
What do I get? / Deliverables
You get a documented folder layout, scene split criteria, and registration checklist so the next composition work follows one maintainable pattern.
- Folder layout under VideoName/ with index, constants, types, and optional scenes/
- Registration entries aligned with Root.tsx patterns
Recommended Skills
Journey fit
Programmatic video is authored in the Build phase as part of the product surface or launch assets, before Ship polish. Remotion compositions are React/TypeScript UI-like code organized as frontend media components, not backend APIs.
How it compares
Structured Remotion scaffolding skill—not a generic React component generator or a video hosting MCP.
Common Questions / FAQ
Who is remotion-scaffold for?
Indie founders and small teams using Remotion with AI coding agents to produce branded video without hiring a motion specialist.
When should I use remotion-scaffold?
During Build when you create a new composition, before a launch reel crosses ~15 seconds, or when refactoring ad-hoc Remotion files into scene-based folders.
Is remotion-scaffold safe to install?
It is procedural documentation for file layout; review the Security Audits panel on this Prism page before trusting any third-party skill source.
SKILL.md
READMESKILL.md - Remotion Scaffold
# Remotion Template Creator Rules ## Sections ### Structure Rules for organizing composition files and folders. - [composition-structure.md](composition-structure.md) — File and folder organization - [scene-patterns.md](scene-patterns.md) — Scene component structure ### Configuration Rules for constants and registration. - [constants-organization.md](constants-organization.md) — Organizing colors, springs, timing - [registration.md](registration.md) — Registering compositions in Root.tsx --- title: Composition Structure impact: HIGH tags: structure, organization, files --- ## Composition Structure **Impact: HIGH** Proper file organization makes compositions maintainable and scalable. ### Folder Structure Pattern ``` src/remotion/compositions/ └── VideoName/ ├── index.tsx # Main composition (entry point) ├── constants.ts # Colors, springs, timing ├── types.ts # TypeScript interfaces ├── audio.ts # Audio configuration (if needed) └── scenes/ # Scene components (for multi-scene) ├── Scene1Name.tsx ├── Scene2Name.tsx └── ... ``` ### When to Use Each Pattern **Single file (simple videos):** - Duration < 15 seconds - 1-2 scenes - Minimal animations **Multi-file with scenes/ folder:** - Duration > 15 seconds - 3+ distinct scenes - Complex animations - Team collaboration ### Good Example ```typescript // index.tsx - Clean entry point import { AbsoluteFill, Sequence } from "remotion"; import { COLORS, SCENE_TIMING } from "./constants"; import { IntroScene } from "./scenes/IntroScene"; import { ContentScene } from "./scenes/ContentScene"; import { OutroScene } from "./scenes/OutroScene"; export function ProductDemo() { return ( <AbsoluteFill style={{ backgroundColor: COLORS.background }}> <Sequence from={SCENE_TIMING.intro.start} durationInFrames={SCENE_TIMING.intro.duration}> <IntroScene /> </Sequence> <Sequence from={SCENE_TIMING.content.start} durationInFrames={SCENE_TIMING.content.duration}> <ContentScene /> </Sequence> <Sequence from={SCENE_TIMING.outro.start} durationInFrames={SCENE_TIMING.outro.duration}> <OutroScene /> </Sequence> </AbsoluteFill> ); } ``` ### Bad Example ```typescript // Everything in one massive file export function ProductDemo() { // 500+ lines of code // All scenes inline // Hardcoded colors and timing // No separation of concerns } ``` ### Naming Conventions | Type | Convention | Example | |------|------------|---------| | Composition folder | PascalCase | `ProductDemo/` | | Main file | `index.tsx` | Always `index.tsx` | | Scene files | `Scene{N}{Name}.tsx` | `Scene1Intro.tsx` | | Constants | `constants.ts` | Always `constants.ts` | | Types | `types.ts` | Always `types.ts` | ### Checklist - [ ] Composition has its own folder - [ ] Entry point is `index.tsx` - [ ] Constants extracted to `constants.ts` - [ ] Types defined in `types.ts` - [ ] Scenes in `scenes/` folder if 3+ scenes - [ ] Scene files follow naming convention --- title: Constants Organization impact: HIGH tags: constants, colors, springs, timing --- ## Constants Organization **Impact: HIGH** Well-organized constants make videos easy to customize and maintain. ### Constants File Structure ```typescript // constants.ts // ============================================================================= // COLORS // ============================================================================= export const COLORS = { // Brand colors primary: "#FF6B35", // Ember Orange secondary: "#4ECDC4", // Teal accent: "#FFE66D", // Yellow // Backgrounds background: "#0A0A0A", // Near black surface: "#171717", // Card background overlay: "rgba(0, 0, 0, 0.5)", // Text text: "#FFFFFF", textMuted: "#A3A3A3", textSubtle: "#525252", // Semantic success: "#10B981", warning: "#F59E0B", error: "#EF4444", } as const;