メニュー
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Converts Stitch designs into modular Vite and React components, or syncs/updates existing React components to align with the latest Stitch designs, using system-level networking and AST-based validation.
Convert Stitch HTML designs to React Native components, or syncs/updates existing native components to align with the latest Stitch designs, using StyleSheet.
Convert frontend code (Vite, React, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.
Manage design systems in Stitch using MCP tools. Includes retrieval of assets, creating/updating design systems in Stitch, and applying them to screens.
Upload local assets (images, mockups, extracted HTML, design markdown) to a Stitch project. ALWAYS use this skill when you need to upload visual assets, HTML pages, or design docs to Stitch, particularly when direct MCP tool calls fail or truncate due to base64 token limits.
Extract self-contained static HTML from a built web application or React components by inlining CSS and images. Use this skill whenever you need to capture a specific UI state, share a static version of a page, or prepare assets for Stitch upload, even if the user just asks to 'save the HTML' or 'mock the view'.
| name | remotion |
| description | Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays |
| allowed-tools | ["stitch*:*","remotion*:*","Bash","Read","Write","web_fetch"] |
You 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: prefixProject lookup (if Project ID is not provided):
[stitch_prefix]:list_projects with filter: "view=owned"name field (e.g., projects/13534454087919359824)Screen retrieval:
[stitch_prefix]:list_screens with the project ID (numeric only)name fieldScreen metadata fetch: For 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 scalingAsset download:
web_fetch or Bash with curl to download screenshotsassets/screens/{screen-name}.pngCheck for existing Remotion project:
remotion.config.ts or package.json with Remotion dependenciesCreate new Remotion project (if needed):
npm create video@latest -- --blank
video/ directoryInstall dependencies:
cd video
npm install @remotion/transitions @remotion/animated-emoji
Create a modular Remotion composition with these components:
ScreenSlide.tsx — Individual screen display component
imageSrc, title, description, width, heightWalkthroughComposition.tsx — Main video composition
ScreenSlide componentsconfig.ts — Video configuration
Use Remotion's @remotion/transitions for professional effects:
Fade: Smooth cross-fade between screens
import {fade} from '@remotion/transitions/fade';
Slide: Directional slide transitions
import {slide} from '@remotion/transitions/slide';
Zoom: Zoom in/out effects for emphasis
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:
Create ScreenSlide.tsx:
useCurrentFrame() and spring() for animationsCreate WalkthroughComposition.tsx:
<Sequence> componentsUpdate remotion.config.ts:
Reference Resources:
resources/screen-slide-template.tsx as starting pointresources/composition-checklist.md for completenessexamples/ directoryStart Remotion Studio:
npm run dev
Adjust timing:
Fine-tune animations:
Render using Remotion CLI:
npx remotion render WalkthroughComposition output.mp4
Alternative: Use Remotion MCP (if available):
[remotion_prefix]:render with composition detailsOptimization options:
--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.mp4