remotion
Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
Install with Tessl CLI
npx tessl i github:davila7/claude-code-templates --skill remotion64
Does it follow best practices?
If you maintain this skill, you can automatically optimize it using the tessl CLI to improve its score:
npx tessl skill review --optimize ./path/to/skillValidation for skill structure
Evaluation results
90%
15%Product Launch Showcase Video
Frame-driven animations and scene transitions
useCurrentFrame driven
100%
100%
No CSS transitions
100%
100%
No Tailwind animation classes
100%
100%
Clamped interpolation
100%
100%
Spring damping config
50%
100%
FPS-based frame math
0%
100%
TransitionSeries used
100%
100%
Per-module transition imports
100%
100%
Premount sequences
0%
0%
Correct total duration
100%
100%
Without context: $0.7201 · 7m 13s · 31 turns · 38 in / 11,355 out tokens
With context: $1.2042 · 6m 37s · 50 turns · 2,093 in / 12,299 out tokens
100%
Podcast Channel Intro Sequence
Font loading and text animation patterns
Google Fonts package
100%
100%
Top-level loadFont
100%
100%
Specific weights and subsets
100%
100%
fontFamily in style
100%
100%
useCurrentFrame typewriter
100%
100%
String slicing typewriter
100%
100%
No CSS text animations
100%
100%
Type not interface for props
100%
100%
Composition in Root.tsx
100%
100%
Without context: $0.6925 · 6m 33s · 29 turns · 34 in / 11,789 out tokens
With context: $0.6643 · 6m 5s · 30 turns · 1,984 in / 7,709 out tokens
90%
70%Social Media Clip with Synchronized Captions
Media assets with captions and sequencing
Remotion Img component
100%
100%
staticFile() for assets
100%
100%
Audio from @remotion/media
0%
100%
Video from @remotion/media
0%
100%
Premount sequences
0%
0%
parseSrt for captions
0%
100%
createTikTokStyleCaptions
0%
100%
Sequence-based caption rendering
0%
100%
Without context: $0.6725 · 4m 53s · 28 turns · 76 in / 11,773 out tokens
With context: $0.8123 · 4m 52s · 33 turns · 2,638 in / 8,665 out tokens
- Evaluated
- Agent
- Claude Code
Table of Contents
Is this your skill?
If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.