Agent skill
remotion-best-practices
Generate Remotion video compositions with React. Use when creating videos, animations, property showcases, or any video rendering task. Provides frame-based animation patterns, composition setup, and Remotion-specific APIs.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/remotion-best-practices-bobby44-max-boston-luxury-re-pro
SKILL.md
Remotion Video Generation
Core Principles
- ALL animations use
useCurrentFrame()- NEVER CSS transitions - Use
staticFile()for local assets in /public - Always clamp interpolations with
extrapolateRight: 'clamp' - Premount sequences with
premountForprop for smooth transitions - Use
delayRender()andcontinueRender()for async data
Quick Reference
Animation Pattern
import { useCurrentFrame, interpolate } from 'remotion';
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 30], [0, 1], {
extrapolateRight: 'clamp',
});
const scale = interpolate(frame, [0, 30], [0.8, 1], {
extrapolateRight: 'clamp',
easing: Easing.out(Easing.cubic),
});
Composition Setup
import { Composition } from 'remotion';
<Composition
id="PropertyVideo"
component={PropertyShowcase}
durationInFrames={300}
fps={30}
width={1920}
height={1080}
schema={PropertySchema}
defaultProps={{ ... }}
/>
Sequence Pattern
<Sequence from={0} durationInFrames={90}>
<Scene1 />
</Sequence>
<Sequence from={90} durationInFrames={90}>
<Scene2 />
</Sequence>
Detailed Rules
- Animations: See rules/animations.md
- Compositions: See rules/compositions.md
- Timing: See rules/timing.md
- Assets: See rules/assets.md
- Transitions: See rules/transitions.md
- Captions: See rules/captions.md
Common Patterns
Spring Animation
import { spring, useCurrentFrame, useVideoConfig } from 'remotion';
const { fps } = useVideoConfig();
const scale = spring({
fps,
frame,
config: { damping: 200 },
});
Loading External Assets
import { delayRender, continueRender, staticFile } from 'remotion';
const [handle] = useState(() => delayRender());
useEffect(() => {
loadAsset().then(() => continueRender(handle));
}, []);
Audio Sync
import { Audio, Sequence } from 'remotion';
<Audio src={voiceoverUrl} volume={1} />
<Sequence from={30}> {/* Start after 1 second */}
<AnimatedText />
</Sequence>
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?