1# Stitch-Remotion Video Walkthrough Skill
2 
3Generate professional walkthrough videos from Stitch app designs using Remotion.
4 
5## What This Skill Does
6 
7This skill bridges Stitch (UI design platform) and Remotion (programmatic video library) to automatically create walkthrough videos showcasing app screens with:
8 
9- **Smooth transitions**: Cross-fades, slides, and zoom effects
10- **Text overlays**: Screen titles, descriptions, and feature callouts
11- **Professional animations**: Spring-based natural motion
12- **Customizable timing**: Control display duration per screen
13 
14## Prerequisites
15 
161. **Stitch MCP Server**: Access to retrieve screens from Stitch projects
172. **Node.js**: For running Remotion
183. **Remotion**: Either Remotion MCP Server or Remotion CLI
19 
20## Example Use Case
21 
22**User Request:**
23> "Look up the screens in my Stitch project 'Calculator App' and build a remotion video that shows a walkthrough of the screens."
24 
25**What Happens:**
261. Agent retrieves all screens from the Stitch project
272. Downloads screenshots for each screen
283. Creates a Remotion composition with transitions
294. Generates video with smooth animations and text overlays
305. Renders final MP4 video
31 
32## Key Features
33 
34- **Automated asset retrieval** from Stitch projects
35- **Modular Remotion components** for easy customization
36- **Multiple transition styles** (fade, slide, zoom)
37- **Text overlay system** for annotations
38- **Configurable timing** per screen
39- **Professional rendering** with quality optimization
40 
41## Installation
42 
43Install this skill using:
44 
45```bash
46npx skills add google-labs-code/stitch-skills --skill remotion --global
47```
48 
49## File Structure
50 
51When using this skill, the agent will create:
52 
53```
54project/
55├── video/                      # Remotion project
56│   ├── src/
57│   │   ├── WalkthroughComposition.tsx
58│   │   ├── ScreenSlide.tsx
59│   │   └── components/
60│   ├── public/assets/screens/  # Stitch screenshots
61│   └── remotion.config.ts
62├── screens.json                # Screen manifest
63└── output.mp4                  # Final video
64```
65 
66## How It Works
67 
681. **Discovery**: Identifies Stitch and Remotion MCP servers
692. **Retrieval**: Fetches screens and metadata from Stitch project
703. **Asset Download**: Downloads screenshots for each screen
714. **Composition**: Generates Remotion React components
725. **Preview**: Opens Remotion Studio for refinement (optional)
736. **Render**: Produces final video file
74 
75## Integration Points
76 
77**With Stitch:**
78- Uses Stitch MCP to list projects and screens
79- Downloads screenshots and HTML code
80- Extracts screen metadata (title, dimensions)
81 
82**With Remotion:**
83- Creates TypeScript/React components
84- Configures composition settings
85- Renders video using Remotion CLI or MCP
86 
87## Advanced Capabilities
88 
89- **Dynamic text extraction**: Parse Stitch HTML to auto-generate annotations
90- **Interactive hotspots**: Highlight clickable elements
91- **Voiceover integration**: Sync narration with screen transitions
92- **Multiple video patterns**: Slide show, feature highlight, user flow
93 
94## Related Skills
95 
96- **design-md**: Extract design system from Stitch projects (useful for consistent branding in videos)
97- **react-components**: Convert Stitch designs to React (if you want interactive demos instead of videos)
98 
99## Learn More
100 
101See the full [SKILL.md](./SKILL.md) for detailed instructions, troubleshooting, and best practices.
102 
103## License
104 
105This is not an officially supported Google product.
106