🎯

remotion-best-practices

🎯Skill

from vishalsachdev/claude-skills

What it does

Provides comprehensive best practices and domain-specific knowledge for creating videos in React using Remotion, covering animations, assets, audio, and more.

📦

Part of

vishalsachdev/claude-skills(55 items)

remotion-best-practices

Installation

📋 No install commands found in docs. Showing default command. Check GitHub for actual instructions.

Quick InstallInstall with npx

npx skills add vishalsachdev/claude-skills --skill remotion-best-practices

Need more details? View full documentation on GitHub →

1Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

Best practices for Remotion - Video creation in React

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/get-audio-duration.md](rules/get-audio-duration.md) - Getting the duration of an audio file in seconds with Mediabunny
[rules/get-video-dimensions.md](rules/get-video-dimensions.md) - Getting the width and height of a video file with Mediabunny
[rules/get-video-duration.md](rules/get-video-duration.md) - Getting the duration of a video file in seconds with Mediabunny
[rules/gifs.md](rules/gifs.md) - Displaying GIFs synchronized with Remotion's timeline
[rules/images.md](rules/images.md) - Embedding images in Remotion using the Img component
[rules/import-srt-captions.md](rules/import-srt-captions.md) - Importing .srt subtitle files into Remotion using @remotion/captions
[rules/lottie.md](rules/lottie.md) - Embedding Lottie animations in Remotion
[rules/measuring-dom-nodes.md](rules/measuring-dom-nodes.md) - Measuring DOM element dimensions in Remotion
[rules/measuring-text.md](rules/measuring-text.md) - Measuring text dimensions, fitting text to containers, and checking overflow
[rules/sequencing.md](rules/sequencing.md) - Sequencing patterns for Remotion - delay, trim, limit duration of items
[rules/tailwind.md](rules/tailwind.md) - Using TailwindCSS in Remotion
[rules/text-animations.md](rules/text-animations.md) - Typography and text animation patterns for Remotion
[rules/timing.md](rules/timing.md) - Interpolation curves in Remotion - linear, easing, spring animations
[rules/transcribe-captions.md](rules/transcribe-captions.md) - Transcribing audio to generate captions in Remotion
[rules/transitions.md](rules/transitions.md) - Scene transition patterns for Remotion
[rules/trimming.md](rules/trimming.md) - Trimming patterns for Remotion - cut the beginning or end of animations
[rules/videos.md](rules/videos.md) - Embedding videos in Remotion - trimming, volume, speed, looping, pitch

More from this repository10

🎯

chartjs-generator🎯Skill

chartjs-generator skill from vishalsachdev/claude-skills

🎯

infographic-generator-p5🎯Skill

infographic-generator-p5 skill from vishalsachdev/claude-skills

🎯

vibe-coder-sdlc🎯Skill

vibe-coder-sdlc skill from vishalsachdev/claude-skills

🎯

microsim-vis-network🎯Skill

microsim-vis-network skill from vishalsachdev/claude-skills

🎯

concept-classifier🎯Skill

Generates interactive classification quizzes where students categorize scenarios into correct types using multiple-choice options across various subject domains.

🎯

type-safe-form-validation🎯Skill

type-safe-form-validation skill from vishalsachdev/claude-skills

🎯

linkedin-announcement-generator🎯Skill

Generates professional LinkedIn announcements for intelligent textbooks by analyzing book metrics, creating engaging posts with key statistics and links.

🎯

mermaid-generator🎯Skill

Generates interactive workflow diagrams using Mermaid.js for educational textbooks, creating MicroSim packages with colorful, readable visualizations.

🎯

microsim-utils🎯Skill

Manages MicroSim utilities by routing and executing quality validation, screenshot capture, icon management, and index page generation tasks.

🎯

complex-state-management🎯Skill

complex-state-management skill from vishalsachdev/claude-skills