skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

remotion

Generate walkthrough videos from Stitch project screens using Remotion compositions.

1|Updated Aug 17, 2025
Search Tags:#react#video generation#transitions#screen recording#remotion#walkthrough#stitch
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill remotion-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/remotion
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill remotion-ratnesh-maurya

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, but this Skill automates the pipeline from Stitch screen retrieval to a rendered Remotion video. ## Core Features & Use Cases - Stitch Screen Retrieval: Lists projects and screens via the Stitch MCP server, downloads screenshots, and builds a screens.json manifest. - Remotion Composition Generation: Creates ScreenSlide and WalkthroughComposition React components with fade, slide, and zoom transitions plus text overlays. - Preview and Render: Previews 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 produce a walkthrough video with smooth transitions and screen title overlays. ## Quick Start Look up the screens in my Stitch project and build a Remotion walkthrough video showing each screen with transitions and titles.

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

List your Stitch projects and screens via the Stitch MCP server, download each screen's 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 transition effects. Combine them with spring() animations for zoom effects and wrap screens in Sequence components to control timing.

Does this workflow require the Remotion MCP server?▼

No, the Remotion MCP server is optional. You can use the Remotion CLI instead, running npx remotion render with your composition ID to produce the final video file.

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 width and height.

Can I add voiceover narration to a Remotion walkthrough?▼

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 durations with the narration pacing.

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
firstsun-devfirstsun-dev
3

remotion

Generate walkthrough videos from Stitch project screens using Remotion compositions.

Official
Advanced
erfanzarerfanzar
27

ai-voiceover-with-typed-text-visuals

Generate synchronized voiceover audio and typed-text overlays from a source script.

Community
Intermediate
gabelulgabelul
38

stitch-remotion

Retrieve Stitch project screenshots and build Remotion walkthrough videos with transitions and text overlays.

Community
Intermediate