83.3K+Download
Skip to the usage guide
remotionby Google Labs

Remotion Skill.

A Claude Code and Codex skill for motion and video: walkthrough videos from Stitch projects with Remotion transitions and zooms.

  • Motion & Video
  • Video
Download OpenDesignView usage guide
google-labs-code/stitch-skills · plugins/stitch-build/skills/remotion/SKILL.mdSKILL.md
--- name: remotion description: Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays --- ## Prerequisites ## Retrieval and Networking ## Video Composition Strategy ## Execution Steps ## Advanced Features ## File Structure
Front matter and section headings read from the upstream file on 2026-09-14 · 12,764 characters in full

01 What it does

What the remotion Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Turns an existing Stitch project into a walkthrough video. The agent lists Stitch projects and screens, downloads each screen's screenshot.downloadUrl into assets/screens/, records width, height, title and description in a screens.json manifest, then builds a Remotion composition from ScreenSlide.tsx and WalkthroughComposition.tsx using fade, slide and spring-driven zoom transitions plus text overlays.

It is aimed at designers and developers who already have designed screens in Stitch and are comfortable with Node.js and React, since Remotion renders React components. Frames default to 30 fps, screens to 3-5 seconds, and the result is previewed in Remotion Studio before rendering an MP4.

What it produces

  • A screens.json manifest holding project name, screen ids, titles, descriptions, image paths, dimensions and per-screen duration
  • Remotion component files generated for the walkthrough
  • Updated Remotion project configuration
See the example prompt ↗

How It Works

  1. 01
    Locate the MCP Servers

    Run list_tools and identify the Stitch and Remotion server prefixes so later calls can be addressed correctly.

  2. 02
    Pull Screens from Stitch

    Find the project, list its screens, then fetch each screen's metadata to get the screenshot URL, dimensions and description.

  3. 03
    Stage the Screenshots

    Download each screenshot with web_fetch or curl into a staging directory, ordered the way the walkthrough should flow.

  4. 04
    Scaffold the Remotion Project

    Reuse an existing Remotion project if one is present, otherwise create a blank TypeScript project in a video/ directory.

  5. 05
    Build the Composition

    Write ScreenSlide.tsx for per-screen animation, WalkthroughComposition.tsx to sequence and transition, plus config.ts for fps and dimensions.

  6. 06
    Preview, Then Render

    Iterate in Remotion Studio on timing and spring values, then render the final file through the CLI or the Remotion render tool.

02 Find your fit

When to Use the remotion Skill

Use the remotion skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • You already have a Stitch project containing designed screens to walk through
  • You want specific UI elements called out with animated pointers and hotspot rings
  • You are building a step-by-step user journey video rather than a plain slide show
  • You are already familiar with Remotion's video capabilities and want its idioms respected

Know the Boundaries

  • You do not have access to the Stitch MCP Server, which is a hard prerequisite
  • Nobody on the team knows React, since Remotion composes React components
  • Screenshots cannot be pulled at full resolution, which the file names as the cause of blurry output

What to Provide

  • Stitch project identifierEither a project ID already known, or a title the agent can look up when the ID is not supplied.
  • Which screens belong in the videoThe project's screen list is reviewed so all screens for the walkthrough are identified before downloading.
  • Screen dimensionsWidth and height of each screen are needed so the composition scales the screenshot correctly.
  • Titles and descriptionsScreen titles and descriptions become the contextual text shown over each frame.
  • Intended walkthrough orderAssets are organised in the order the viewer should encounter them, not the order Stitch returns them.

03 Inside the skill

Rules the remotion Skill Gives Claude Code and Codex

8 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Screens Default to 3-5 Seconds

    Each screen holds for a configurable duration, with 3-5 seconds per screen as the stated default.

  2. Compose at 30 Fps

    config.ts sets the frame rate, and the default is 30 fps.

  3. Go to 60fps When Motion Stutters

    If animations look choppy, raise the frame rate to 60fps and tune spring damping rather than changing the design.

  4. Zoom with Spring()

    Zoom effects should be driven by spring animations applied to the important UI elements being emphasised.

  5. Keep the Native Aspect Ratio

    Use the real Stitch screen dimensions or scale them proportionally, never stretch the layout.

  6. Drive the Build from a Manifest

    Screen data lives in a manifest file so ordering, titles and durations can be updated without touching component code.

  7. Hold Timing Steady

    Screen display duration stays consistent across the walkthrough unless a specific screen is being emphasised.

  8. Start with Fades

    Begin with basic fade transitions and only layer on the complex animations once the simple cut works.

04 Put it to work

Install remotion in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add remotion to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion

Generic skills CLI form for plugins/stitch-build/skills/remotion/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Adapt this prompt with your own content and constraints, then run it in Claude Code or Codex.

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

Source: SKILL.md example (verbatim).

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Preview the composition in Remotion Studio before committing to a render
  • Work through the bundled completion checklist
  • Check that text overlays land at the right moment in each screen
  • Confirm the screen dimensions match the composition size and reposition text against the real screen size
  • Make sure overlay text stays readable throughout, not just on the first frame
  • If motion reads as choppy, test the 60fps route with revised spring damping

In OpenDesign remotion is bundled: Plugins → Skills, pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
Google Labs
Repository
github.com/google-labs-code/stitch-skills Branch main
Skill file
plugins/stitch-build/skills/remotion/SKILL.md Content checksum recorded at verification; commit 0337446
License
Apache-2.0 From LICENSE.
Repository stars
8,304 GitHub snapshot taken 2026-09-14 for the whole google-labs-code/stitch-skills repository, which contains 12 skills in this catalog. Not a rating or usage count for remotion.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. OverviewWhat the Stitch plus Remotion walkthrough workflow produces overall
  2. PrerequisitesRequired MCP servers, Node.js, npm, and a Stitch project with screens
  3. Retrieval and NetworkingDiscovering MCP prefixes, looking up projects and screens, downloading assets
  4. Video Composition StrategyArchitecture of ScreenSlide, WalkthroughComposition and config, plus transitions and overlays
  5. Execution StepsGather assets, create the manifest, generate components, preview, render
  6. Advanced FeaturesInteractive hotspots, voiceover integration, and automatic text extraction from Stitch HTML
  7. File StructureExpected directory layout of the video project and manifest
  8. Integration with Remotion SkillsInstalling Remotion's own agent skills for animation and performance guidance
  9. Common PatternsThree recipes: simple slide show, feature highlight, and user flow
  10. TroubleshootingFixes for blurry screenshots, misaligned text, choppy animation, build failures, timing
  11. Best PracticesAspect ratio, consistent timing, readable text, smooth transitions, previewing, asset optimisation
  12. Tips for SuccessStart simple, reuse Remotion patterns, use manifests, preview often, accessibility, platform sizing
The Skill's Own Description
“Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays”

Front-matter description from SKILL.md. The full file is about 12,764 characters. Read the full file on GitHub.

06 Before you install

Questions About the remotion Skill

Answers come from the SKILL.md as read on 2026-09-14, not from a recorded run.

What do I need installed before this can run?

Access to the Stitch MCP Server and either the Remotion MCP Server or the Remotion CLI, plus Node.js and npm, and a Stitch project that already has designed screens. Familiarity with Remotion and React components is recommended rather than required.

Do I have to use the Remotion MCP server, or is the CLI enough?

The CLI is enough. After previewing in Remotion Studio you can render with npx remotion render WalkthroughComposition output.mp4, or call the Remotion render tool with composition details if that server is available.

How long does each screen appear on screen?

Three to five seconds per screen by default, stored as a per-screen duration in the manifest so you can tune individual screens. Duration is set in the manifest and previewed in Remotion Studio.

Remotion

Run remotion on a Real Motion and Video Task.

The remotion skill ships inside OpenDesign. Download the app, pick the skill in Plugins → Skills, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill remotion