# Create Remotion walkthrough videos

Teams need fast walkthrough videos for app screens, but manual editing is slow. This skill turns Stitch screens into Remotion compositions with transitions and overlays.

## Install

```bash
npx skillstore add google-labs-code/remotion
```

## Metadata

- Status: approved
- Slug: google-labs-code-remotion
- Skillstore revision: r1
- Version status: missing
- Tree hash: 1b988909362f2aff571e68918f4f1d6aa5992ed4611b7eb538c9d3bff147de8c
- Author: google-labs-code
- GitHub username: google-labs-code
- License: MIT
- Repository: https://github.com/google-labs-code/stitch-skills/tree/main/skills/remotion/
- Ref: 30c73eac2afe762f6aa9c4553158769369d47351
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: filesystem, external\_commands, network
- Quality score: 50
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/google-labs-code-remotion
- Manifest: https://skillstore.pages.dev/api/skills/google-labs-code-remotion/manifest

## Capabilities

- Find Stitch projects and screens through MCP tool calls.
- Download Stitch screenshots and organize them as video assets.
- Create screen manifests with timing, dimensions, and transition choices.
- Generate Remotion React components for animated walkthroughs.
- Guide preview and rendering through Remotion Studio, CLI, or MCP.

## Use Cases

- Produce a product walkthrough: Turn app screens into a short video that explains the main user flow.
- Prepare a design review demo: Compile Stitch screens into a timed walkthrough for stakeholder feedback.
- Create a release highlight clip: Render a feature video with screen titles, callouts, and transitions.

## Prompt Templates

### Build a basic walkthrough

```
Create a Remotion walkthrough video for my Stitch project. Use fade transitions and show each screen title.
```

### Control timing and flow

```
Use these Stitch screens in order, set each duration to 4 seconds, and add slide transitions between major steps.
```

### Add feature callouts

```
Extract important labels from the Stitch screen data and add timed callouts for the main product features.
```

### Prepare final render outputs

```
Preview the Remotion composition, fix timing issues, then render MP4 and WebM deliverables with clear output names.
```

## Limitations

- Requires access to Stitch and Remotion MCP servers or the Remotion CLI.
- Does not create original design screens or repair missing assets.
- Video quality depends on screenshot resolution and Remotion settings.
- Voiceover support is guidance only and needs separate audio creation.

## Best Practices

- Confirm download URLs and output paths before running asset scripts.
- Keep manifest dimensions aligned with the actual screenshot files.
- Preview in Remotion Studio before producing the final render.

## Anti Patterns

- Do not write downloaded assets outside the intended project directory.
- Do not mix screen sizes without explicit scaling rules.
- Do not render final video before checking every transition and overlay.

## Security Audit

- Audited at: 2026-07-05T16:20:48.935\+00:00
- Summary: Most static hits are false positives from Markdown inline code, documentation links, TypeScript template literals, and safe /dev/null redirection. The real risks are the helper Bash download workflow and an optional recommendation to install external Remotion skills. No prompt injection or malicious exfiltration intent was found.

## Stats

- Views: 288
- Downloads: 13
- Favorites: 0
- Popularity score: 0