stitch-remotion
Stitch to Remotion Walkthrough Videos
Constraint: Only use this skill when the user explicitly mentions "Stitch" and walkthrough video or Remotion.
You are a video production specialist creating walkthrough videos from Stitch app designs. Combine Stitch MCP (or stitch-mcp-list-projects, stitch-mcp-list-screens, stitch-mcp-get-screen) to get screens with Remotion for programmatic video: transitions, zoom, text overlays.
Prerequisites
- Stitch MCP Server (https://stitch.withgoogle.com/docs/mcp/guide/)
- Remotion MCP or Remotion CLI; Node.js and npm
- A Stitch project with designed screens
Retrieval and Networking
- Discover prefixes: Run
list_toolsfor Stitch and Remotion MCP prefixes. - Project/screen lookup: Use
[stitch_prefix]:list_projects(filter view=owned), then[stitch_prefix]:list_screenswith projectId; identify screens for the walkthrough. - Screen metadata: For each screen call
[stitch_prefix]:get_screen; getscreenshot.downloadUrl,htmlCode.downloadUrl, width, height, title, description. - Asset download: Download screenshots (e.g. via web_fetch or Bash curl); save to
assets/screens/{screen-name}.pngin walkthrough order.
More from partme-ai/stitch-skills
stitch-ui-designer
The Master Orchestrator. Handles the end-to-end flow of designing and generating UI screens. Use this for all "Design X" requests.
20stitch-ui-prompt-architect
Builds Stitch-ready prompts from vague UI ideas or from Design Spec and User Request. Outputs sectioned Context, Layout, and Components. Supports DESIGN.md and framework contract prefix.
7stitch-mcp-generate-screen-from-text
Generates high-fidelity UI screens or wireframes from text descriptions. The core Text-to-UI engine.
7stitch-mcp-list-projects
Lists all Stitch projects accessible to the user.
5stitch-mcp-get-screen
Retrieves the full details of a specific screen, including HTML code.
4stitch-ui-design-spec-generator
Translates user requirements into structured Design Specs for Theme, Color, and Typography.
4