remotion

Assemble Stitch screens into Remotion walkthrough videos with configurable timing.

1|Updated Nov 28, 2025
One-click install
npx skills add https://github.com/RenyEnnos/life-os --skill remotion
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: remotion
Source: https://github.com/RenyEnnos/life-os/tree/main/.agent/skills/remotion
Command: npx skills add https://github.com/RenyEnnos/life-os --skill remotion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires curl, and includes scripts (resource) components.

What problem does it solve?

This skill helps teams transform Stitch screen assets into polished, shareable walkthrough videos by orchestrating a Remotion pipeline that retrieves screens, builds a modular video composition, and renders the final output.

Core Features & Use Cases

  • Automated asset retrieval: Fetch screenshots and metadata from Stitch projects to drive video creation.
  • Modular Remotion components: Scaffold and reuse ScreenSlide.tsx and WalkthroughComposition.tsx for consistent videos.
  • Configurable visuals: Apply multiple transition styles, text overlays, and per-screen timing for professional result.
  • Use Case: Create a product tour video from a Stitch project to showcase features in a compact format for onboarding or marketing.

Quick Start

  1. Prepare Stitch access and a Remotion project (or create one in video/).
  2. Ensure assets are downloaded to public/assets/screens/ and a screens.json manifest is available.
  3. Start Remotion Studio with npm run dev and render with npx remotion render WalkthroughComposition output.mp4

Frequently Asked Questions about remotion

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

FAQPage Schema
How do I automate walkthrough video creation from Stitch screenshots?

Automate walkthrough video creation from Stitch screenshots by retrieving screen assets and assembling a Remotion composition. This skill fetches screenshots and metadata, scaffolds modular components, and applies configurable timing and transitions to render product demos.

What do I need to set up before generating Remotion videos from Stitch?

Before generating Remotion videos from Stitch, you need Stitch MCP access, a configured Remotion project, and Node.js with necessary dependencies. Assets must be downloaded to public/assets/screens/ alongside a screens.json manifest to orchestrate data flow.

Can I customize transitions and text overlays for product demo videos?

Yes, you can customize transitions and text overlays for product demo videos. The skill supports configurable visuals, allowing you to apply multiple transition styles, text overlays, and per-screen timing to generate professional walkthrough results.

How do I render the final walkthrough composition after asset retrieval?

Render the final walkthrough composition by starting Remotion Studio with npm run dev and executing npx remotion render WalkthroughComposition output.mp4. This processes the assembled screens and transitions into a shareable video file.

Does this skill work with existing Remotion components or generate new ones?

This skill generates new modular Remotion components for your video assembly. It scaffolds reusable ScreenSlide.tsx and WalkthroughComposition.tsx files to ensure consistent video creation and maintainable composition structures across projects.