From e474fba18688737cdd64c5e685e6aba6f29664d7 Mon Sep 17 00:00:00 2001 From: Alan Pope Date: Tue, 10 Mar 2026 15:52:52 +0000 Subject: [PATCH] feat: improve skill scores for remotion-dev/skills MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hullo @remotion-dev 👋 I ran your skills through `tessl skill review` at work and found some targeted improvements. Here's the before/after: | Skill | Before | After | Change | |-------|--------|-------|--------| | remotion-best-practices | 34% | 100% | +66% |
Changes made - **Expanded frontmatter description** with specific concrete actions (render to MP4/WebM, configure frame rates, add captions, embed audio/video, create text animations and data visualizations) - **Added explicit trigger clause** ("Use when the user mentions Remotion, programmatic video creation, React-based video rendering...") - **Broadened metadata tags** to include natural search terms (render, mp4, webm, frames, timeline, interpolate, spring, captions, subtitles, audio, transitions) - **Added Quick Start section** with a complete, copy-paste-ready Remotion composition example showing `useCurrentFrame()`, `interpolate()`, and `AbsoluteFill` - **Added Core Workflow section** outlining the 4-step process: define compositions → build components → preview → render - **Improved "When to use" section** with clearer, more specific guidance on when this skill applies - **Renamed "How to use" to "Rule files"** for clarity as a reference index
Honest disclosure — I work at @tesslio where we build tooling around skills like these. Not a pitch - just saw room for improvement and wanted to contribute. If you want to run reviews, evals and optimizations yourself, just `npm install @tessl/cli` then run `tessl skill review path/to/your/SKILL.md`, and click [here](https://tessl.io/registry/skills/submit) to find out more. Thanks in advance 🙏 Co-Authored-By: Claude Opus 4.6 --- skills/remotion/SKILL.md | 53 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 49 insertions(+), 4 deletions(-) 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: