القائمة
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/BEKO2210/Firstbrain --skill remotionيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
Arquitecto de Soluciones Principal y Consultor Tecnológico de Andru.ia. Diagnostica y traza la hoja de ruta óptima para proyectos de IA en español.
Security audit, hardening, threat modeling (STRIDE/PASTA), Red/Blue Team, OWASP checks, code review, incident response, and infrastructure security for any project.
Ingeniero de Sistemas de Andru.ia. Diseña, redacta y despliega nuevas habilidades (skills) dentro del repositorio siguiendo el Estándar de Diamante.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | remotion |
| description | Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays |
| type | skill |
| created | 2026-02-27T00:00:00.000Z |
| domain | design-creative |
| category | ui-ux |
| risk | unknown |
| source | community |
| tags | ["skill","design-creative","ui-ux","remotion"] |
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.downloadUrlhtmlCode.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/walkthrough/ 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.mp4Use this skill when tackling tasks related to its primary domain or functionality as described above.