remotionlisted
Install: claude install-skill Claudient/Claudient
# Remotion Skill
## When to activate
- Creating a product demo video from code (no video editor needed)
- Building animated release notes or changelogs
- Generating an explainer video for a feature or process
- Creating a data visualisation video from dynamic data
- Automating video generation in a CI/CD pipeline
## When NOT to use
- Recording a screen — use Loom or OBS
- Editing existing video footage — use DaVinci Resolve or Premiere
- Real-time video streaming
- Simple GIF — use a GIF tool for static animations
## Instructions
### Project setup
```bash
# Create a new Remotion project
npm create video@latest
# Or add to existing project
npm install remotion @remotion/cli @remotion/player
# Directory structure
src/
remotion/
Root.tsx ← registers all compositions
compositions/
ProductDemo.tsx ← your video compositions
ReleaseNotes.tsx
index.ts
# Preview in browser (hot reload)
npx remotion studio
# Render to MP4
npx remotion render ProductDemo output/demo.mp4
# Render to GIF
npx remotion render ProductDemo output/demo.gif --codec=gif
```
### Product demo video
```tsx
Generate a product demo video composition.
Product: [describe]
Duration: [X seconds]
Scenes: [list what to show]
// src/remotion/compositions/ProductDemo.tsx
import { AbsoluteFill, useCurrentFrame, useVideoConfig, spring, interpolate } from 'remotion'
export const ProductDemo: React.FC = () => {
const frame = useCurrentFrame()
const { fps, durationInFrames } =