Marketing Skills Directory Remotion Best Practices
Description
Best practices for Remotion — video creation in React. Covers Remotion API patterns (animations, transitions, assets, audio, captions) plus production rules for social video output (readability standards, responsive font scaling, icon/Lottie registries, rendering checklist).
Production Rules
- Readability — Font sizes, word limits, stat hierarchy, safe zones, duration formulas for social video
- Responsive Scaling — Multi-format font scaling (square/vertical/landscape) with useFontScale hook
- Icon & Lottie Registries — String registries for Lucide icons and Lottie animations for Remotion serialization
- Production Checklist — Pre-ship checklist for fonts, timing, layout, branding, animation, rendering
Remotion API Coverage
Includes detailed rules for animations, transitions, sequencing, timing, 3D content, charts, audio, video embedding, captions, fonts, images, GIFs, Lottie, TailwindCSS, text animations, trimming, measuring text and DOM nodes, and more.
When to Use
Use whenever writing Remotion code or preparing video compositions for social platforms. Provides domain-specific knowledge for both the Remotion API and production-quality social video output.
How It Works
What Claude Learns
- → Apply readability standards for social video (font sizes, word limits, safe zones)
- → Implement responsive font scaling for multi-format output
- → Build string registries for Lucide icons and Lottie animations
- → Use the production checklist before rendering
- → Animate with Remotion springs, interpolation, and easing
- → Sequence and time scenes with transitions
- → Embed audio, video, images, GIFs, and captions
Installation
claude mcp add-skill remotion-best-practicesStack & Dependencies
Use Cases
Apply readability standards for social video (font sizes, word limits, safe zones)
Using React and TypeScript
Implement responsive font scaling for multi-format output
Using React and TypeScript
Build string registries for Lucide icons and Lottie animations
Using React and TypeScript
Use the production checklist before rendering
Using React and TypeScript
Animate with Remotion springs, interpolation, and easing
Using React and TypeScript
Related Skills
Frequently Asked Questions
What technologies does Remotion Best Practices require?
How detailed is the Remotion Best Practices skill?
Is Remotion Best Practices free to use?
What will Claude Code learn from this skill?
Purchase workflow will be available soon. Contact us to get early access.