Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
The 'remotion' skill is designed to automate the process of creating professional walkthrough videos from app designs using a combination of Stitch's screen retrieval capabilities and Remotion's programmatic video generation features. By integrating these tools, this skill allows users to create smooth, visually engaging videos that showcase app screens with smooth transitions, zoom effects, and text overlays. It is particularly valuable for teams looking to produce high-quality video content for app demonstrations, presentations, or tutorials without manually editing each video frame by frame.
This skill automates the creation of walkthrough videos by combining Stitch's screen retrieval and Remotion's video generation, enabling users to produce professional-quality videos with smooth transitions, zoom effects, and text overlays.
The main requirements are access to Stitch and Remotion MCP servers, familiarity with Node.js and npm, and a Stitch project with designed screens.
Yes, if you already have a Remotion project set up with the necessary configuration files (like 'remotion.config.ts' or 'package.json'), you can use it directly. If not, you can create a new Remotion project with the provided setup instructions.
The skill uses Remotion's built-in transition effects, such as the 'fade' transition, to create smooth, professional effects between screens.
Yes, the skill requires Node.js, npm, and access to both the Stitch and Remotion MCP servers. A basic understanding of React and Remotion's video capabilities is recommended but not mandatory.
Quick Setup:
.claude/skills/Repository
google-labs-code/stitch-skills