remotion-best-practices

Q: How do I install remotion-best-practices?

Run npx skills add https://github.com/sickn33/agentic-awesome-skills --skill remotion-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/remotion-best-practices/ (personal) or .claude/skills/remotion-best-practices/ (project).

by sickn33Media & Creative

Best practices for Remotion - Video creation in React

Installs: 618
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/sickn33/agentic-awesome-skills --skill remotion-best-practices

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads remotion-best-practices automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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

Limitations

Use this skill only when the task clearly matches the scope described above.
Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

Runtime and data boundaries

Use installed project tooling and lockfile versions; commands using package runners may download code when the CLI is absent. Install only dependencies needed by the agreed task and keep all Remotion packages on the same version. Remote media, font and transcription requests disclose data to their providers; use authorized assets and confirm paid/cloud transcription scope. Examples are partial component snippets unless exported; hooks belong inside React components, not module scope. using examples require TypeScript explicit resource management support. Validate rendered frames and audio in the target runtime.

FAQ

What does the remotion-best-practices skill do?

Best practices for Remotion - Video creation in React

How do I install remotion-best-practices?

Run npx skills add https://github.com/sickn33/agentic-awesome-skills --skill remotion-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/remotion-best-practices/ (personal) or .claude/skills/remotion-best-practices/ (project).

Which AI agents can use remotion-best-practices?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is remotion-best-practices safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains remotion-best-practices?

It is published by sickn33 in sickn33/agentic-awesome-skills. It has 618 recorded installs.

Source

sickn33/agentic-awesome-skills $View on skills.sh

Works with

Claude CodeCodexCursorGitHub CopilotGemini CLIWindsurfClineOpenCodeRoo CodeGooseAmpKiro

Files 32 · 78.4 KB

SKILL.md4.3 KB
rules/3d.md2.2 KB
rules/animations.md812 B
rules/assets.md1.6 KB
rules/assets/charts-bar-chart.tsx3.4 KB
rules/assets/text-animations-typewriter.tsx2.1 KB
rules/assets/text-animations-word-highlight.tsx2.3 KB
rules/audio.md3.7 KB
rules/calculate-metadata.md3.4 KB
rules/can-decode.md1.6 KB
rules/charts.md1.7 KB
rules/compositions.md3.4 KB
rules/display-captions.md3.7 KB
rules/extract-frames.md5.8 KB
rules/fonts.md3.4 KB
rules/get-audio-duration.md1.3 KB
rules/get-video-dimensions.md1.6 KB
rules/get-video-duration.md1.3 KB
rules/gifs.md3.8 KB
rules/images.md2.7 KB
rules/import-srt-captions.md2.1 KB
rules/lottie.md1.7 KB
rules/measuring-dom-nodes.md974 B
rules/measuring-text.md2.9 KB

+8 more files