What is the stitch-remotion skill?
The stitch-remotion skill, called remotion in the repo, combines the Stitch MCP server with Remotion. An AI coding agent lists a project's screens, downloads their screenshots, writes a screens.json manifest, builds React video components with transitions, zooms and text overlays, and renders an MP4 with the Remotion CLI.
The skill is a folder named remotion inside the stitch-build plugin of Google's stitch-skills repository. Its SKILL.md casts the agent as a video production specialist who turns app designs into smooth walkthrough presentations.
It joins two sources. Stitch supplies the screens and their metadata, and Remotion supplies programmatic video made from React components. The skill needs the Stitch MCP server, Node.js and npm, and either the Remotion MCP server or the Remotion CLI.
How the walkthrough gets built
- The agent runs list_tools to find the Stitch and Remotion prefixes, then calls list_projects with the owned filter if you gave no project ID.
- It calls list_screens, then get_screen for each screen to collect the screenshot URL, dimensions, title and description.
- Screenshots are saved to assets/screens in walkthrough order, and a screens.json manifest records title, description, image path, size and duration.
- ScreenSlide.tsx and WalkthroughComposition.tsx are generated, then previewed in Remotion Studio with npm run dev.
- The video is rendered with npx remotion render, or through the Remotion MCP when it is available.
What you can control in the video
- Transitions come from @remotion/transitions, with fade and slide imports shown in the skill, and zoom effects use spring animation.
- Text overlays cover screen titles, feature callouts, descriptions and a progress indicator.
- Three patterns are described: a simple slide show, a feature highlight with zooms and pointers, and a user flow with numbered steps.
Who the stitch-remotion skill is for
Best for
- Product teams that need a demo clip or design review video from a finished Stitch project.
- Designers who want a repeatable video made from screens instead of a screen recording.
- Developers already comfortable with React, since Remotion compositions are React components.
Not for
- Recording a live app. The video is assembled from Stitch screenshots, not captured from a running product.
- Generating the screens themselves. For that, stitch-loop builds multi-page sites from a prompt.
- Turning screens into code. stitch-react-components is the nearer fit for that job.
- Teams without Node.js, because the render step runs through Remotion's tooling.
Use it with UiChemy
The skill outputs video, not pages. For a real build, UiChemy can carry a design into WordPress through Figma, Composer or AI to WordPress. Click Get Started on uichemy.com. To describe motion in a brief, see animation-vocabulary.
How to install Stitch Remotion Skill: Make Walkthrough Videos from Stitch Screens
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeSet up the Stitch MCP server
Follow the Stitch MCP setup at https://stitch.withgoogle.com/docs/mcp/setup/ so your agent can read project screens.
Install the plugins
For Claude Code, run
npx plugins add google-labs-code/stitch-skills --scope project --target claude-code. For Cursor, use--scope workspace --target cursor. This skill is in the stitch-build plugin.Prepare Remotion
Have Node.js and npm installed and either the Remotion MCP server or the Remotion CLI. If there is no Remotion project, the skill creates one with
npm create video@latest -- --blankin a video folder.Ask for the video
Use a prompt such as the README's example, asking for a walkthrough video of a named Stitch project.
Check that it loaded
Ask for a walkthrough of a small Stitch project. The agent should list the screens, save screenshots under assets/screens, write screens.json and open the composition in Remotion Studio.
Key features
- Project and screen lookupThe agent calls list_projects with the owned filter and list_screens with the numeric project ID, then pulls details for each screen with get_screen.
- Screenshot stagingScreenshots are downloaded with web_fetch or curl into assets/screens, named after each screen and ordered to match the intended flow.
- screens.json manifestA manifest lists each screen's title, description, image path, width, height and duration, so timing and copy are easy to adjust later.
- Modular compositionScreenSlide.tsx shows one screen with zoom and fade, WalkthroughComposition.tsx sequences them, and a config file holds the frame rate, size and total duration.
- Transitions and zoomFade and slide transitions use @remotion/transitions, and zooms use spring animation. The skill's default is 30 frames per second and 3 to 5 seconds per screen.
- Text overlays and hotspotsTitles, descriptions, feature callouts and a progress indicator are added as timed overlays, and the skill includes a pulsing hotspot component for clickable areas.
- Live previewRemotion Studio opens a browser preview through npm run dev, where timing, transitions and text can be refined before rendering.
- Render optionsThe render command is npx remotion render WalkthroughComposition output.mp4, with quality, codec and concurrency flags noted for tuning.
- Voiceover and text extractionAdvanced sections describe adding narration with the Audio component and pulling headings and button labels from each screen's HTML for automatic callouts.
Frequently asked questions
What is the stitch-remotion skill?
It is the remotion skill in the stitch-build plugin of google-labs-code/stitch-skills. It tells an AI coding agent to retrieve screens from a Stitch project and turn them into a Remotion video with transitions, zoom effects and text overlays, previewed in Remotion Studio and rendered to MP4.
How do I install the stitch-remotion skill?
Register the Stitch MCP server, then run the repository's plugin install, for example npx plugins add google-labs-code/stitch-skills with a project scope and your agent as the target. Codex users add the repo as a plugin marketplace. You also need Node.js, npm and Remotion's CLI or MCP.
Does the skill need the Remotion MCP server?
The prerequisites list the Remotion MCP server or the Remotion CLI, so either works. The render step shows the CLI command npx remotion render, and mentions a render call through the Remotion MCP as an alternative when that server is available.
Which AI coding agents work with the skill?
The repository README says the Stitch skills are compatible with agents such as Codex, Antigravity, Gemini CLI, Claude Code and Cursor, with OpenCode through a manual install. Whichever agent you pick must be able to reach the Stitch MCP server and run Node commands.
What goes into the screens.json manifest?
Each screen entry holds an ID, a title, a description, the image path under assets/screens, the width and height, and a duration in seconds. The manifest also carries the project name, and the composition reads it to sequence the slides.
Can I change how long each screen stays on screen?
Yes. The skill defaults to a configurable duration of 3 to 5 seconds per screen, set per entry in the manifest. The best-practices list advises keeping timing consistent unless a particular screen needs emphasis, and previewing in Remotion Studio before the final render.
Does the skill add narration?
It describes voiceover as an advanced option. You generate a script from the screen descriptions, use text to speech or record audio, import it with Remotion's Audio component and match screen timing to the pacing. Narration is not automatic in the basic workflow.