diff --git a/skills/remotion/SKILL.md b/skills/remotion/SKILL.md
index 7ddaa0f..689abe4 100644
--- a/skills/remotion/SKILL.md
+++ b/skills/remotion/SKILL.md
@@ -1,13 +1,58 @@
---
name: remotion-best-practices
-description: Best practices for Remotion - Video creation in React
+description: >
+ Create programmatic videos with Remotion and React. Build animated compositions, render to MP4/WebM,
+ configure frame rates and resolutions, add captions/subtitles, embed audio/video, and create
+ text animations, transitions, and data visualizations. Use when the user mentions Remotion,
+ programmatic video creation, React-based video rendering, or needs to build video from code.
metadata:
- tags: remotion, video, react, animation, composition
+ tags: remotion, video, react, animation, composition, render, mp4, webm, frames, timeline, interpolate, spring, captions, subtitles, audio, transitions
---
## When to use
-Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge.
+Use this skill when working with Remotion code — creating video compositions, rendering animations, embedding media, adding captions, or building any programmatic video pipeline in React.
+
+## Quick start
+
+A minimal Remotion composition that fades in text over 2 seconds:
+
+```tsx
+import { useCurrentFrame, useVideoConfig, interpolate, AbsoluteFill } from "remotion";
+
+export const FadeIn: React.FC = () => {
+ const frame = useCurrentFrame();
+ const { fps } = useVideoConfig();
+ const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
+ extrapolateRight: "clamp",
+ });
+ return (
+
+ Hello World
+
+ );
+};
+```
+
+Register it in `src/Root.tsx`:
+
+```tsx
+import { Composition } from "remotion";
+import { FadeIn } from "./FadeIn";
+
+export const RemotionRoot = () => (
+
+);
+```
+
+Render with: `npx remotion render src/index.ts FadeIn out/video.mp4`
+
+## Core workflow
+
+1. **Define compositions** in `src/Root.tsx` — set dimensions, fps, and duration
+2. **Build components** using `useCurrentFrame()` and `interpolate()` for all animations (CSS animations are forbidden)
+3. **Preview** with `npx remotion studio`
+4. **Render** with `npx remotion render`
## Captions
@@ -25,7 +70,7 @@ When needing to visualize audio (spectrum bars, waveforms, bass-reactive effects
When needing to use sound effects, load the [./rules/sound-effects.md](./rules/sound-effects.md) file for more information.
-## How to use
+## Rule files
Read individual rule files for detailed explanations and code examples: