# remotion-best-practices

> Claude/Codex skill by [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 197 stars · Updated 2026-05-03

Best practices for Remotion - Video creation in React

## Install

```sh
git clone https://github.com/remotion-dev/html-in-canvas /tmp/html-in-canvas && ln -s /tmp/html-in-canvas/.agents/skills/remotion-best-practices ~/.claude/skills/remotion-best-practices
```

## From README

When to use Use this skills whenever you are dealing with Remotion code to obtain the domain-specific knowledge. New project When in an empty folder or workspace with no existing Remotion project, scaffold one using: Replace my-video with a suitable project name. Designing a video Animate properties using useCurrentFrame() and interpolate(). Use Easing to customize the timing of the animation. CSS transitions or animations are FORBIDDEN - they will not render correctly. Tailwind animation class names are FORBIDDEN - they will not render correctly. Place assets in the public/ folder at your project root. Use staticFile() to reference files from the public/ folder. Add images using the component: Add videos using the component from @remotion/media: Add audio using the component from @remotion/media: Assets can be also referenced as remote URLs: To delay content wrap it in and use from. To limit the duration of an element, use durationInFrames of . by default is an absolute fill.

## Links

- HTML page: https://omgskills.com/skills/remotion-dev/html-in-canvas/remotion-best-practices/
- GitHub: https://github.com/remotion-dev/html-in-canvas
- Author: [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md)

## More skills by this author

- [pr-name](https://omgskills.com/skills/remotion-dev/remotion/pr-name/index.md) — Used to review or correct a Remotion pull request title
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars
- [add-cli-option](https://omgskills.com/skills/remotion-dev/remotion/add-cli-option/index.md) — Used to add a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring...
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars
- [add-effect](https://omgskills.com/skills/remotion-dev/remotion/add-effect/index.md) — Used to add a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images,...
   - [@remotion-dev](https://omgskills.com/library/remotion-dev/index.md) · 66k stars