Generate Walkthrough Videos from App Screens

This skill produces walkthrough videos from screens in a Stitch project using Remotion. It retrieves screen assets and metadata, orders them into a user flow, creates a programmatic video composition, previews the result, and renders a video. The presentation can include fades, directional slides, zoom emphasis, titles, descriptions, feature callouts, and progress indicators.

Retrieval starts by discovering the available Stitch and Remotion tool prefixes. If the project identifier is missing, the workflow lists owned projects and selects the intended title. It then lists screens and fetches each screen's screenshot URL, optional HTML URL, dimensions, title, and description. Images are downloaded into a staging directory and ordered for the walkthrough.

A screens.json manifest stores the screen identifiers, text, image paths, dimensions, and display durations. ScreenSlide.tsx handles individual screens and animations, while WalkthroughComposition.tsx sequences them and manages transitions and annotations. Configuration defines frame rate, dimensions, and total duration.

Use it when an existing Stitch design needs a video presentation, feature highlight, or sequential user journey. A simple slideshow uses cross-fades and titles; a feature presentation emphasizes regions and comparisons; a user-flow presentation uses ordered steps and visual action indicators.

The workflow requires access to Stitch MCP, Remotion MCP or CLI, Node.js, npm, and a project with designed screens. An existing Remotion project should be reused when available. Missing inputs, permissions, or success criteria require clarification, and the output needs preview and environment-specific validation.

Inputs include the Stitch project, selected screens, desired order, per-screen duration, target dimensions, and any annotation or narration requirements. Outputs include downloaded screen assets, the manifest, React composition components, video configuration, and the rendered video. The CLI render example is:

npx remotion render WalkthroughComposition output.mp4

Remotion Studio provides a browser preview for checking screen timing, transitions, spring animations, and overlay readability. A pacing baseline is three to five seconds per screen and 30 frames per second, adjusted for emphasis and smoothness. Screen aspect ratios should be preserved when scaling to the intended platform.

Optional hotspots add animated markers for important elements. Narration can be generated from descriptions or recorded separately, imported as audio, and synchronized with screen pacing. Downloaded HTML can supply headings, labels, and button text for timed callouts. Captions, contrast, suitable font sizes, and restrained overlays support readability.

Troubleshooting covers low-resolution screenshots, text misalignment, choppy animation, dependency or Node compatibility problems, and awkward pacing. The workflow checks original dimensions, adjusts positioning and spring settings, and previews changes before final rendering. Assets can be optimized with suitable image formats and compression.

Stitch MCP supplies projects, screens, and downloadable visual or HTML assets. Remotion uses React, TypeScript, Sequence-based timing, useCurrentFrame, spring, and text or audio components. The transition package supplies fade and slide effects; setup also names @remotion/animated-emoji. Rendering can use the CLI or MCP with options for output format, codec, quality, and concurrency.

Supporting resources include a screen-slide template, a composition checklist, walkthrough examples, and Remotion's official skills for timing, architecture, performance, and audio synchronization.

It suits people presenting app designs through a video walkthrough. It is useful when the existing screens should become a consistent presentation with controlled timing, clear annotations, and a reusable composition.