remotion

1# Stitch to Remotion Walkthrough Videos
2 
3You 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 
7This 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 
25Run `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 
311. **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 
362. **Screen retrieval**:
37…