Remotion

Best practices for Remotion - Video creation in React

Security Scan

The skill is an instruction-and-example pack for Remotion (React video) and its files, requirements, and instructions are coherent with that purpose — no unexpected credentials, installs, or privileged behaviors are requested.

Purpose & Capability

Name/description (Remotion best practices) match the included files: many rule documents and example React/Remotion components. Required binaries/env/configs are none, which is appropriate for a guidance/instruction skill that provides example code.

Instruction Scope

SKILL.md and rule files remain on-topic and describe Remotion patterns and example code. A few examples show fetching remote resources (e.g., calculateMetadata fetching props.dataUrl, use of mediabunny with UrlSource, loading Google Fonts, remote asset URLs). Network access to arbitrary URLs is consistent with the skill's purpose but means code snippets will perform external requests when copied/run; avoid passing secrets or private endpoints as props.

Install Mechanism

No install spec is provided (instruction-only plus example source files). That is the lowest-risk model — nothing is downloaded or written by the platform installer.

Credentials

The skill requests no environment variables, credentials, or config paths. Example code references third-party libraries (remotion packages, mediabunny, @remotion/google-fonts) which are appropriate for Remotion projects and do not imply secret access.

Persistence & Privilege

Skill is not always-enabled, does not request system persistence, and contains no instructions to modify other skills or system settings. Agent autonomous invocation is allowed (platform default) but not combined with other red flags.

Assessment

This package is a collection of Remotion best-practice documents and example components — its files are coherent with that purpose. There are no required credentials or installs. Important things to consider before using or copying the examples into a project: (1) Several examples perform network requests (fetching remote assets, calling APIs in calculateMetadata, mediabunny UrlSource, loading Google Fonts). Do not pass secrets, private endpoints, or credentials via composition props or URLs used by these examples. (2) The examples reference third-party packages (mediabunny, @remotion/*) which you will need to install in your project; review those packages separately. (3) As with any copied code, review and test examples in a safe environment before using in production. If you want a deeper check, provide any additional files/truncated files omitted here or confirm whether you plan to run these code examples inside an automated environment so I can highlight any runtime network/fetch behaviors to watch for.

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 - 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
• rules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadata
• rules/display-captions.md - Displaying captions in Remotion with TikTok-style pages and word highlighting
• 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/import-srt-captions.md - Importing .srt subtitle files into Remotion using @remotion/captions
• 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/transcribe-captions.md - Transcribing audio to generate captions in Remotion
• rules/transitions.md - Scene transition patterns for Remotion
• 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