Skill

remotion-best-practices

From sundial-org-awesome-openclaw-skills-4

Provides best practices for Remotion video creation in React, covering 3D with Three.js, animations, audio, assets, compositions, captions, charts, fonts, Lottie, Tailwind, and timing.

React

Tailwind

frontend

code-quality

Install

npx claudepluginhub joshuarweaver/cascade-ai-ml-agents-misc-2 --plugin sundial-org-awesome-openclaw-skills-4

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

Supporting Assets

SKILL.md

Similar Skills

cache-components

Guides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.

cache-components

139.2k

mcp-builder

9 files

Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).

anthropics-skills-13

124.2k

canvas-design

20 files

Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.

anthropics-skills-13

124.2k

Stats

Stars586

Forks75

Last CommitFeb 1, 2026

Used By2 plugins

Actions

View Source View Plugin View on GitHub View README

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