google-labs-code/remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotionYou 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.
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.
Required:
Recommended:
Run list_tools to identify available MCP servers and their prefixes:
stitch: or mcp_stitch: prefixremotion: or mcp_remotion: prefix[stitch_prefix]:list_projects with filter: "view=owned"name field (e.g., projects/13534454087919359824)[stitch_prefix]:list_screens with the project ID (numeric only)name fieldFor each screen:
[stitch_prefix]:get_screen with projectId and screenIdscreenshot.downloadUrl — Visual asset for the videohtmlCode.downloadUrl — Optional: for extracting text/contentwidth, height — Screen dimensions for proper scalingweb_fetch or Bash with curl to download screenshotsassets/screens/{screen-name}.pngremotion.config.ts or package.json with Remotion dependencies npm create video@latest -- --blank
video/ directory cd video
npm install @remotion/transitions @remotion/animated-emoji
Create a modular Remotion composition with these components:
ScreenSlide.tsx — Individual screen display componentimageSrc, title, description, width, heightWalkthroughComposition.tsx — Main video compositionScreenSlide componentsconfig.ts — Video configurationUse Remotion's @remotion/transitions for professional effects:
import {fade} from '@remotion/transitions/fade';
import {slide} from '@remotion/transitions/slide';
spring() animation for smooth zoomAdd contextual information using Remotion's text rendering:
screens.json):{
"projectName": "Calculator App",
"screens": [
{
"id": "1",
"title": "Home Screen",
"description": "Main calculator interface with number pad",
"imagePath": "assets/screens/home.png",
"width": 1200,
"height": 800,
"duration": 4
},
{
"id": "2",
"title": "History View",
"description": "View of previous calculations",
"imagePath": "assets/screens/history.png",
"width": 1200,
"height": 800,
"duration": 3
}
]
}
Create the video components following Remotion best practices:
ScreenSlide.tsx:useCurrentFrame() and spring() for animationsWalkthroughComposition.tsx:<Sequence> componentsremotion.config.ts:Reference Resources:
resources/screen-slide-template.tsx as starting pointresources/composition-checklist.md for completenessexamples/ directory npm run dev
npx remotion render WalkthroughComposition output.mp4
[remotion_prefix]:render with composition details--quality)--codec h264 or h265)--concurrency)Highlight clickable elements or important features:
import {interpolate, useCurrentFrame} from 'remotion';
const Hotspot = ({x, y, label}) => {
const frame = useCurrentFrame();
const scale = spring({
frame,
fps: 30,
config: {damping: 10, stiffness: 100}
});
return (
<div style={{
position: 'absolute',
left: x,
top: y,
transform: `scale(${scale})`
}}>
<div className="pulse-ring" />
<span>{label}</span>
</div>
);
};
Add narration to the walkthrough:
<Audio> componentExtract text from Stitch HTML code for automatic annotations:
htmlCode.downloadUrl for each screenproject/
├── video/ # Remotion project directory
│ ├── src/
│ │ ├── WalkthroughComposition.tsx
│ │ ├── ScreenSlide.tsx
│ │ ├── components/
│ │ │ ├── Hotspot.tsx
│ │ │ └── TextOverlay.tsx
│ │ └── Root.tsx
│ ├── public/
│ │ └── assets/
│ │ └── screens/ # Downloaded Stitch screenshots
│ │ ├── home.png
│ │ └── history.png
│ ├── remotion.config.ts
│ └── package.json
├── screens.json # Screen manifest
└── output.mp4 # Rendered video
Remotion maintains its own Agent Skills that define best practices. Review these for advanced techniques:
npx skills add remotion-dev/skillsKey Remotion skills to leverage:
Basic walkthrough with fade transitions:
Focus on specific UI elements:
Show step-by-step user journey:
| Issue | Solution |
|-------|----------|
| Blurry screenshots | Ensure downloaded images are at full resolution; check screenshot.downloadUrl quality settings |
| Misaligned text | Verify screen dimensions match composition size; adjust text positioning based on actual screen size |
| Choppy animations | Increase frame rate to 60fps; use proper spring configurations with appropriate damping |
| Remotion build fails | Check Node version compatibility; ensure all dependencies are installed; review Remotion docs |
| Timing feels off | Adjust duration per screen in manifest; preview in Remotion Studio; test with actual users |
User prompt:
Look up the screens in my Stitch project "Calculator App" and build a remotion video
that shows a walkthrough of the screens.
Agent workflow:
assets/screens/screens.json manifest with screen metadataScreenSlide.tsx, WalkthroughComposition.tsx)calculator-walkthrough.mp4Take google-labs-code/remotion from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm, npx.
Without those the skill loads but fails at the first command.