Catalog
affaan-m/remotion-video-creation

affaan-m

remotion-video-creation

Best practices for Remotion - Video creation in React. 29 domain-specific rules covering 3D, animations, audio, captions, charts, transitions, and more.

global
tags:remotion, video, react, animation, composition, three.js, lottie
New~851
v1.0Saved May 11, 2026

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:

Files32
32 files · 73.7 KB

Select a file to preview

Overall Score

88/100

Grade

A

Excellent

Safety

90

Quality

88

Clarity

87

Completeness

83

Summary

A comprehensive Remotion domain-specific skills library covering 29 best-practice rules across video composition, animations, media handling (images, audio, video), text rendering, 3D content, captions, and transitions. The skill is read-only, referential guidance organized into modular rule files with code examples and setup instructions.

Detected Capabilities

read markdown filesreference external URLs (Remotion docs, Lottie CDN, assets)code examples and patternsfetch and parse remote assets (Lottie animations, subtitles)recommend npm/yarn/pnpm/bun package installations

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

remotion video creationreact animation compositionvideo rendering best practicesframe-driven animationsmedia asset handlingvideo metadata extractioncaption generationthree.js in video

Risk Signals

WARNING

Remote Lottie animation fetch with no validation

rules/lottie.md, MyAnimation component
INFO

Fetch of .srt subtitles from remote URLs without content validation

rules/import-srt-captions.md
INFO

Mediabunny library usage for frame extraction and metadata - trusted external dependency

rules/extract-frames.md, rules/get-video-duration.md, rules/get-audio-duration.md, rules/get-video-dimensions.md

Referenced Domains

External domains referenced in skill content, detected by static analysis.

api.example.comassets4.lottiefiles.comexample.comremotion.devremotion.mediawww.remotion.dev

Use Cases

  • Build Remotion video compositions with best practices
  • Set up and configure animations using useCurrentFrame
  • Embed and manipulate media assets (images, video, audio)
  • Implement text animations and measurements
  • Add captions and transcription to videos
  • Create 3D scenes using Three.js and React Three Fiber
  • Design scene transitions and sequencing layouts
  • Handle dynamic composition metadata and props
  • Load and style custom fonts in video projects
  • Extract metadata from video and audio files

Quality Notes

  • Excellent modular organization: 29 focused rule files, each addressing a single domain with clear prerequisites and examples
  • Strong adherence to Remotion-specific constraints (useCurrentFrame for animations, no CSS transitions, staticFile for assets)
  • Comprehensive code examples covering basic usage, advanced patterns, and edge cases (e.g., error handling in fetchCaptions, cancellation in extractFrames)
  • Clear security guidance: emphasizes use of staticFile() for assets, CORS requirements for remote URLs, proper Font and Asset loading patterns
  • Well-documented prerequisites: installation commands for all required packages (npx remotion add pattern), supporting multiple package managers
  • Complete rule cross-references enable discovery (e.g., calculate-metadata links to getMediaMetadata from mediabunny/metadata skill)
  • Minor: some rules link to external documentation (remotion.dev) without inline examples of the referenced content
  • Supporting code assets (bar-chart.tsx, text-animations examples) are included but referenced minimally in main rules
Model: claude-haiku-4-5-20251001Analyzed: May 11, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Add affaan-m/remotion-video-creation to your library

Command Palette

Search for a command to run...