Agent skill
remotion
Best practices for Remotion - video creation in React. Use when working with video compositions, animations, or subtitles.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/remotion-djnsty23-claude-auto-dev
SKILL.md
Remotion Best Practices
Video creation in React using Remotion.
When to Use
- Creating video compositions
- Adding animations to video
- Working with subtitles/captions
- Embedding media (videos, images, audio)
- Sequencing and timing
Core Concepts
Compositions
Define video dimensions, duration, and frame rate:
import { Composition } from 'remotion';
<Composition
id="MyVideo"
component={MyComponent}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
Animation with useCurrentFrame
import { useCurrentFrame, interpolate } from 'remotion';
const MyComponent = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1]);
return <div style={{ opacity }}>Hello</div>;
};
Sequencing
import { Sequence } from 'remotion';
<Sequence from={0} durationInFrames={60}>
<Scene1 />
</Sequence>
<Sequence from={60} durationInFrames={60}>
<Scene2 />
</Sequence>
Detailed Rules
Load specific rules for detailed guidance:
| Rule | When to Load |
|---|---|
rules/animations.md |
Fundamental animation patterns |
rules/compositions.md |
Defining compositions, stills, folders |
rules/subtitles.md |
Captions and subtitle rendering |
rules/timing.md |
Interpolation, easing, springs |
rules/videos.md |
Embedding videos - trim, volume, speed |
Quick Reference
Interpolation
// Linear interpolation
const value = interpolate(frame, [0, 100], [0, 1]);
// With easing
const value = interpolate(frame, [0, 100], [0, 1], {
easing: Easing.bezier(0.25, 0.1, 0.25, 1),
});
// Clamped (default extrapolateLeft/Right: 'clamp')
const value = interpolate(frame, [0, 100], [0, 1], {
extrapolateLeft: 'clamp',
extrapolateRight: 'clamp',
});
Spring Animation
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
const { fps } = useVideoConfig();
const scale = spring({
frame,
fps,
config: { damping: 200 },
});
Media
import { Video, Audio, Img, staticFile } from 'remotion';
// Local file
<Video src={staticFile('video.mp4')} />
// With controls
<Video
src={src}
volume={0.5}
startFrom={30}
endAt={120}
/>
Integration Notes
- Works with React 18+
- Use
staticFile()for assets in/public - Frame-based timing (not time-based)
- SSR-compatible components
Source: remotion-dev/skills
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
majiayu000/claude-skill-registry
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
majiayu000/claude-skill-registry
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?