wallacedobbs428/remotion

Stitch to Remotion Walkthrough Videos

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.

Overview

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.

Prerequisites

Required:

• Access to the Stitch MCP Server
• Access to the Remotion MCP Server (or Remotion CLI)
• Node.js and npm installed
• A Stitch project with designed screens

Recommended:

• Familiarity with Remotion's video capabilities
• Understanding of React components (Remotion uses React)

Retrieval and Networking

Step 1: Discover Available MCP Servers

Run list_tools to identify available MCP servers and their prefixes:

• Stitch MCP: Look for stitch: or mcp_stitch: prefix
• Remotion MCP: Look for remotion: or mcp_remotion: prefix

Step 2: Retrieve Stitch Project Information

1. Project lookup: Call [stitch_prefix]:list_projects with filter: "view=owned"
2. Screen retrieval: Call [stitch_prefix]:list_screens with the project ID
3. Screen metadata fetch: Get screenshot.downloadUrl, htmlCode.downloadUrl, width, height
4. Asset download: Save to assets/screens/{screen-name}.png

Step 3: Set Up Remotion Project

1. Check for existing Remotion project
2. Create new if needed: npm create video@latest -- --blank
3. Install dependencies: npm install @remotion/transitions @remotion/animated-emoji

Video Composition Strategy

Architecture

1. ScreenSlide.tsx — Individual screen display with zoom/fade
2. WalkthroughComposition.tsx — Main composition sequencing slides
3. config.ts — Frame rate (30fps default), dimensions, duration

Transition Effects

• Fade: import {fade} from '@remotion/transitions/fade';
• Slide: import {slide} from '@remotion/transitions/slide';
• Zoom: spring() animation for smooth zoom emphasis

Text Overlays

• Screen titles, feature callouts, fade-in descriptions, progress indicator

Execution Steps

1. Gather Screen Assets — Identify project, list screens, download screenshots, create manifest
2. Generate Remotion Components — Create ScreenSlide, WalkthroughComposition, update config
3. Preview and Refine — npm run dev for Remotion Studio preview
4. Render Video — npx remotion render WalkthroughComposition output.mp4

Common Patterns

Simple Slide Show

3-5 seconds per screen, cross-fade, bottom text overlay, progress bar

Feature Highlight

Zoom into regions, animated circles/arrows, slow-motion emphasis

User Flow

Sequential screens with directional slides, numbered steps, highlighted actions

File Structure

project/
├── video/
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   └── components/
│   ├── public/assets/screens/
│   ├── remotion.config.ts
│   └── package.json
├── screens.json
└── output.mp4

Best Practices

1. Maintain aspect ratio
2. Consistent timing unless emphasizing specific screens
3. Sufficient contrast for text readability
4. Use spring animations for natural motion
5. Preview thoroughly in Remotion Studio before render
6. Compress images appropriately

References

• Stitch Documentation
• Remotion Documentation
• Remotion Skills
• Remotion Transitions