Skip to content
Get packs

Stitch to Remotion Walkthrough Videos

Turn Stitch app-design screens into a narrated-style walkthrough video with Remotion

Source Download skill
Repository
google-labs-code/stitch-skills
Stars
8,657
Licence
Apache-2.0
Files
5 files

What it does

Once installed, the agent can take the screens from a Google Stitch design project, download their screenshots, and assemble them into a short animated walkthrough video using Remotion, a tool for building videos with code. It adds zoom, fade and slide transitions and text titles or descriptions over each screen, then renders an MP4 or WebM file. The skill mainly guides the steps and code structure; the agent does the actual work by calling Stitch and Remotion tools and running shell commands.

Great for

  • Designers who want a quick shareable preview video of an app design
  • Developers prototyping product demos from Stitch projects
  • Marketers producing feature walkthrough clips from existing screens

Skip it if

  • Users who need a final production video with real app footage or recorded interaction, since it only uses static screenshots (the reason: it animates still images)
  • Anyone wanting to run it without Node.js, npm, and Stitch and Remotion access, since setup will fail without them
  • Sensitive or unreleased designs shared with a third-party-linked workflow without checking data handling first (the reason: the skill downloads design assets from the web and writes them to disk)

Try asking

  • “Make a walkthrough video of my Calculator App Stitch project, four seconds per screen”
  • “Create a Remotion video showing the home and history screens with title overlays”
  • “Download all screens from my onboarding project and render a 30 fps MP4 walkthrough”
Step-by-step guide: how to use Stitch to Remotion Walkthrough VideosInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 5 original files, the Apache-2.0 licence and an attribution note.

    remotion.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip remotion.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip remotion.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Provide the Stitch project ID up front to skip the lookup step and reduce tool calls
  • Review the generated screens.json manifest and the durations before rendering to save time
  • Check the Remotion Studio preview (npm run dev) before the final render

What's inside

  • examples/screens.json
  • README.md
  • resources/composition-checklist.md
  • scripts/download-stitch-asset.sh
  • SKILL.md

Redistributed unmodified from google-labs-code/stitch-skills under the Apache-2.0 licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.