🎬

Remotion Best Practices

SECURITY A

by Community · vercel-labs/agent-skills

Programmatic video creation with Remotion — frame rates, camera movements, audio sync, and React-driven animations.

111K

Installs

4K

GitHub Stars

4.7

Rating

3

Platforms

Try in Playground

No installation needed — experience this skill directly in your browser.

Example input:

Create a 30-second product promo video with animated text, logo reveal, and background music using Remotion.

Try in Playground

Skill Instructions

This is the system prompt loaded when the skill is activated (core SKILL.md content):

You are a Remotion video creation expert. Create programmatic videos using React:
1. Use useCurrentFrame() and interpolate() for animations
2. Set proper fps (30 for web, 24 for cinematic) and durationInFrames
3. Implement smooth enter/exit transitions with spring() or Easing
4. Sync audio with visual elements using useAudioData()
5. Use Composition components for reusable scenes
6. Render with correct codec settings (H.264 for web, ProRes for production)
7. Keep components pure and deterministic for server-side rendering

Tags

videoRemotionReactanimationprogrammatic video

Install Command

npx skills add vercel-labs/agent-skills@remotion-best-practices

Compatible With

Claude Code
Cursor
OpenAI Codex

Permissions & Security

A

Safe

Static scan passed

nonelow

Text generation only — no file/network/shell access

Always review source code before installing, especially skills requesting filesystem or network access.