How to use the Stitch to Remotion Walkthrough Videos agent skill

What is an agent skill and what does this one do?

An agent skill is a folder of instructions and supporting files that an AI agent loads when it needs to handle a particular kind of task. This skill is named remotion and is designed for building walkthrough videos from app designs.

Once installed, the agent can retrieve the screens of a Google Stitch project, download their screenshots, and assemble them into a walkthrough. The video uses Remotion, a tool for building videos with code, and adds zoom, fade and slide transitions plus text titles and descriptions over each screen. The output is an MP4 or WebM file.

• Retrieves screens and screenshots from a Stitch project
• Arranges screens in walkthrough order with a manifest file (screens.json)
• Adds fade, slide and zoom effects and text overlays
• Renders the finished video with the Remotion CLI or Remotion MCP Server

Install the remotion skill from the ZIP or the Claude apps

Download the skill ZIP from this page and unzip it. There are two ways to make it available to your agent.

For Claude Code, place the unzipped folder in ~/.claude/skills/ to make it available everywhere, or in a project's .claude/skills/ folder to make it available only in that project.

In the Claude apps, you can upload the skill instead. Open Settings, go to Capabilities, then Skills, and upload the skill there.

• Personal install: ~/.claude/skills/
• Project install: .claude/skills/ inside your project folder
• Claude apps: Settings → Capabilities → Skills

Check the requirements before you start

The skill does not work on its own. It depends on access to Stitch and Remotion, and on several local tools. Setup will fail if these are missing, so confirm them first.

• Access to the Stitch MCP Server
• Access to the Remotion MCP Server, or the Remotion CLI
• Node.js and npm installed
• A Stitch project with designed screens
• npm packages @remotion/transitions and @remotion/animated-emoji
• curl, used by the download script
• Network access, because the skill downloads screenshots from the web

How do you trigger the skill with a natural request?

You do not need special syntax. Describe the Stitch project by its title and ask for a walkthrough video. The agent then looks up the project, lists its screens and builds the video.

If you already know the project ID, you can include it, which skips the project lookup step. Otherwise the agent searches your owned projects by title.

• Look up the screens in my Stitch project 'Calculator App' and build a remotion video that shows a walkthrough of the screens.
• Make a short walkthrough video of my Calculator App design in Stitch with titles on each screen.
• Render a remotion walkthrough in MP4 from my Stitch project 'Calculator App'.

What happens during a walkthrough build?

The skill follows a fixed sequence. The agent first discovers which MCP servers are available, then retrieves the project and screen data from Stitch. It downloads each screenshot into a staging folder and writes a screens.json manifest that lists the title, description, image path, dimensions and display duration for each screen.

Next it sets up or reuses a Remotion project in a video/ directory, creates the ScreenSlide and WalkthroughComposition components, and previews the result in Remotion Studio. When the timing looks right, it renders the file.

• Project and screen lookup through the Stitch MCP tools
• Download of screenshots into assets/screens/
• Manifest file screens.json with per-screen duration (the default in the example is 3 to 5 seconds)
• Preview with npm run dev, then render with npx remotion render

Safety notes: scripts and network access

This skill runs scripts and uses the network. It downloads design assets from web addresses and writes them to disk, and it runs shell commands such as npm and npx. The skill's allowed tools include Bash, Read, Write and web_fetch.

If your Stitch designs are sensitive or unreleased, check how the Stitch and Remotion workflow handles your data before you run it. Review the scripts/download-stitch-asset.sh file and the commands the agent proposes before approving them.

• Runs scripts: yes (including scripts/download-stitch-asset.sh)
• Uses network: yes
• Writes downloaded files into the project folder

Tips for better walkthrough videos

Give the screens a clear order and descriptive titles, because the agent uses titles and descriptions as on-screen text. Check the screens.json manifest before rendering so the timing and dimensions are right. Use the resources/composition-checklist.md file to confirm the composition is complete.

Preview in Remotion Studio first. Adjust spring settings for the zoom effects and confirm text stays readable on every frame. Rendering with --quality, --codec and --concurrency gives you control over file size and speed.

• Name screens clearly so the overlays make sense
• Use the checklist in resources/composition-checklist.md
• Start with the examples/ folder as a reference
• Preview before rendering