skills.rest
LGJ-Jonathan
LGJ-JonathanOFFICIAL
Explore all skills by this author →
GitHub

remotion

Generate walkthrough videos from Stitch project screens using Remotion compositions.

Updated Mar 26, 2026
Search Tags:#react#video generation#transitions#screen recording#remotion#walkthrough#stitch
One-click install
npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill remotion-lgj-jonathan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills/tree/main/remotion
Command: npx skills add https://github.com/LGJ-Jonathan/Jonathan_Global_Claude_Skills --skill remotion-lgj-jonathan

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @remotion/transitions, @remotion/animated-emoji.

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 retrieving Stitch project screens to rendering a Remotion video with transitions, zoom effects, and text overlays. ## Core Features & Use Cases - Stitch Screen Retrieval: Lists projects and screens via the Stitch MCP server, downloads screenshots and metadata, and organizes them into a manifest file. - Remotion Composition Generation: Creates React-based video components (ScreenSlide, WalkthroughComposition) with fade, slide, and zoom transitions plus timed text overlays. - Rendering & Preview: Previews compositions in Remotion Studio and renders final MP4/WebM output via the Remotion CLI or MCP server. - Use Case: Given a Stitch project like "Calculator App", automatically produce a narrated walkthrough video showing each screen with smooth transitions and feature callouts. ## Quick Start Look up the screens in my Stitch project and build a Remotion walkthrough video with transitions and text overlays.

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 screens?▼

Retrieve the Stitch project ID, list its screens, download each screenshot, and build a screens.json manifest. Then generate Remotion components that sequence the screens with transitions and render the composition to MP4.

How to add transitions between screens in Remotion?▼

Use the @remotion/transitions package, which provides fade, slide, and other presentation effects. Wrap sequenced scenes in TransitionSeries and apply spring-based animations for zoom and emphasis.

Does Remotion require React knowledge to build videos?▼

Yes, Remotion compositions are React components using hooks like useCurrentFrame and spring for animations. Basic familiarity with React and TypeScript is recommended, though templates reduce the learning curve.

Why are my Remotion video screenshots blurry?▼

Blurry output usually means the downloaded screenshots are not at full resolution. Verify the screenshot downloadUrl quality from Stitch and ensure the composition dimensions match the original screen dimensions.

Can I add voiceover narration to a Remotion walkthrough video?▼

Yes, generate a voiceover script from screen descriptions, produce audio via text-to-speech or recording, and import it with Remotion's Audio component. Sync screen timing with the narration pacing.

Related Skills

Explore More Design & Creative Skills→
google-labs-codegoogle-labs-code
8.0k

remotion

Automate walkthrough video creation from Stitch designs using Remotion.

Official
Advanced
inference-shinference-sh
688

ai-marketing-videos

Generate marketing videos with Veo, Seedance, Wan, and Kokoro.

Official
Advanced
Pixazo-AIPixazo-AI

voxcpm

Generates speech and cloned voices from text via the Openbmb VoxCPM2 API on Pixazo.

Official
Intermediate
cdubiel08cdubiel08
2

record-demo

Record screen and narration demos and attach them to GitHub issues.

Community
Intermediate