remotion

Generate walkthrough videos from Stitch project screens using Remotion compositions.

Updated Jun 27, 2026
One-click install
npx skills add https://github.com/khulnasoft-bot/scalify --skill remotion-khulnasoft-bot
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/khulnasoft-bot/scalify/tree/main/skills/plugins/stitch-build/skills/remotion
Command: npx skills add https://github.com/khulnasoft-bot/scalify --skill remotion-khulnasoft-bot

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @remotion/transitions, @remotion/animated-emoji, and includes scripts (resource) and references (resource) components.

What problem does it solve? Turning static app design screens into polished walkthrough videos normally requires manual video editing, but this Skill automates the pipeline from Stitch screen retrieval to a rendered Remotion MP4. ## Core Features & Use Cases - Automated Screen Retrieval: Lists Stitch projects and screens via the Stitch MCP server, then downloads screenshots and metadata for each screen. - Programmatic Video Composition: Generates Remotion React components with fade, slide, and zoom transitions plus timed text overlays and optional hotspots. - Rendering Pipeline: Previews compositions in Remotion Studio and renders final MP4 output via the Remotion CLI or MCP server. - Use Case: Ask the agent to look up the screens in your Stitch project "Calculator App" and it will download the screenshots, build a Remotion composition with transitions, and render a walkthrough video. ## Quick Start Ask the agent to look up the screens in your Stitch project and build a Remotion walkthrough video of them.

Frequently Asked Questions about remotion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a walkthrough video from Stitch designs?▼

Provide your Stitch project name and the agent lists its screens via the Stitch MCP server, downloads each screenshot, builds a Remotion composition with transitions and text overlays, then renders an MP4 video.

How to add transitions between screens in Remotion?▼

Use the @remotion/transitions package with TransitionSeries, applying fade, slide, or zoom presentations between Sequence components. The skill generates these transitions automatically based on each screen's transitionType in the manifest.

What do I need to run Remotion video generation?▼

You need Node.js and npm installed, access to the Stitch MCP server for retrieving screens, and either the Remotion MCP server or Remotion CLI for rendering. A Stitch project with designed screens is also required.

Can I preview the Remotion video before rendering?▼

Yes, run npm run dev inside the video directory to open Remotion Studio, a browser-based preview where you can scrub the timeline, adjust timing, and refine animations before the final render.

Why are my Remotion video screenshots blurry?▼

Blurry screenshots usually mean the downloaded images are not at full resolution. Verify the screenshot.downloadUrl quality from the Stitch get_screen response and ensure the composition dimensions match the actual screen dimensions.

Does the skill support voiceover in walkthrough videos?▼

Yes, you can generate a narration script from screen descriptions, produce audio with text-to-speech, and import it into Remotion using the Audio component, syncing screen timing with the voiceover pacing.