skills.rest
firstsun-dev
firstsun-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

remotion

Generate walkthrough videos from Stitch project screens using Remotion compositions.

3|1|Updated Apr 29, 2026
Search Tags:#react#video generation#transitions#screen recording#remotion#walkthrough#stitch
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill remotion-firstsun-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/visual-content/skills/remotion
Command: npx skills add https://github.com/firstsun-dev/skills --skill remotion-firstsun-dev

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. This Skill automates the pipeline from Stitch project screens to a rendered Remotion video with transitions, zoom effects, and text overlays. ## 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. - Remotion composition generation: Creates modular React components (ScreenSlide, WalkthroughComposition) with fade, slide, and zoom transitions plus timed text overlays. - Preview and rendering: Supports previewing in Remotion Studio and rendering 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, 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 the Stitch project name and ask for a Remotion walkthrough video. The agent lists the project screens, downloads screenshots via the Stitch MCP server, generates Remotion React components, and renders the final MP4.

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's WalkthroughComposition example shows transitions configured per screen 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 screen retrieval, and either the Remotion MCP server or Remotion CLI for rendering. A Remotion project is created with npm create video if none exists.

Can I preview the Remotion video before rendering?▼

Yes, run npm run dev inside the video directory to open Remotion Studio in the browser. It lets you 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 Stitch and confirm the composition dimensions match the actual screen dimensions.

Related Skills

Explore More Design & Creative Skills→
tranhoainam298tranhoainam298
1

design-md

Analyzes Stitch project screens and generates a semantic DESIGN.md design system document.

Community
Intermediate
MoizIbnYousafMoizIbnYousaf
31

marketing-demo

Record product demos and walkthrough videos using ply screenshots, ffmpeg stitching, or Remotion compositions.

Community
Intermediate
Abrahan-EagleAbrahan-Eagle
1

remotion

Generate Remotion walkthrough videos from Stitch screen designs.

Community
Advanced
JStaRFilmsJStaRFilms
3

stitch

Orchestrate Stitch design-to-code pipelines converting design artifacts into HTML, React components, and videos.

Community
Advanced