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 Fiberrules/animations.md - Fundamental animation skills for Remotionrules/assets.md - Importing images, videos, audio, and fonts into Remotionrules/audio.md - Using audio and sound in Remotion - importing, trimming, volume, speed, pitchrules/calculate-metadata.md - Dynamically set composition duration, dimensions, and propsrules/can-decode.md - Check if a video can be decoded by the browser using Mediabunnyrules/charts.md - Chart and data visualization patterns for Remotionrules/compositions.md - Defining compositions, stills, folders, default props and dynamic metadatarules/display-captions.md - Displaying captions in Remotion with TikTok-style pages and word highlightingrules/extract-frames.md - Extract frames from videos at specific timestamps using Mediabunnyrules/fonts.md - Loading Google Fonts and local fonts in Remotionrules/get-audio-duration.md - Getting the duration of an audio file in seconds with Mediabunnyrules/get-video-dimensions.md - Getting the width and height of a video file with Mediabunnyrules/get-video-duration.md - Getting the duration of a video file in seconds with Mediabunnyrules/gifs.md - Displaying GIFs synchronized with Remotion's timelinerules/images.md - Embedding images in Remotion using the Img componentrules/import-srt-captions.md - Importing .srt subtitle files into Remotion using @remotion/captionsrules/lottie.md - Embedding Lottie animations in Remotionrules/measuring-dom-nodes.md - Measuring DOM element dimensions in Remotionrules/measuring-text.md - Measuring text dimensions, fitting text to containers, and checking overflowrules/sequencing.md - Sequencing patterns for Remotion - delay, trim, limit duration of itemsrules/tailwind.md - Using TailwindCSS in Remotionrules/text-animations.md - Typography and text animation patterns for Remotionrules/timing.md - Interpolation curves in Remotion - linear, easing, spring animationsrules/transcribe-captions.md - Transcribing audio to generate captions in Remotionrules/transitions.md - Scene transition patterns for Remotionrules/trimming.md - Trimming patterns for Remotion - cut the beginning or end of animationsrules/videos.md - Embedding videos in Remotion - trimming, volume, speed, looping, pitch Grades are signals, not a certification. Always review a skill yourself before use.
Summary A comprehensive domain-specific skill providing 29 rules for video creation with Remotion (React-based video framework). The skill covers animations, audio, captions, charts, 3D, transitions, and asset management with detailed markdown guides, code examples, and linked supporting files. It is a well-organized reference knowledge base with no executable components.
Detected Capabilities code examples (read-only) knowledge base reference configuration patterns markdown documentation API usage patterns best practices guidance
Trigger Keywords Phrases that agents use to match this skill to user intent.
remotion video creation frame-based animation audio synchronization caption rendering data visualization three.js integration scene transitions media asset handling dynamic composition metadata timeline sequencing
Risk Signals INFO
Remote URL fetching in code examples (fetch() calls to api.example.com, remotion.media)
rules/compositions.md:calculateMetadata, rules/import-srt-captions.md, rules/lottie.md
INFO
External asset references (Lottie files from assets4.lottiefiles.com)
rules/lottie.md
INFO
No security-sensitive operations detected; skill is purely educational documentation with code snippets
All files
Referenced Domains External domains referenced in skill content, detected by static analysis.
api.example.com assets4.lottiefiles.com example.com remotion.dev remotion.media www.remotion.dev
Use Cases Create frame-based animations in Remotion videos Integrate audio tracks, captions, and sound effects into compositions Build data visualizations and charts animated on the timeline Embed 3D content using Three.js and React Three Fiber Apply scene transitions and temporal sequencing to video clips Handle media assets (images, videos, audio, fonts) from local and remote sources Generate dynamic compositions with computed metadata Transcribe audio and display synchronized captions Measure and fit text content within layouts Troubleshoot rendering issues with forbidden CSS animations Quality Notes Well-organized hierarchical structure with clear rule categories covering the full Remotion API surface Comprehensive code examples demonstrating correct patterns (useCurrentFrame for all animations, staticFile for assets) Explicit restrictions clearly stated (CSS animations forbidden, useFrame() not allowed, specific Sequence layout requirements) Practical prerequisites documented for each rule (package installation commands for npm, bun, yarn, pnpm) Supporting code examples provided as executable TypeScript files (bar chart, typewriter, word highlight animations) Cross-referenced patterns (e.g., spring animations, timing, easing) reduce duplication Consistent formatting and terminology throughout (frames, fps, durationInFrames normalized) Best practices embedded (wait for fonts before measuring, use AbortSignal for cancellation, match font properties in measurement) Edge cases addressed (looping behavior, pitch shifting only in server rendering, frame counting with loopVolumeCurveBehavior) Limitations clearly noted (CORS for remote images, negative playbackRate not supported) Model: claude-haiku-4-5-20251001 Analyzed: Sep 9, 2026
Reviews Add this skill to your library to leave a review.
No reviews yet
Be the first to share your experience.