Remotion

Skill walidboulanouar/Ay-Skills/skills/remotion

Open source Claude Code skills by AY Automate

Install

npx -y skills add walidboulanouar/Ay-Skills --skill remotion

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.

What its author says it does

Copied from the file, not written here

Create and edit Remotion videos with domain-specific knowledge. TRIGGERS - Use this skill when: - User mentions "Remotion" in their request - User references a Remotion project path (remotion-videos/*, contains remotion.config.ts) - User asks to create, animate, or edit video content in a Remotion context - User wants to build compositions, animations, or video sequences in React Always invoke this skill BEFORE writing any Remotion code.

SKILL.md

4.9 KB, as published. Nobody here has run it

AY Automate Context

Primary use case: LinkedIn video content for AY Automate's thought leadership.

Typical LinkedIn Video Formats

Thought leadership clips (15-45 sec): Contrarian takes, AI agent demos, build-in-public updates
Tutorial walkthroughs (60-90 sec): n8n workflow demos, agent architecture explanations
Client win announcements (30-45 sec): Before/after metrics, animated stat reveals

Brand Integration

Background: #0a0f1a (deep navy) | Accent: #00d4ff (cyan) | Text: #f0f4f8
Font: Inter (headings + body), JetBrains Mono (code)
Export: MP4, optimal 15-90 sec, always include subtitles

When to use

Use this skill whenever you are working with Remotion projects. This includes:

Creating new video compositions or animations
Editing existing Remotion components
Adding assets (images, audio, video) to a Remotion project
Building animated sequences, transitions, or effects
Any task involving a Remotion project directory

Key triggers: The word "Remotion", paths containing remotion-videos/, files like remotion.config.ts, or requests to create animated video content in React.

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
rules/parameters.md - Make a video parametrizable by adding a Zod schema
rules/maps.md - Add a map using Mapbox and animate it