remotion
Remotion — Toolkit Extensions
Core Remotion knowledge lives in
.claude/skills/remotion-official/(synced from the official remotion-dev/skills repo). This file covers toolkit-specific patterns only.
Shared Components
Reusable video components in lib/components/. Import in templates via:
import { AnimatedBackground, SlideTransition, Label } from '../../../../lib/components';
| Component | Purpose |
|---|---|
AnimatedBackground |
Floating shapes background (variants: subtle, tech, warm, dark) |
SlideTransition |
Scene transitions (fade, zoom, slide-up, blur-fade) |
Label |
Floating label badge with optional JIRA reference |
Vignette |
Cinematic edge darkening overlay |
LogoWatermark |
Corner logo branding |
More from digitalsamba/claude-code-video-toolkit
ffmpeg
Video and audio processing with FFmpeg. Use for format conversion, resizing, compression, audio extraction, and preparing assets for Remotion. Triggers include converting GIF to MP4, resizing video, extracting audio, compressing files, or any media transformation task.
3.2Kelevenlabs
Generate AI voiceovers, sound effects, and music using ElevenLabs APIs. Use when creating audio content for videos, podcasts, or games. Triggers include generating voiceovers, narration, dialogue, sound effects from descriptions, background music, soundtrack generation, voice cloning, or any audio synthesis task.
450playwright-recording
Record browser interactions as video using Playwright. Use for capturing demo videos, app walkthroughs, and UI flows for Remotion videos. Triggers include recording a demo, capturing browser video, screen recording a website, or creating walkthrough footage.
436qwen-edit
AI image editing prompting patterns for Qwen-Image-Edit. Use when editing photos while preserving identity, reframing cropped images, changing clothing or accessories, adjusting poses, applying style transfers, or character transformations. Provides prompt patterns, parameter tuning, and examples.
352frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
332remotion-best-practices
Best practices for Remotion - Video creation in React
307