remotion

Overview of remotion skill

What remotion is for

The remotion skill helps you turn Stitch screen data into a polished walkthrough video using Remotion. It is best for users who want an installable, repeatable workflow for Remotion for Video Editing rather than a one-off prompt that produces a rough edit plan.

Who should use it

Use this remotion skill if you already have a Stitch project with screens and need a video that explains the UI flow, feature sequence, or product tour. It fits product demos, onboarding clips, design reviews, and internal launch videos where screen order, timing, and captions matter.

Why it is different

The main value is the bridge between Stitch retrieval and Remotion composition. Instead of manually exporting screenshots and assembling transitions, the skill expects structured screen input, then builds a timeline with transitions, zoom, and text overlays. That makes remotion useful when consistency, re-renderability, and editing in code matter.

How to Use remotion skill

Install remotion and inspect the workflow

Install the remotion skill with npx skills add google-labs-code/stitch-skills --skill remotion. Then read SKILL.md first, followed by README.md, examples/screens.json, examples/WalkthroughComposition.tsx, resources/composition-checklist.md, and resources/screen-slide-template.tsx. Those files show the expected input shape, rendering flow, and reusable component pattern.

Give remotion the right inputs

A strong remotion usage request should include the Stitch project name or ID, the goal of the video, the target audience, the screen order if known, and any narration or overlay text needs. For example: “Create a 45-second remotion walkthrough for the Stitch project Calculator App, using the home, history, and settings screens, with short titles, fade transitions, and a product-demo tone.” That is much better than “make a video from my screens.”

Follow the practical build flow

The remotion guide in this repo is designed around retrieval, manifest creation, composition, and render. First identify the Stitch project and download the screens, then map them into a screens.json-style manifest with durations and transition types, then wire the manifest into a Remotion composition. If you are adapting this to your own project, check scripts/download-stitch-asset.sh for asset handling and resources/composition-checklist.md for the quality gates that prevent broken paths or uneven timing.

What to check before rendering

Validate that image paths resolve correctly, screen dimensions are recorded, and the total duration matches the intended pacing. Remotion output quality depends heavily on input structure: short screens need shorter holds, dense screens need slower pacing, and captions should be specific enough to explain what changed on each step. If a screen is visually busy, prefer a calmer transition and let the overlay do the explaining.

remotion skill FAQ

Is remotion only for Stitch projects?

This remotion skill is centered on Stitch-to-Remotion workflows, so Stitch is the intended source of screens. If you only have static images and no Stitch project, ordinary Remotion prompts may be simpler unless you want to adopt the same manifest-and-composition pattern.

What should I expect from remotion install?

The remotion install gives you a skill that guides a structured video pipeline, not a finished editor. You still need the source screens, a working Remotion environment, and enough detail to decide durations, transitions, and overlay text. The install is most valuable when you plan to reuse the workflow.

Is remotion beginner-friendly?

Yes, if you are comfortable giving clear inputs and following a file-based workflow. You do not need to know every Remotion API detail up front, but you should be ready to inspect the example composition and adjust timing, paths, and captions. Beginners usually succeed faster when they start from the example screens.json pattern.

When should I not use this skill?

Do not use remotion if you only need a single static mockup, a quick social clip with no source structure, or a fully automated edit with no control over the timeline. The skill is strongest when you care about repeatable Remotion usage and want code-backed edits to a screen walkthrough.

How to Improve remotion skill

Provide tighter screen intent

The biggest quality gain comes from clearer screen-level intent. Tell the skill what each screen should communicate, not just its title. For example, “Home Screen: show the main calculator and basic operators” is more useful than “Home Screen.” Better intent leads to better overlay text and pacing in remotion.

Use a manifest with real timing decisions

Instead of treating every screen equally, assign durations based on complexity and importance. A feature-heavy screen may need 5–6 seconds, while a simple confirmation screen may only need 2–3. This is the fastest way to improve remotion output because timing affects comprehension more than visual flair.

Iterate on transitions and overlays

Common failure modes are overusing zoom, making all text overlays sound generic, and letting transitions distract from the product. If the first render feels busy, simplify transition choices, shorten copy, and remove any overlay that repeats what the screen already shows. Then rerender with one change at a time so you can see which adjustment improved the result.

Reuse the repository examples

If your first output is close but not polished, compare it with examples/WalkthroughComposition.tsx and resources/screen-slide-template.tsx. Those files show the intended remotion style: screen-first composition, subtle animation, and structured metadata. Adapting that pattern is usually faster than rewriting the workflow from scratch.