Skip to content
mcp/skillhub

Agent Skill

Remotion skill

remotiongoogle-labs-code/stitch-skillsplugins/stitch-build/skills/remotion/SKILL.md

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

8.5kApache-2.0

always on

22 tokname + description

once used

2,946 tokSKILL.md body

bundled files

61 scripts

repo stars

8.5kGitHub

Install the Remotion skill

Skills CLI (Claude Code, Codex, Cursor and others)

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

Claude Code, by hand (all projects)

git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git /tmp/stitch-skills
mkdir -p ~/.claude/skills
cp -R /tmp/stitch-skills/plugins/stitch-build/skills/remotion ~/.claude/skills/remotion

For one project only, copy the folder into .claude/skills/ in that project instead. The agent picks it up when a task matches its description.

What it costs your context

Agent Skills load in three steps. Tokens counted with the o200k tokenizer; your model's count will differ a little.

WhenWhat loadsCost
Every sessionName and description22 tok
When the agent uses itThe SKILL.md instructions2,946 tok
Only if opened6 bundled files (14 KB)varies

Until it is used, remotion costs about 62× less than the median MCP server we measured (1,362 tokens on every turn). Installing all 16 skills from google-labs-code/stitch-skills would load 801 tokens of descriptions. Skills vs MCP study

Checks

  • Ships scripts the agent can run. Read them before installing.

Pre-approved tools (allowed-tools): stitch*:*, remotion*:*, Bash, Read, Write, web_fetch. The agent can use these without asking while the skill is active.

Checked 2026-10-22 · method

What's inside

The headings of its SKILL.md. Read the full file on GitHub.

  • Stitch to Remotion Walkthrough Videos
  • Overview
  • Prerequisites
  • Retrieval and Networking
  • Step 1: Discover Available MCP Servers
  • Step 2: Retrieve Stitch Project Information
  • Step 3: Set Up Remotion Project
  • Video Composition Strategy
  • Architecture
  • Transition Effects
  • Text Overlays
  • Execution Steps
  • Step 1: Gather Screen Assets
  • Step 2: Generate Remotion Components
  • Step 3: Preview and Refine
  • Step 4: Render Video
  • Advanced Features
  • Interactive Hotspots
  • Voiceover Integration
  • Dynamic Text Extraction
  • File Structure
  • Integration with Remotion Skills
  • Common Patterns
  • Pattern 1: Simple Slide Show

More skills from google-labs-code/stitch-skills

All skills in this repo
  1. design-mdgoogle-labs-code/stitch-skills

    Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

    64k17 tok idle · 1,679 in use
  2. enhance-promptgoogle-labs-code/stitch-skills

    Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

    8.5k42 tok idle · 1,531 in use
  3. react-vite-dashboardgoogle-labs-code/stitch-skills

    Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).

    8.5k37 tok idle · 820 in use
  4. shadcn-uigoogle-labs-code/stitch-skills

    Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization, and best practices.

    8.5k131 tok idle · 2,134 in use
  5. site-mdgoogle-labs-code/stitch-skills

    Analyze a project description or site requirements and synthesize a project constitution into SITE.md for the Stitch Build Loop

    8.5k24 tok idle · 661 in use
  6. stitch-loopgoogle-labs-code/stitch-skills

    Teaches agents to iteratively build websites using Stitch with an autonomous baton-passing loop pattern

    8.5k22 tok idle · 2,613 in use
  7. stitch::code-to-designgoogle-labs-code/stitch-skills

    Convert frontend code (Vite, React, Angular, Vue, etc.) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload. **ALWAYS** use this skill when the user's intent is to move existing web apps or React/Angular/Vue components into Stitch (e.g., requests to "save", "migrate", or "upload"). You must use this skill even for simple "save" operations, as it is the only way to ensure the design system is extracted and assets are properly linked.

    8.5k115 tok idle · 718 in use
  8. stitch::extract-design-mdgoogle-labs-code/stitch-skills

    Extract a comprehensive design system (DESIGN.md) directly from frontend source code — React, Vue, Svelte, Angular, plain HTML/CSS, or any web framework. Analyzes component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a rich, Stitch-compatible design system document. Use this skill whenever the user wants to reverse-engineer a design system from an existing codebase, audit the visual language of a project, extract design tokens from source files, or understand the styling patterns in a frontend repo — even if they just say "what does this app look like?" or "pull out the design from this code."

    8.5k140 tok idle · 3,068 in use