remotion

Name: remotion
Author: google-labs-code

bygoogle-labs-code· 30 skills

Installs

35k

Stars

7.8k

Forks

950

How to install remotion?

google-labs-code/stitch-skills/remotion

$npx -y skills add google-labs-code/stitch-skills --skill remotion

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/remotion"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# Stitch to Remotion Walkthrough Videos
2
3	You are a video production specialist focused on creating engaging walkthrough videos from app designs. You combine Stitch's screen retrieval capabilities with Remotion's programmatic video generation to produce smooth, professional presentations.
4
5	## Overview
6
7	This skill enables you to create walkthrough videos that showcase app screens with professional transitions, zoom effects, and contextual text overlays. The workflow retrieves screens from Stitch projects and orchestrates them into a Remotion video composition.
8
9	## Prerequisites
10
11	Required:
12	- Access to the Stitch MCP Server
13	- Access to the Remotion MCP Server (or Remotion CLI)
14	- Node.js and npm installed
15	- A Stitch project with designed screens
16
17	Recommended:
18	- Familiarity with Remotion's video capabilities
19	- Understanding of React components (Remotion uses React)
20
21	## Retrieval and Networking
22
23	### Step 1: Discover Available MCP Servers
24
25	Run `list_tools` to identify available MCP servers and their prefixes:
26	- Stitch MCP: Look for `stitch:` or `mcp_stitch:` prefix
27	- Remotion MCP: Look for `remotion:` or `mcp_remotion:` prefix
28
29	### Step 2: Retrieve Stitch Project Information
30
31	1. Project lookup (if Project ID is not provided):
32	- Call `[stitch_prefix]:list_projects` with `filter: "view=owned"`
33	- Identify target project by title (e.g., "Calculator App")
34	- Extract Project ID from `name` field (e.g., `projects/13534454087919359824`)
35
36	2. Screen retrieval:
37	- Call `[stitch_prefix]:list_screens` with the project ID (numeric only)
38	- Review screen titles to identify all screens for the walkthrough
39	- Extract Screen IDs from each screen's `name` field
40
41	3. Screen metadata fetch:
42	For each screen:
43	- Call `[stitch_prefix]:get_screen` with `projectId` and `screenId`
44	- Retrieve:
45	- `screenshot.downloadUrl` — Visual asset for the video
46	- `htmlCode.downloadUrl` — Optional: for extracting text/content
47	- `width`, `height` — Screen dimensions for proper scaling
48	- Screen title and description for text overlays
49
50	4. Asset download:
51	- Use `web_fetch` or `Bash` with `curl` to download screenshots
52	- Save to a staging directory: `assets/screens/{screen-name}.png`
53	- Organize assets in order of the intended walkthrough flow
54
55	### Step 3: Set Up Remotion Project
56
57	1. Check for existing Remotion project:
58	- Look for `remotion.config.ts` or `package.json` with Remotion dependencies
59	- If exists, use the existing project structure
60
61	2. Create new Remotion project (if needed):
62	```bash
63	npm create video@latest -- --blank
64	```
65	- Choose TypeScript template
66	- Set up in a dedicated `video/` directory
67
68	3. Install dependencies:
69	```bash
70	cd video
71	npm install @remotion/transitions @remotion/animated-emoji
72	```
73
74	## Video Composition Strategy
75
76	### Architecture
77
78	Create a modular Remotion composition with these components:
79
80	1. `ScreenSlide.tsx` — Individual screen display component
81	- Props: `imageSrc`, `title`, `description`, `width`, `height`
82	- Features: Zoom-in animation, fade transitions
83	- Duration: Configurable (default 3-5 seconds per screen)
84
85	2. `WalkthroughComposition.tsx` — Main video composition
86	- Sequences multiple `ScreenSlide` components
87	- Handles transitions between screens
88	- Adds text overlays and annotations
89
90	3. `config.ts` — Video configuration
91	- Frame rate (default: 30 fps)
92	- Video dimensions (match Stitch screen dimensions or scale appropriately)
93	- Total duration calculation
94
95	### Transition Effects
96
97	Use Remotion's `@remotion/transitions` for professional effects:
98
99	- Fade: Smooth cross-fade between screens
100	```tsx
101	import {fade} from '@remotion/transitions/fade';
102	```
103
104	- Slide: Directional slide transitions
105	```tsx
106	import {slide} from '@remotion/transitions/slide';
107	```
108
109	- Zoom: Zoom in/out effects for emphasis
110	- Use `spring()` animation for smooth zoom
111	- Apply to important UI elements
112
113	### Text Overlays
114
115	Add contextual information using Remotion's text rendering:
116
117	1. Screen titles: Display at the top or bottom of each frame
118	2. Feature callouts: Highlight specific UI elements with animated pointers
119	3. Descriptions: Fade in descriptive text for each screen
120	4. Progress indicator: Show current screen position in walkthrough
121
122	## Execution Steps
123
124	### Step 1: Gather Screen Assets
125
126	1. Identify target Stitch project
127	2. List all screens in the project
128	3. Download screenshots for each screen
129	4. Organize in order of walkthrough flow
130	5. Create a manifest file (`screens.json`):
131
132	```json
133	{
134	"projectName": "Calculator App",
135	"screens": [
136	{
137	"id": "1",
138	"title": "Home Screen",
139	"description": "Main calculator interface with number pad",
140	"imagePath": "assets/screens/home.png",
141	"width": 1200,
142	"height": 800,
143	"duration": 4
144	},
145	{
146	"id": "2",
147	"title": "History View",
148	"description": "View of previous calculations",
149	"imagePath": "assets/screens/history.png",
150	"width": 1200,
151	"height": 800,
152	"duration": 3
153	}
154	]
155	}
156	```
157
158	### Step 2: Generate Remotion Components
159
160	Create the video components following Remotion best practices:
161
162	1. Create `ScreenSlide.tsx`:
163	- Use `useCurrentFrame()` and `spring()` for animations
164	- Implement zoom and fade effects
165	- Add text overlays with proper timing
166
167	2. Create `WalkthroughComposition.tsx`:
168	- Import screen manifest
169	- Sequence screens with `<Sequence>` components
170	- Apply transitions between screens
171	- Calculate proper timing and offsets
172
173	3. Update `remotion.config.ts`:
174	- Set composition ID
175	- Configure video dimensions
176	- Set frame rate and duration
177
178	Reference Resources:
179	- Use `resources/screen-slide-template.tsx` as starting point
180	- Follow `resources/composition-checklist.md` for completeness
181	- Review examples in `examples/` directory
182
183	### Step 3: Preview and Refine
184
185	1. Start Remotion Studio:
186	```bash
187	npm run dev
188	```
189	- Opens browser-based preview
190	- Allows real-time editing and refinement
191
192	2. Adjust timing:
193	- Ensure each screen has appropriate display duration
194	- Verify transitions are smooth
195	- Check text overlay timing
196
197	3. Fine-tune animations:
198	- Adjust spring configurations for zoom effects
199	- Modify easing functions for transitions
200	- Ensure text is readable at all times
201
202	### Step 4: Render Video
203
204	1. Render using Remotion CLI:
205	```bash
206	npx remotion render WalkthroughComposition output.mp4
207	```
208
209	2. Alternative: Use Remotion MCP (if available):
210	- Call `[remotion_prefix]:render` with composition details
211	- Specify output format (MP4, WebM, etc.)
212
213	3. Optimization options:
214	- Set quality level (`--quality`)
215	- Configure codec (`--codec h264` or `h265`)
216	- Enable parallel rendering (`--concurrency`)
217
218	## Advanced Features
219
220	### Interactive Hotspots
221
222	Highlight clickable elements or important features:
223
224	```tsx
225	import {interpolate, useCurrentFrame} from 'remotion';
226
227	const Hotspot = ({x, y, label}) => {
228	const frame = useCurrentFrame();
229	const scale = spring({
230	frame,
231	fps: 30,
232	config: {damping: 10, stiffness: 100}
233	});
234
235	return (
236	<div style={{
237	position: 'absolute',
238	left: x,
239	top: y,
240	transform: `scale(${scale})`
241	}}>
242	<div className="pulse-ring" />
243	<span>{label}</span>
244	</div>
245	);
246	};
247	```
248
249	### Voiceover Integration
250
251	Add narration to the walkthrough:
252
253	1. Generate voiceover script from screen descriptions
254	2. Use text-to-speech or record audio
255	3. Import audio into Remotion with `<Audio>` component
256	4. Sync screen timing with voiceover pacing
257
258	### Dynamic Text Extraction
259
260	Extract text from Stitch HTML code for automatic annotations:
261
262	1. Download `htmlCode.downloadUrl` for each screen
263	2. Parse HTML to extract key text elements (headings, buttons, labels)
264	3. Generate automatic callouts for important UI elements
265	4. Add to composition as timed text overlays
266
267	## File Structure
268
269	```
270	project/
271	├── video/ # Remotion project directory
272	│ ├── src/
273	│ │ ├── WalkthroughComposition.tsx
274	│ │ ├── ScreenSlide.tsx
275	│ │ ├── components/
276	│ │ │ ├── Hotspot.tsx
277	│ │ │ └── TextOverlay.tsx
278	│ │ └── Root.tsx
279	│ ├── public/
280	│ │ └── assets/
281	│ │ └── screens/ # Downloaded Stitch screenshots
282	│ │ ├── home.png
283	│ │ └── history.png
284	│ ├── remotion.config.ts
285	│ └── package.json
286	├── screens.json # Screen manifest
287	└── output.mp4 # Rendered video
288	```
289
290	## Integration with Remotion Skills
291
292	Remotion maintains its own Agent Skills that define best practices. Review these for advanced techniques:
293
294	- Repository: https://github.com/remotion-dev/remotion/tree/main/packages/skills
295	- Installation: `npx skills add remotion-dev/skills`
296
297	Key Remotion skills to leverage:
298	- Animation timing and easing
299	- Composition architecture patterns
300	- Performance optimization
301	- Audio synchronization
302
303	## Common Patterns
304
305	### Pattern 1: Simple Slide Show
306
307	Basic walkthrough with fade transitions:
308	- 3-5 seconds per screen
309	- Cross-fade transitions
310	- Bottom text overlay with screen title
311	- Progress bar at top
312
313	### Pattern 2: Feature Highlight
314
315	Focus on specific UI elements:
316	- Zoom into specific regions
317	- Animated circles/arrows pointing to features
318	- Slow-motion emphasis on key interactions
319	- Side-by-side before/after comparisons
320
321	### Pattern 3: User Flow
322
323	Show step-by-step user journey:
324	- Sequential screen flow with directional slides
325	- Numbered steps overlay
326	- Highlight user actions (clicks, taps)
327	- Connect screens with animated paths
328
329	## Troubleshooting
330
331	\| Issue \| Solution \|
332	\|-------\|----------\|
333	\| Blurry screenshots \| Ensure downloaded images are at full resolution; check `screenshot.downloadUrl` quality settings \|
334	\| Misaligned text \| Verify screen dimensions match composition size; adjust text positioning based on actual screen size \|
335	\| Choppy animations \| Increase frame rate to 60fps; use proper spring configurations with appropriate damping \|
336	\| Remotion build fails \| Check Node version compatibility; ensure all dependencies are installed; review Remotion docs \|
337	\| Timing feels off \| Adjust duration per screen in manifest; preview in Remotion Studio; test with actual users \|
338
339	## Best Practices
340
341	1. Maintain aspect ratio: Use actual Stitch screen dimensions or scale proportionally
342	2. Consistent timing: Keep screen display duration consistent unless emphasizing specific screens
343	3. Readable text: Ensure sufficient contrast; use appropriate font sizes; avoid cluttered overlays
344	4. Smooth transitions: Use spring animations for natural motion; avoid jarring cuts
345	5. Preview thoroughly: Always preview in Remotion Studio before final render
346	6. Optimize assets: Compress images appropriately; use efficient formats (PNG for UI, JPG for photos)
347
348	## Example Usage
349
350	User prompt:
351	```
352	Look up the screens in my Stitch project "Calculator App" and build a remotion video
353	that shows a walkthrough of the screens.
354	```
355
356	Agent workflow:
357	1. List Stitch projects → Find "Calculator App" → Extract project ID
358	2. List screens in project → Identify all screens (Home, History, Settings)
359	3. Download screenshots for each screen → Save to `assets/screens/`
360	4. Create `screens.json` manifest with screen metadata
361	5. Generate Remotion components (`ScreenSlide.tsx`, `WalkthroughComposition.tsx`)
362	6. Preview in Remotion Studio → Refine timing and transitions
363	7. Render final video → `calculator-walkthrough.mp4`
364	8. Report completion with video preview link
365
366	## Tips for Success
367
368	- Start simple: Begin with basic fade transitions before adding complex animations
369	- Follow Remotion patterns: Leverage Remotion's official skills and documentation
370	- Use manifest files: Keep screen data organized in JSON for easy updates
371	- Preview frequently: Use Remotion Studio to catch issues early
372	- Consider accessibility: Add captions; ensure text is readable; use clear visuals
373	- Optimize for platform: Match video dimensions to target platform (YouTube, social media, etc.)
374
375	## References
376
377	- Stitch Documentation: https://stitch.withgoogle.com/docs/
378	- Remotion Documentation: https://www.remotion.dev/docs/
379	- Remotion Skills: https://www.remotion.dev/docs/ai/skills
380	- Remotion MCP: https://www.remotion.dev/docs/ai/mcp
381	- Remotion Transitions: https://www.remotion.dev/docs/transitions

6 picks

Type

Run `npx skills use "https://github.com/google-labs-code/stitch-skills" --skill "google-labs-code/stitch-skills/remotion"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the skills in "https://github.com/google-labs-code/stitch-skills" that are relevant to the current task. Run `npx skills add "https://github.com/google-labs-code/stitch-skills"` and select the relevant skills, then follow their instructions.

remotion

How to install remotion?

Related

remotion

How to install remotion?

Related