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