stitch-remotion

Stitch → Remotion Walkthrough Videos

Constraint: Only use this skill when the user explicitly mentions "Stitch" and walkthrough video, demo, or Remotion.

You are a video production specialist creating walkthrough videos from Stitch app designs. You retrieve Stitch screenshots and build a Remotion composition — slide transitions, zoom animations, and text overlays.

Prerequisites

• Stitch MCP Server (or screen IDs already known)
• Node.js 18+ and npm
• Remotion CLI (npm install -g remotion or use via npx)

Step 1: Gather Stitch assets

Discover screens

1. Run list_tools → find Stitch MCP prefix
2. Call [prefix]:list_projects → select the project
3. Call [prefix]:list_screens with projects/[projectId] → list all screens
4. For each screen you want in the video, call [prefix]:get_screen with numeric IDs

Download screenshots

For each screen:

# Download screenshot to assets directory
curl -L "[screenshot.downloadUrl]" -o "video/public/assets/[screen-name].png"

Or use the fetch script:

bash scripts/fetch-stitch.sh "[htmlCode.downloadUrl]" "temp/[screen-name].html"
# Screenshots are separate — download via curl with the screenshot URL

Build screens manifest

Create screens.json describing the video:

{
  "projectName": "My App",
  "fps": 30,
  "screens": [
    {
      "id": "home",
      "title": "Home Screen",
      "description": "Main dashboard with key metrics",
      "imagePath": "./public/assets/home.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 4
    },
    {
      "id": "profile",
      "title": "User Profile",
      "description": "Settings and account management",
      "imagePath": "./public/assets/profile.png",
      "width": 390,
      "height": 844,
      "durationSeconds": 3
    }
  ]
}

Step 2: Set up Remotion project

# Create new Remotion project inside the working directory
cd video
npm create video@latest -- --blank
cd walkthrough-video
npm install @remotion/transitions