skilld
All skills
google-labs-code avatar

/remotion

@27e0dc0 official
by Google Labs Codegoogle-labs-code/stitch-skills8.4k stars
1,105

Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays

Ask your Agent

Use this Skill: https://skilld.dev/gh/google-labs-code/stitch-skills/remotion

This session only. Nothing lands on disk.

README.md

≈875 tokens on demand. Your agent reads this file only when SKILL.md points to it.

Stitch-Remotion Video Walkthrough Skill

Generate professional walkthrough videos from Stitch app designs using Remotion.

What This Skill Does

This skill bridges Stitch (UI design platform) and Remotion (programmatic video library) to automatically create walkthrough videos showcasing app screens with:

  • Smooth transitions: Cross-fades, slides, and zoom effects
  • Text overlays: Screen titles, descriptions, and feature callouts
  • Professional animations: Spring-based natural motion
  • Customizable timing: Control display duration per screen

Prerequisites

  1. Stitch MCP Server: Access to retrieve screens from Stitch projects
  2. Node.js: For running Remotion
  3. Remotion: Either Remotion MCP Server or Remotion CLI

Example Use Case

User Request:

"Look up the screens in my Stitch project 'Calculator App' and build a remotion video that shows a walkthrough of the screens."

What Happens:

  1. Agent retrieves all screens from the Stitch project
  2. Downloads screenshots for each screen
  3. Creates a Remotion composition with transitions
  4. Generates video with smooth animations and text overlays
  5. Renders final MP4 video

Key Features

  • Automated asset retrieval from Stitch projects
  • Modular Remotion components for easy customization
  • Multiple transition styles (fade, slide, zoom)
  • Text overlay system for annotations
  • Configurable timing per screen
  • Professional rendering with quality optimization

Installation

Install this skill using:

npx skills add google-labs-code/stitch-skills --skill remotion --global

File Structure

When using this skill, the agent will create:

project/
├── video/                      # Remotion project
│   ├── src/
│   │   ├── WalkthroughComposition.tsx
│   │   ├── ScreenSlide.tsx
│   │   └── components/
│   ├── public/assets/screens/  # Stitch screenshots
│   └── remotion.config.ts
├── screens.json                # Screen manifest
└── output.mp4                  # Final video

How It Works

  1. Discovery: Identifies Stitch and Remotion MCP servers
  2. Retrieval: Fetches screens and metadata from Stitch project
  3. Asset Download: Downloads screenshots for each screen
  4. Composition: Generates Remotion React components
  5. Preview: Opens Remotion Studio for refinement (optional)
  6. Render: Produces final video file

Integration Points

With Stitch:

  • Uses Stitch MCP to list projects and screens
  • Downloads screenshots and HTML code
  • Extracts screen metadata (title, dimensions)

With Remotion:

  • Creates TypeScript/React components
  • Configures composition settings
  • Renders video using Remotion CLI or MCP

Advanced Capabilities

  • Dynamic text extraction: Parse Stitch HTML to auto-generate annotations
  • Interactive hotspots: Highlight clickable elements
  • Voiceover integration: Sync narration with screen transitions
  • Multiple video patterns: Slide show, feature highlight, user flow

Related Skills

  • design-md: Extract design system from Stitch projects (useful for consistent branding in videos)
  • react-components: Convert Stitch designs to React (if you want interactive demos instead of videos)

Learn More

See the full SKILL.md for detailed instructions, troubleshooting, and best practices.

License

This is not an officially supported Google product.

Source: SKILL.md on GitHub

Third-party checks

No alerts16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill is safe. It automates the generation of walkthrough videos by retrieving design assets from Stitch and processing them through the Remotion programmatic video framework. It follows standard developer workflows, uses trusted cloud storage for assets, and leverages official libraries for video production.

  • Socket16d

    No alerts

  • Snyk16d

    Risk: LOW · No issues

  • Runlayer7mo

    1/7 files flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at 27e0dc0. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub 2 days ago.

Steadyupdated 5 months ago

Capability

What it can do
Runs commands Reads files Edits files
All 6 allowed tools
stitch*:*remotion*:*BashReadWriteweb_fetch

Topics

README badge

README badge for google-labs-code/stitch-skills/remotion

What it does

Generates walkthrough videos from Stitch design project screens using Remotion, with configurable transitions (fade, slide, zoom), text overlays, and animated hotspots. Downloads screenshots from Stitch via MCP, creates a React-based Remotion composition, and renders to MP4 with frame-by-frame control.

Generated from the current SKILL.md.

Frequently asked

Does this work with any design tool, or just Stitch?
This skill is specific to Stitch projects. It retrieves screens via the Stitch MCP Server and converts them into Remotion videos.
What do I need installed to use this skill?
You need Node.js and npm, access to both Stitch and Remotion MCP Servers, and a Stitch project with designed screens.
Can I add voiceover or narration to the generated videos?
Yes. The skill supports audio integration via Remotion's `<Audio>` component; you can generate voiceover from screen descriptions or record manually and sync it with screen timing.
What video formats can be rendered?
Remotion supports MP4 and WebM, with configurable codecs (H.264, H.265) and quality settings via the CLI or Remotion MCP.
Does this automatically extract and overlay text from the Stitch screens?
The skill can optionally parse HTML code from Stitch screens to extract key text elements for automatic callouts, but text overlay setup is manual by default.

Generated from the current SKILL.md. These answers refresh after source changes.