remotion-scaffold

Name: remotion-scaffold
Author: ncklrs

134installs3forks

How to install remotion-scaffold?

ncklrs/startup-os-skills/remotion-scaffold

$npx -y skills add ncklrs/startup-os-skills --skill remotion-scaffold

Installs into the current project.

Summary

Scaffolds Remotion project folder structure, base configuration files, and file organization. Focuses ONLY on directory creation, empty file templates, and Remotion configuration. Use when starting a new video project or when asked to "scaffold Remotion project", "create project

Files · 1

View on GitHub

SKILL.md

1	# Remotion Scaffold
2
3	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.
4
5	## What This Skill Does
6
7	Generates project scaffolding for:
8
9	1. Directory structure — Organized folder layout for compositions, scenes, assets
10	2. Configuration files — Base constants.ts, types.ts with empty templates
11	3. Empty scene templates — Placeholder scene components with TODO markers
12	4. Asset directories — Organized folders for images, audio, fonts
13	5. Registration setup — Composition registration in Root.tsx
14
15	## Scope Boundaries
16
17	IN SCOPE:
18	- Creating folder structure
19	- Writing empty file templates
20	- Setting up configuration skeleton
21	- Directory organization patterns
22
23	OUT OF SCOPE:
24	- Animation implementation (use `/remotion-animation`)
25	- Scene component logic (use `/remotion-component-gen`)
26	- Sequence composition (use `/remotion-composition`)
27	- Component generation (use `/remotion-component-gen`)
28
29	## Input/Output Formats
30
31	### Input Format: Project Requirements
32
33	Accepts project setup requirements:
34
35	Natural Language:
36	```
37	Create a new Remotion project scaffold for a 30-second video with 4 scenes.
38	```
39
40	Structured Format:
41	```markdown
42	## Project Requirements
43
44	Project Name: ProductDemo
45	Duration: 30 seconds
46	Frame Rate: 30 fps
47	Dimensions: 1920x1080 (16:9)
48	Number of Scenes: 4 (Intro, Features, Demo, CTA)
49	Asset Types: Images, Audio (music + SFX)
50	```
51
52	### Output Format: SCAFFOLD_MANIFEST.md
53
54	Generates a manifest documenting created structure:
55
56	```markdown
57	# Scaffold Manifest: ProductDemo
58
59	## Status
60	✅ Directory structure created
61	✅ Configuration files generated
62	✅ Scene templates created (empty)
63	⏳ Ready for implementation
64
65	## Generated Structure
66
67	```
68	src/remotion/compositions/ProductDemo/
69	├── index.tsx # ✅ Created - Main composition (empty)
70	├── constants.ts # ✅ Created - Constants template
71	├── types.ts # ✅ Created - Type definitions
72	└── scenes/
73	├── Scene1Intro.tsx # ✅ Created - Empty template
74	├── Scene2Features.tsx # ✅ Created - Empty template
75	├── Scene3Demo.tsx # ✅ Created - Empty template
76	└── Scene4CTA.tsx # ✅ Created - Empty template
77
78	public/
79	├── images/ # ✅ Created - Empty directory
80	├── audio/
81	│ ├── music/ # ✅ Created - Empty directory
82	│ └── sfx/ # ✅ Created - Empty directory
83	└── fonts/ # ✅ Created - Empty directory
84	```
85
86	## File Templates Created
87
88	### Main Composition: `index.tsx`
89	```typescript
90	import { AbsoluteFill, Sequence } from "remotion";
91	import { SCENE_TIMING } from "./constants";
92	import { Scene1Intro } from "./scenes/Scene1Intro";
93	import { Scene2Features } from "./scenes/Scene2Features";
94	import { Scene3Demo } from "./scenes/Scene3Demo";
95	import { Scene4CTA } from "./scenes/Scene4CTA";
96	import type { ProductDemoProps } from "./types";
97
98	export function ProductDemo({}: ProductDemoProps) {
99	return (
100	<AbsoluteFill>
101	{/* TODO: Add composition layout via /remotion-composition */}
102	<Sequence
103	from={SCENE_TIMING.intro.start}
104	durationInFrames={SCENE_TIMING.intro.duration}
105	>
106	<Scene1Intro />
107	</Sequence>
108
109	{/* Additional scenes... */}
110	</AbsoluteFill>
111	);
112	}
113	```
114
115	### Constants: `constants.ts`
116	```typescript
117	// TODO: Define color palette
118	export const COLORS = {
119	// Add colors here
120	} as const;
121
122	// TODO: Configure spring animations via /remotion-animation
123	export const SPRING_CONFIGS = {
124	// Add spring configs here
125	} as const;
126
127	// Scene timing (30fps, 30 seconds total = 900 frames)
128	const FPS = 30;
129
130	export const SCENE_TIMING = {
131	intro: { start: 0, duration: 5 * FPS },
132	features: { start: 5 * FPS, duration: 10 * FPS },
133	demo: { start: 15 * FPS, duration: 10 * FPS },
134	cta: { start: 25 * FPS, duration: 5 * FPS },
135	} as const;
136	```
137
138	### Types: `types.ts`
139	```typescript
140	export interface ProductDemoProps {
141	// Add custom props here
142	}
143
144	export interface SceneProps {
145	// Common scene props
146	}
147	```
148
149	### Scene Template: `scenes/Scene1Intro.tsx`
150	```typescript
151	import { AbsoluteFill } from "remotion";
152
153	export function Scene1Intro() {
154	return (
155	<AbsoluteFill>
156	{/* TODO: Implement scene via /remotion-component-gen */}
157	</AbsoluteFill>
158	);
159	}
160	```
161
162	## Next Steps
163
164	1. Define animations → Run `/remotion-animation` to generate animation configs
165	2. Build composition → Run `/remotion-composition` to structure Sequence layout
166	3. **Implement sc

People who liked this also viewed

6 picks

Type

remotion-scaffold

134installs3forks

View on GitHub

How to install remotion-scaffold?

ncklrs/startup-os-skills/remotion-scaffold

$npx -y skills add ncklrs/startup-os-skills --skill remotion-scaffold

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Remotion Scaffold
2
3	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.
4
5	## What This Skill Does
6
7	Generates project scaffolding for:
8
9	1. Directory structure — Organized folder layout for compositions, scenes, assets
10	2. Configuration files — Base constants.ts, types.ts with empty templates
11	3. Empty scene templates — Placeholder scene components with TODO markers
12	4. Asset directories — Organized folders for images, audio, fonts
13	5. Registration setup — Composition registration in Root.tsx
14
15	## Scope Boundaries
16
17	IN SCOPE:
18	- Creating folder structure
19	- Writing empty file templates
20	- Setting up configuration skeleton
21	- Directory organization patterns
22
23	OUT OF SCOPE:
24	- Animation implementation (use `/remotion-animation`)
25	- Scene component logic (use `/remotion-component-gen`)
26	- Sequence composition (use `/remotion-composition`)
27	- Component generation (use `/remotion-component-gen`)
28
29	## Input/Output Formats
30
31	### Input Format: Project Requirements
32
33	Accepts project setup requirements:
34
35	Natural Language:
36	```
37	Create a new Remotion project scaffold for a 30-second video with 4 scenes.
38	```
39
40	Structured Format:
41	```markdown
42	## Project Requirements
43
44	Project Name: ProductDemo
45	Duration: 30 seconds
46	Frame Rate: 30 fps
47	Dimensions: 1920x1080 (16:9)
48	Number of Scenes: 4 (Intro, Features, Demo, CTA)
49	Asset Types: Images, Audio (music + SFX)
50	```
51
52	### Output Format: SCAFFOLD_MANIFEST.md
53
54	Generates a manifest documenting created structure:
55
56	```markdown
57	# Scaffold Manifest: ProductDemo
58
59	## Status
60	✅ Directory structure created
61	✅ Configuration files generated
62	✅ Scene templates created (empty)
63	⏳ Ready for implementation
64
65	## Generated Structure
66
67	```
68	src/remotion/compositions/ProductDemo/
69	├── index.tsx # ✅ Created - Main composition (empty)
70	├── constants.ts # ✅ Created - Constants template
71	├── types.ts # ✅ Created - Type definitions
72	└── scenes/
73	├── Scene1Intro.tsx # ✅ Created - Empty template
74	├── Scene2Features.tsx # ✅ Created - Empty template
75	├── Scene3Demo.tsx # ✅ Created - Empty template
76	└── Scene4CTA.tsx # ✅ Created - Empty template
77
78	public/
79	├── images/ # ✅ Created - Empty directory
80	├── audio/
81	│ ├── music/ # ✅ Created - Empty directory
82	│ └── sfx/ # ✅ Created - Empty directory
83	└── fonts/ # ✅ Created - Empty directory
84	```
85
86	## File Templates Created
87
88	### Main Composition: `index.tsx`
89	```typescript
90	import { AbsoluteFill, Sequence } from "remotion";
91	import { SCENE_TIMING } from "./constants";
92	import { Scene1Intro } from "./scenes/Scene1Intro";
93	import { Scene2Features } from "./scenes/Scene2Features";
94	import { Scene3Demo } from "./scenes/Scene3Demo";
95	import { Scene4CTA } from "./scenes/Scene4CTA";
96	import type { ProductDemoProps } from "./types";
97
98	export function ProductDemo({}: ProductDemoProps) {
99	return (
100	<AbsoluteFill>
101	{/* TODO: Add composition layout via /remotion-composition */}
102	<Sequence
103	from={SCENE_TIMING.intro.start}
104	durationInFrames={SCENE_TIMING.intro.duration}
105	>
106	<Scene1Intro />
107	</Sequence>
108
109	{/* Additional scenes... */}
110	</AbsoluteFill>
111	);
112	}
113	```
114
115	### Constants: `constants.ts`
116	```typescript
117	// TODO: Define color palette
118	export const COLORS = {
119	// Add colors here
120	} as const;
121
122	// TODO: Configure spring animations via /remotion-animation
123	export const SPRING_CONFIGS = {
124	// Add spring configs here
125	} as const;
126
127	// Scene timing (30fps, 30 seconds total = 900 frames)
128	const FPS = 30;
129
130	export const SCENE_TIMING = {
131	intro: { start: 0, duration: 5 * FPS },
132	features: { start: 5 * FPS, duration: 10 * FPS },
133	demo: { start: 15 * FPS, duration: 10 * FPS },
134	cta: { start: 25 * FPS, duration: 5 * FPS },
135	} as const;
136	```
137
138	### Types: `types.ts`
139	```typescript
140	export interface ProductDemoProps {
141	// Add custom props here
142	}
143
144	export interface SceneProps {
145	// Common scene props
146	}
147	```
148
149	### Scene Template: `scenes/Scene1Intro.tsx`
150	```typescript
151	import { AbsoluteFill } from "remotion";
152
153	export function Scene1Intro() {
154	return (
155	<AbsoluteFill>
156	{/* TODO: Implement scene via /remotion-component-gen */}
157	</AbsoluteFill>
158	);
159	}
160	```
161
162	## Next Steps
163
164	1. Define animations → Run `/remotion-animation` to generate animation configs
165	2. Build composition → Run `/remotion-composition` to structure Sequence layout
166	3. **Implement sc

People who liked this also viewed

6 picks

Type