Remotion Best Practices

Best practices for Remotion - Video creation in React

Security Scan

The skill is coherent with Remotion best-practice documentation, but a prompt-injection pattern (unicode control characters) was detected in SKILL.md and warrants caution before installing or granting it autonomous invocation.

Purpose & Capability

Name, description, and included files all match: this is a documentation / best-practices skill for Remotion. The code samples and rule files (animations, assets, ffmpeg, mediabunny examples, etc.) are relevant to the stated purpose. The skill does not declare unrelated binaries, env vars, or config paths.

Instruction Scope

SKILL.md and the rule files are instruction-only and mainly provide coding examples and guidance. However the pre-scan detected unicode-control-chars in SKILL.md — control/zero-width characters can be used to hide or obfuscate text and are a common prompt-injection vector. Additionally, some example rules show fetch() calls and references to third‑party services (e.g., ElevenLabs, Mediabunny) — those are expected for documentation but could cause the agent to reach external endpoints if the agent followed examples literally. Review SKILL.md and rule files for hidden characters and any instructions that ask the agent to fetch or transmit your local data or secrets.

Install Mechanism

No install spec is provided; this is an instruction-only skill with bundled documentation and example source files. Nothing will be downloaded or written by an installer, which is the lowest-risk install profile.

Credentials

The registry metadata declares no required environment variables or credentials (none required). That is consistent with documentation-only content. Be aware, however, that some examples reference third-party services (e.g., ElevenLabs TTS, Mediabunny) which in real usage typically require API keys or credentials — those are not requested here, so if you later follow examples you may need to supply secrets to those services outside the skill. The skill itself does not request broad credentials.

Persistence & Privilege

The skill is not always-enabled (always: false) and is user-invocable. disable-model-invocation is false (normal). The skill does not request or claim persistent system-wide privileges or to modify other skills. Autonomous invocation is allowed by default; combined with the prompt-injection signal this increases the risk surface and is why caution is recommended.

Scan Findings in Context

[unicode-control-chars] unexpected: Control / zero-width Unicode characters were detected in SKILL.md. These are not needed for documentation and can be used to hide or obfuscate content or perform prompt-injection; inspect the raw file for hidden characters before trusting or enabling autonomous use.

What to consider before installing

What to consider before installing: - The skill itself appears to be documentation and code samples for Remotion and is coherent with its stated purpose. It does not request credentials or install any binaries. - A warning: SKILL.md contains unicode control/zero-width characters detected by the scanner. These characters are uncommon in plain documentation and can hide or obfuscate instructions (a prompt-injection technique). Open the SKILL.md in a hex/viewer or run a tool to reveal control characters (e.g., cat -v SKILL.md, or view with an editor that shows invisible characters). If you see unexpected hidden text, contact the publisher or remove the characters. - Many examples reference external services (Mediabunny, ElevenLabs, remotion.media, api.example.com). Using those examples in your environment may require API keys or will cause network requests; do not provide secrets to the skill itself unless you understand where they are used. - Because the skill can be invoked by the agent autonomously (default), avoid enabling automatic runs that might follow examples against external URLs or user data until you have reviewed the files. If you plan to allow autonomous invocation, prefer turning that off or restricting what the agent can do until you confirm there's no obfuscated content. Actions you can take: - Inspect SKILL.md and the rule files for hidden/zero-width characters (cat -v, od -c, or an editor that shows invisibles). - Search for any code that performs fetch()/network calls or reads local files and confirm those calls are intentional and safe. - If you plan to use voiceover or TTS examples, provision API keys only in a secure place and never paste secrets into a skill that you haven't fully audited. Given the hidden-character finding, treat this skill as 'suspicious' until the SKILL.md is inspected and any hidden content is explained or removed.

When to use

Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.

Captions

When dealing with captions or subtitles, load the ./rules/subtitles.md file for more information.

Using FFmpeg

For some video operations, such as trimming videos or detecting silence, FFmpeg should be used. Load the ./rules/ffmpeg.md file for more information.

Audio visualization

When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects), load the ./rules/audio-visualization.md file for more information.

Sound effects

When needing to use sound effects, load the ./rules/sound-effects.md file for more information.

How to use

Read individual rule files for detailed explanations and code examples:

• rules/3d.md - 3D content in Remotion using Three.js and React Three Fiber
• rules/animations.md - Fundamental animation skills for Remotion
• rules/assets.md - Importing images, videos, audio, and fonts into Remotion
• rules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitch
• rules/calculate-metadata.md - Dynamically set composition duration, dimensions, and props
• rules/can-decode.md - Check if a video can be decoded by the browser using Mediabunny
• rules/charts.md - Chart and data visualization patterns for Remotion (bar, pie, line, stock charts)
• rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
• rules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunny
• rules/fonts.md - Loading Google Fonts and local fonts in Remotion
• rules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunny
• rules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunny
• rules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunny
• rules/gifs.md - Displaying GIFs synchronized with Remotion's timeline
• rules/images.md - Embedding images in Remotion using the Img component
• rules/light-leaks.md - Light leak overlay effects using @remotion/light-leaks
• rules/lottie.md - Embedding Lottie animations in Remotion
• rules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotion
• rules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflow
• rules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of items
• rules/tailwind.md - Using TailwindCSS in Remotion
• rules/text-animations.md - Typography and text animation patterns for Remotion
• rules/timing.md - Interpolation curves in Remotion - linear, easing, spring animations
• rules/transitions.md - Scene transition patterns for Remotion
• rules/transparent-videos.md - Rendering out a video with transparency
• rules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animations
• rules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch
• rules/parameters.md - Make a video parametrizable by adding a Zod schema
• rules/maps.md - Add a map using Mapbox and animate it
• rules/voiceover.md - Adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS