Agent skill · creative production · aiskillstore
remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
Why this skill is useful
Provides specific commands and workflows for integrating Stitch and Remotion to create video compositions that the AI wouldn't reliably generate on its own.
What it needs
Requires node, npm installed locally. About 7k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 listtools to identify available MCP servers and their prefixes: Stitch MCP: Look for stitch: or mcpstitch: prefix Remotion MCP: Look for remotion: or mcpremotion: prefix Step 2: Retrieve Stitch Project Information 1. Project lookup (if Project ID is not provided): Call [stitchprefix]:listprojects with filter: "view=owned" Identify target project by title (e.g., "Calculator App") Extract Project ID from name field (e.g., projects/13534454087919359824) 2. Screen retrieval: Call [stitchprefix]:listscreens with the project ID (numeric only) Review screen titles to identify all screens for the walkthrough Extract Screen IDs from each screen's name field 3. Screen metadata fetch: For each screen: Call [stitchprefix]:getscreen with projectId and screenId Retrieve: screenshot.downloadUrl — Visual asset for the video htmlCode.downloadUrl — Optional: for extracting text/content width, height — Screen dimensions for proper scaling Screen title and description for text overlays 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/remotion