Stitch Remotion Walkthrough Builder
Turn Stitch app screens into polished walkthrough videos with transitions, zoom effects, and contextual overlays.
The documentation discloses the main Stitch project lookup, screen retrieval, screenshot and HTML downloads, and Remotion rendering flow, but it grants broad Bash, Write, web_fetch, and wildcard MCP access. There is no user-confirmation gate, sensitive-data guidance, domain restriction, rollback, or output-cleanup policy, so substantial points are deducted.
The workflow, directory layout, manifest format, download script, and troubleshooting guidance are described, and the script fails on HTTP errors and removes incomplete output. However, there are no tests covering this skill's key paths, the referenced Remotion components and some resources are not included in the supplied evidence, and MCP discovery and rendering depend on the surrounding environment; static evidence therefore supports only a moderate score.
The audience, prerequisites, and common Stitch-to-video scenarios are reasonably clear, with slideshow, feature-highlight, and user-flow patterns. Non-fit boundaries, trigger precision, permission requirements, and platform compatibility are under-specified. The core workflow depends on Stitch, Remotion, Node, and external downloads, with no Chinese-language or mainland-China network reachability support, so points are deducted.
The skill has layered documentation, a README, a JSON example, a composition checklist, troubleshooting notes, a license, and a security policy. It lacks clear versioning, changelog information, named maintenance responsibility, update commitments, and dependency locking; referenced templates and implementation examples are also incomplete in the supplied evidence, preventing full marks.
The skill defines useful outputs including screens.json, Remotion components, and a rendered walkthrough video, with transitions, zooming, overlays, and preview guidance. Nevertheless, no representative finished output or key component implementation is verifiable from the files, so direct usability, output completeness, and comparative benefit remain uncertain; the static cap also limits the score.
The supplied skill files, README, example manifest, download script, and checklist provide some auditable primary material. There is no skill-specific test suite or independent execution evidence; the available CI validates react-components rather than remotion, and referenced external documentation cannot be corroborated from the supplied material. Only limited static evidence is therefore credited.
- Before use, confirm Stitch project permissions, permitted download domains, and the output directory to limit unintended effects from Bash, web_fetch, and Write.
- No Remotion component template or skill-specific automated tests are supplied; manually inspect generated components, asset paths, transition timing, and the rendered result.
- Stitch, Remotion MCP, Node/npm, and external download services may be network- or region-dependent; mainland-China users should verify reachability and prepare alternatives.
- Do not expose sensitive Stitch HTML, screenshots, or signed download URLs in logs, videos, or third-party services.
What does this skill do, and when should you use it?
This skill retrieves screens from Stitch projects and orchestrates them into Remotion walkthrough videos. It guides an agent through downloading screenshots, creating a screen manifest, building React/Remotion compositions, and configuring timing. Videos can include fades, slides, zooms, titles, descriptions, progress indicators, and interactive hotspots. It is a fit for developers or product teams that already have Stitch-designed screens and need a presentable product or user-flow video.
Uses Stitch MCP operations to find projects, list screens, and fetch screen metadata and download URLs; downloads screenshots with web_fetch or Bash/curl; creates a screens.json manifest and Remotion project structure; builds React/Remotion components for sequencing screens, transitions, zoom effects, and text overlays; previews the composition in Remotion Studio; and renders formats such as MP4 or WebM through the Remotion CLI or Remotion MCP.
- A frontend developer needs a product walkthrough from a multi-screen Stitch design.
- A product team wants to demonstrate a sequential signup, browsing, or settings flow.
- A design engineer needs zooms, arrows, hotspots, and explanatory overlays for key interface features.
- A content producer wants to derive narration from screen descriptions and synchronize it with the walkthrough.
What are this skill's strengths and limitations?
- Covers the workflow from Stitch screen retrieval through Remotion rendering.
- Provides concrete patterns for manifests, composition architecture, transitions, zooming, and overlays.
- Describes extension paths for hotspots, dynamic text extraction, and voiceover synchronization.
- Follows the Agent Skills open standard and is intended for use with multiple coding agents.
- Requires access to the Stitch MCP Server and either the Remotion MCP Server or Remotion CLI.
- The source provides no automated test suite, platform support matrix, or performance benchmarks.
- The skill supplies the production workflow but not prebuilt project screens or video assets.
- Advanced features such as text-to-speech, HTML text extraction, and hotspots require additional implementation.
How do you install this skill?
This skill is part of the google-labs-code/stitch-skills collection. For selective installation, run: npx skills add google-labs-code/stitch-skills. The README also documents installing the Stitch marketplace and the stitch-build plugin for Codex; it does not provide a standalone command for installing only this skill. Before use, configure and run the Stitch MCP Server, and provide Node.js, npm, and either the Remotion MCP Server or Remotion CLI.
How do you use this skill?
With a Stitch project available, use a prompt such as: "Look up the screens in my Stitch project \"Calculator App\" and build a remotion video that shows a walkthrough of the screens." The workflow finds the project, retrieves and downloads screens, creates the manifest and Remotion components, then previews and renders the result. An example render command is: npx remotion render WalkthroughComposition output.mp4.
How does this skill compare with similar options?
The source names the Remotion MCP Server and Remotion CLI as alternative execution methods, but does not compare this skill with other video-generation tools.