القائمة
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
| 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