partme-ai/stitch-remotion
skills/stitch-skills/stitch-remotion/SKILL.md
Generate walkthrough videos from Stitch projects using Remotion. Use when the user wants a video demo, walkthrough, or presentation of Stitch-designed screens. Retrieves screenshots via Stitch MCP, builds a Remotion composition with transitions (fade, slide), zoom animations, and text overlays per screen.
$ install --global
skillsauthnpx skillsauth add partme-ai/full-stack-skills stitch-remotionInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 9:08 AM16.1s4 files scanned
SKILL.md
- name:
- stitch-remotion
- description:
- Generate walkthrough videos from Stitch projects using Remotion. Use when the user wants a video demo, walkthrough, or presentation of Stitch-designed screens. Retrieves screenshots via Stitch MCP, builds a Remotion composition with transitions (fade, slide), zoom animations, and text overlays per screen.
- allowed-tools:
- stitch*:*, remotion*:*, Bash, Read, Write, web_fetch
Stitch to Remotion Walkthrough Videos
Constraint: Only use this skill when the user explicitly mentions "Stitch" and walkthrough video or Remotion.
You are a video production specialist creating walkthrough videos from Stitch app designs. Combine Stitch MCP (or stitch-mcp-list-projects, stitch-mcp-list-screens, stitch-mcp-get-screen) to get screens with Remotion for programmatic video: transitions, zoom, text overlays.
Prerequisites
- Stitch MCP Server (https://stitch.withgoogle.com/docs/mcp/guide/)
- Remotion MCP or Remotion CLI; Node.js and npm
- A Stitch project with designed screens
Retrieval and Networking
- Discover prefixes: Run
list_toolsfor Stitch and Remotion MCP prefixes. - Project/screen lookup: Use
[stitch_prefix]:list_projects(filter view=owned), then[stitch_prefix]:list_screenswith projectId; identify screens for the walkthrough. - Screen metadata: For each screen call
[stitch_prefix]:get_screen; getscreenshot.downloadUrl,htmlCode.downloadUrl, width, height, title, description. - Asset download: Download screenshots (e.g. via web_fetch or Bash curl); save to
assets/screens/{screen-name}.pngin walkthrough order. - Manifest: Create
screens.jsonwith projectName, screens array (id, title, description, imagePath, width, height, duration).
Video Composition Strategy
- ScreenSlide.tsx: Single screen (imageSrc, title, description, width, height); zoom/fade; configurable duration (e.g. 3–5 s).
- WalkthroughComposition.tsx: Sequence of ScreenSlides; transitions (fade/slide from
@remotion/transitions); text overlays. - Config: Frame rate (e.g. 30 fps), dimensions (match Stitch or scale), total duration.
Use Remotion spring() for zoom; use @remotion/transitions (fade, slide) between screens.
Common Patterns (align with official)
- Simple slide show: 3–5 s per screen, cross-fade, bottom text overlay (screen title), progress bar at top.
- Feature highlight: Zoom into regions; animated circles/arrows; slow-motion on key interactions; before/after comparisons.
- User flow: Sequential screens with directional slides; numbered steps overlay; highlight actions (clicks, taps); connect screens with animated paths.
Optional: Voiceover and dynamic text
- Voiceover: Generate script from screen descriptions; use TTS or recorded audio; sync screen timing with narration.
- Dynamic text: Download
htmlCode.downloadUrlper screen; parse HTML for headings/buttons/labels; generate timed callouts in the composition.
Execution Steps
- Gather assets: List Stitch project → list screens → get_screen for each → download screenshots → build screens.json.
- Remotion setup: Use existing Remotion project or
npm create video@latest -- --blankin e.g.video/; install@remotion/transitionsetc. - Build components: ScreenSlide.tsx (useCurrentFrame, spring, zoom/fade); WalkthroughComposition.tsx (Sequence, manifest); update remotion.config.ts.
- Preview:
npm run devin video/; adjust timing and transitions. - Render:
npx remotion render WalkthroughComposition output.mp4(or use Remotion MCP if available).
Integration with This Repo
- Stitch screens: Use stitch-mcp-list-projects, stitch-mcp-list-screens, stitch-mcp-get-screen to resolve projectId/screenId and get download URLs.
- Design consistency: If DESIGN.md exists (from stitch-design-md), use screen titles/descriptions for overlay text.
File Structure
project/
├── video/
│ ├── src/
│ │ ├── WalkthroughComposition.tsx
│ │ ├── ScreenSlide.tsx
│ │ └── Root.tsx
│ ├── public/assets/screens/ # Stitch screenshots
│ ├── remotion.config.ts
│ └── package.json
├── screens.json # Screen manifest
└── output.mp4
Troubleshooting
| Issue | Solution | |-------|----------| | Blurry screenshots | Use full-resolution screenshot URLs | | Misaligned text | Match composition size to screen dimensions | | Choppy animations | Increase fps; tune spring damping | | Build fails | Check Node/Remotion version; install deps |
Keywords
English: Stitch, Remotion, walkthrough, video, screenshots, transitions.
中文关键词： Stitch、Remotion、走查视频、转场。
References
- Remotion docs
- Remotion transitions
- Remotion Skills — animation, composition patterns, performance; install with
npx skills add remotion-dev/skills. - Remotion MCP — programmatic render and preview.
- Stitch MCP
- Examples
- Screens Manifest Example
- Full templates in google-labs-code/stitch-skills.
Related Skills
partme-ai/uniapp-project
development
VerifiedTrustedCommunity
Provides per-component and per-API examples with cross-platform compatibility details for uni-app, covering built-in components, uni-ui components, and APIs (network, storage, device, UI, navigation, media). Use when the user needs official uni-app components or APIs, wants per-component examples with doc links, or needs platform compatibility checks.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-project-creator
tools
VerifiedTrustedCommunity
Creates new uni-app projects via the official CLI or HBuilderX with Vue 2/Vue 3 template selection, manifest.json and pages.json configuration, and directory structure setup. Use when the user wants to scaffold a new uni-app project, initialize project files with a single command, or set up the development environment.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-plugin
tools
VerifiedTrustedCommunity
Browses, installs, configures, and manages plugins from the uni-app plugin market (ext.dcloud.net.cn) including component plugins, API plugins, and template plugins with dependency handling. Use when the user needs to find and install uni-app plugins, configure plugin settings, manage plugin dependencies, or integrate third-party components.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-native-plugin
tools
VerifiedTrustedCommunity
Develops native Android and iOS plugins for uni-app including module creation, JavaScript-to-native communication, and plugin packaging for distribution. Use when the user needs to build custom native modules, extend uni-app with native capabilities (camera, Bluetooth, sensors), or create publishable native plugins.
456SKILL.mdUpdated Jun 4, 2026