remotion-best-practices
Best practices for Remotion - Video creation in React
Design & UXCreative & Mediaanimationcompositionreactremotionvideo
When to Use
Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
How to use
Read individual rule files for detailed explanations and code examples:
- [rules/3d.md](rules/3d.md) - 3D content in Remotion using Three.js and React Three Fiber
- [rules/animations.md](rules/animations.md) - Fundamental animation skills for Remotion
- [rules/assets.md](rules/assets.md) - Importing images, videos, audio, and fonts into Remotion
- [rules/audio.md](rules/audio.md) - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
- [rules/calculate-metadata.md](rules/calculate-metadata.md) - Dynamically set composition duration, dimensions, and props
- [rules/can-decode.md](rules/can-decode.md) - Check if a video can be decoded by the browser using Mediabunny
- [rules/charts.md](rules/charts.md) - Chart and data visualization patterns for Remotion
- [rules/compositions.md](rules/compositions.md) - Defining compositions, stills, folders, default props and dynamic metadata
- [rules/display-captions.md](rules/display-captions.md) - Displaying captions in Remotion with TikTok-style pages and word highlighting
- [rules/extract-frames.md](rules/extract-frames.md) - Extract frames from videos at specific timestamps using Mediabunny
- [rules/fonts.md](rules/fonts.md) - Loading Google Fonts and local fonts in Remotion
- [rules
Subscribers only
The full skill, its 32 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | community |
|---|---|
| License | — |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md, rules/3d.md, rules/animations.md, rules/assets.md, rules/assets/charts-bar-chart.tsx, rules/assets/text-animations-typewriter.tsx, rules/assets/text-animations-word-highlight.tsx, rules/audio.md, rules/calculate-metadata.md, rules/can-decode.md, rules/charts.md, rules/compositions.md, rules/display-captions.md, rules/extract-frames.md, rules/fonts.md, rules/get-audio-duration.md, rules/get-video-dimensions.md, rules/get-video-duration.md, rules/gifs.md, rules/images.md, rules/import-srt-captions.md, rules/lottie.md, rules/measuring-dom-nodes.md, rules/measuring-text.md, rules/sequencing.md, rules/tailwind.md, rules/text-animations.md, rules/timing.md, rules/transcribe-captions.md, rules/transitions.md, rules/trimming.md, rules/videos.md |
| Added | 2026-02-27 |
Related skills
atlas-cloud-media
Generate Atlas Cloud images and videos through its asynchronous media API with schema-first model selection and credential-safe polling.
generate-nanobanana
Generate and edit images/video with Google's Gemini media models (Nano Banana 2/Pro, Gemini Omni Flash), with cost-approval gates, reference-image support, and a prompt/output log per call.
image-generator
Generate and edit images using Gemini's Nano Banana Pro model (gemini-3-pro-image-preview). Use this skill when the user asks you to generate images, create visuals, edit photos, create logos, generate product mockups, or perform any image generation/editing task.
muapi-media
Generate images and videos with MuAPI's schema-driven asynchronous media API while protecting keys, polling, and output downloads.
remotion
Generate walkthrough videos from Stitch projects using Remotion with smooth transitions, zooming, and text overlays
stability-ai
Geracao de imagens via Stability AI (SD3.5, Ultra, Core). Text-to-image, img2img, inpainting, upscale, remove-bg, search-replace. 15 estilos artisticos.