affaan-m/remotion-video-creation

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

Files32

32 files · 73.7 KB

Select a file to preview

Overall Score

88/100

Grade

A

Excellent

Grades are signals, not a certification. Always review a skill yourself before use.

Safety

90

Quality

89

Clarity

87

Completeness

84

Summary

A comprehensive 29-rule skill guide for Remotion video creation in React. Covers 3D (Three.js), animations (frame-driven), assets (images/videos/audio/fonts), captions, charts, compositions, measurements, sequencing, timing, transitions, and specialized techniques. All rules reference supporting markdown files with practical code examples and domain-specific patterns.

Detected Capabilities

file readexternal URL fetchcode example provisionasset reference

Trigger Keywords

Phrases that agents use to match this skill to user intent.

remotion video compositionframe-driven animationvideo with captionsembed video audio3d scene three.jschart animation datafont loading remotionscene transition effectvideo metadata extractionlottie animation embed

Risk Signals

INFO

Remote URL fetch for Lottie animations from assets4.lottiefiles.com

rules/lottie.md (line 37)

INFO

Network requests to fetch captions/subtitles and video metadata

rules/import-srt-captions.md, rules/calculate-metadata.md, rules/extract-frames.md

INFO

Reference to external API example.com in calculateMetadata pattern

rules/compositions.md (line 64)

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 React video compositions with Remotion
Create frame-driven animations using useCurrentFrame()
Embed and synchronize media (video, audio, images, GIFs) in videos
Add captions, transcription, and subtitle support to video projects
Implement 3D scenes using Three.js in Remotion compositions
Animate charts and data visualizations in video
Load and style fonts (Google Fonts and local) in video
Apply transitions and sequencing effects between scenes
Measure text and DOM elements for dynamic sizing
Extract video metadata (duration, dimensions) for composition setup

Quality Notes

Excellent organization: 29 focused rule files, each addressing a single domain pattern
Each rule includes clear prerequisites (package installation commands for all package managers)
Consistent code examples throughout — nearly every pattern is illustrated with runnable TypeScript/TSX
Strong cross-references: rules link to related utilities (e.g., get-audio-duration uses Mediabunny like extract-frames)
Security best practice highlighted: 'CSS transitions and Tailwind animation classes are FORBIDDEN' in animations.md — explicit guardrail against common mistakes
Comprehensive API coverage: useCurrentFrame, interpolate, spring, Sequence, calculateMetadata all documented with use cases
Advanced patterns included: dynamic metadata loading, frame extraction with AbortSignal, staggered bar chart animation
Practical defaults documented: spring damping recommendations (smooth, snappy, bouncy, heavy)
Edge cases addressed: looping behavior with loopVolumeCurveBehavior, premounting, layout='none' for Sequences inside ThreeCanvas
Minor: some rules are very brief (text-animations.md 11 lines) but link to asset examples instead of inline code

Model: claude-haiku-4-5-20251001Analyzed: Oct 12, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Version History

v2.1
Content updated
✦ AISupporting documentation in rules/charts.md updated.
2026-10-12
LATEST
v2.0
Contract changed: description
✦ AIExpands activation guidance in description to clarify skill scope: animations, audio, captions, charts, transitions.
triggering2026-09-09
View This Version
v1.0
2026-04-20
View This VersionInitial version

remotion-video-creation

When to use

How to use

Summary

Detected Capabilities

Trigger Keywords

Risk Signals

Referenced Domains

Use Cases

Quality Notes

Reviews

Version History

Command Palette