Skill · em Criar imagem, vídeo e arte

remotion

Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling

Procedência

Origem: davila7/claude-code-templates
Caminho: cli-tool/components/skills/video/remotion
Versão fixada: 57f899e5394bb8ca166f38eacae8f0853cbfe033
Licença: MIT
Espelhado em 25/09/2026
24 downloads no Claude Code Templates (lido em 25/09/2026)

Antes de instalar

32 arquivos · 78,9 KB · inclui 3 scripts que executam: references/assets/charts/bar-chart.tsx, references/assets/text-animations-typewriter.tsx, references/assets/text-animations-word-highlight.tsx

Instalar na sua CLI

O comando baixa a versão fixada (commit 57f899e) direto da origem, para a pasta que a CLI lê. Precisa de curl (macOS e Linux); no Windows não há comando, porque o Rook Labs é para macOS.

Claude Code

Neste projeto: instala em .claude/skills/remotion/.

d=".claude/skills/remotion"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/remotion"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/3d.md" "$u/references/3d.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/assets.md" "$u/references/assets.md" \
  -o "$d/references/assets/charts/bar-chart.tsx" "$u/references/assets/charts/bar-chart.tsx" \
  -o "$d/references/assets/text-animations-typewriter.tsx" "$u/references/assets/text-animations-typewriter.tsx" \
  -o "$d/references/assets/text-animations-word-highlight.tsx" "$u/references/assets/text-animations-word-highlight.tsx" \
  -o "$d/references/audio.md" "$u/references/audio.md" \
  -o "$d/references/calculate-metadata.md" "$u/references/calculate-metadata.md" \
  -o "$d/references/can-decode.md" "$u/references/can-decode.md" \
  -o "$d/references/charts.md" "$u/references/charts.md" \
  -o "$d/references/compositions.md" "$u/references/compositions.md" \
  -o "$d/references/display-captions.md" "$u/references/display-captions.md" \
  -o "$d/references/extract-frames.md" "$u/references/extract-frames.md" \
  -o "$d/references/fonts.md" "$u/references/fonts.md" \
  -o "$d/references/get-audio-duration.md" "$u/references/get-audio-duration.md" \
  -o "$d/references/get-video-dimensions.md" "$u/references/get-video-dimensions.md" \
  -o "$d/references/get-video-duration.md" "$u/references/get-video-duration.md" \
  -o "$d/references/gifs.md" "$u/references/gifs.md" \
  -o "$d/references/images.md" "$u/references/images.md" \
  -o "$d/references/import-srt-captions.md" "$u/references/import-srt-captions.md" \
  -o "$d/references/lottie.md" "$u/references/lottie.md" \
  -o "$d/references/measuring-dom-nodes.md" "$u/references/measuring-dom-nodes.md" \
  -o "$d/references/measuring-text.md" "$u/references/measuring-text.md" \
  -o "$d/references/sequencing.md" "$u/references/sequencing.md" \
  -o "$d/references/tailwind.md" "$u/references/tailwind.md" \
  -o "$d/references/text-animations.md" "$u/references/text-animations.md" \
  -o "$d/references/timing.md" "$u/references/timing.md" \
  -o "$d/references/transcribe-captions.md" "$u/references/transcribe-captions.md" \
  -o "$d/references/transitions.md" "$u/references/transitions.md" \
  -o "$d/references/trimming.md" "$u/references/trimming.md" \
  -o "$d/references/videos.md" "$u/references/videos.md"

Global: instala em ~/.claude/skills/remotion/.

d="$HOME/.claude/skills/remotion"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/remotion"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/3d.md" "$u/references/3d.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/assets.md" "$u/references/assets.md" \
  -o "$d/references/assets/charts/bar-chart.tsx" "$u/references/assets/charts/bar-chart.tsx" \
  -o "$d/references/assets/text-animations-typewriter.tsx" "$u/references/assets/text-animations-typewriter.tsx" \
  -o "$d/references/assets/text-animations-word-highlight.tsx" "$u/references/assets/text-animations-word-highlight.tsx" \
  -o "$d/references/audio.md" "$u/references/audio.md" \
  -o "$d/references/calculate-metadata.md" "$u/references/calculate-metadata.md" \
  -o "$d/references/can-decode.md" "$u/references/can-decode.md" \
  -o "$d/references/charts.md" "$u/references/charts.md" \
  -o "$d/references/compositions.md" "$u/references/compositions.md" \
  -o "$d/references/display-captions.md" "$u/references/display-captions.md" \
  -o "$d/references/extract-frames.md" "$u/references/extract-frames.md" \
  -o "$d/references/fonts.md" "$u/references/fonts.md" \
  -o "$d/references/get-audio-duration.md" "$u/references/get-audio-duration.md" \
  -o "$d/references/get-video-dimensions.md" "$u/references/get-video-dimensions.md" \
  -o "$d/references/get-video-duration.md" "$u/references/get-video-duration.md" \
  -o "$d/references/gifs.md" "$u/references/gifs.md" \
  -o "$d/references/images.md" "$u/references/images.md" \
  -o "$d/references/import-srt-captions.md" "$u/references/import-srt-captions.md" \
  -o "$d/references/lottie.md" "$u/references/lottie.md" \
  -o "$d/references/measuring-dom-nodes.md" "$u/references/measuring-dom-nodes.md" \
  -o "$d/references/measuring-text.md" "$u/references/measuring-text.md" \
  -o "$d/references/sequencing.md" "$u/references/sequencing.md" \
  -o "$d/references/tailwind.md" "$u/references/tailwind.md" \
  -o "$d/references/text-animations.md" "$u/references/text-animations.md" \
  -o "$d/references/timing.md" "$u/references/timing.md" \
  -o "$d/references/transcribe-captions.md" "$u/references/transcribe-captions.md" \
  -o "$d/references/transitions.md" "$u/references/transitions.md" \
  -o "$d/references/trimming.md" "$u/references/trimming.md" \
  -o "$d/references/videos.md" "$u/references/videos.md"

Codex

Neste projeto: instala em .agents/skills/remotion/.

d=".agents/skills/remotion"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/remotion"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/3d.md" "$u/references/3d.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/assets.md" "$u/references/assets.md" \
  -o "$d/references/assets/charts/bar-chart.tsx" "$u/references/assets/charts/bar-chart.tsx" \
  -o "$d/references/assets/text-animations-typewriter.tsx" "$u/references/assets/text-animations-typewriter.tsx" \
  -o "$d/references/assets/text-animations-word-highlight.tsx" "$u/references/assets/text-animations-word-highlight.tsx" \
  -o "$d/references/audio.md" "$u/references/audio.md" \
  -o "$d/references/calculate-metadata.md" "$u/references/calculate-metadata.md" \
  -o "$d/references/can-decode.md" "$u/references/can-decode.md" \
  -o "$d/references/charts.md" "$u/references/charts.md" \
  -o "$d/references/compositions.md" "$u/references/compositions.md" \
  -o "$d/references/display-captions.md" "$u/references/display-captions.md" \
  -o "$d/references/extract-frames.md" "$u/references/extract-frames.md" \
  -o "$d/references/fonts.md" "$u/references/fonts.md" \
  -o "$d/references/get-audio-duration.md" "$u/references/get-audio-duration.md" \
  -o "$d/references/get-video-dimensions.md" "$u/references/get-video-dimensions.md" \
  -o "$d/references/get-video-duration.md" "$u/references/get-video-duration.md" \
  -o "$d/references/gifs.md" "$u/references/gifs.md" \
  -o "$d/references/images.md" "$u/references/images.md" \
  -o "$d/references/import-srt-captions.md" "$u/references/import-srt-captions.md" \
  -o "$d/references/lottie.md" "$u/references/lottie.md" \
  -o "$d/references/measuring-dom-nodes.md" "$u/references/measuring-dom-nodes.md" \
  -o "$d/references/measuring-text.md" "$u/references/measuring-text.md" \
  -o "$d/references/sequencing.md" "$u/references/sequencing.md" \
  -o "$d/references/tailwind.md" "$u/references/tailwind.md" \
  -o "$d/references/text-animations.md" "$u/references/text-animations.md" \
  -o "$d/references/timing.md" "$u/references/timing.md" \
  -o "$d/references/transcribe-captions.md" "$u/references/transcribe-captions.md" \
  -o "$d/references/transitions.md" "$u/references/transitions.md" \
  -o "$d/references/trimming.md" "$u/references/trimming.md" \
  -o "$d/references/videos.md" "$u/references/videos.md"

Global: instala em ~/.agents/skills/remotion/.

d="$HOME/.agents/skills/remotion"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/remotion"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/3d.md" "$u/references/3d.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/assets.md" "$u/references/assets.md" \
  -o "$d/references/assets/charts/bar-chart.tsx" "$u/references/assets/charts/bar-chart.tsx" \
  -o "$d/references/assets/text-animations-typewriter.tsx" "$u/references/assets/text-animations-typewriter.tsx" \
  -o "$d/references/assets/text-animations-word-highlight.tsx" "$u/references/assets/text-animations-word-highlight.tsx" \
  -o "$d/references/audio.md" "$u/references/audio.md" \
  -o "$d/references/calculate-metadata.md" "$u/references/calculate-metadata.md" \
  -o "$d/references/can-decode.md" "$u/references/can-decode.md" \
  -o "$d/references/charts.md" "$u/references/charts.md" \
  -o "$d/references/compositions.md" "$u/references/compositions.md" \
  -o "$d/references/display-captions.md" "$u/references/display-captions.md" \
  -o "$d/references/extract-frames.md" "$u/references/extract-frames.md" \
  -o "$d/references/fonts.md" "$u/references/fonts.md" \
  -o "$d/references/get-audio-duration.md" "$u/references/get-audio-duration.md" \
  -o "$d/references/get-video-dimensions.md" "$u/references/get-video-dimensions.md" \
  -o "$d/references/get-video-duration.md" "$u/references/get-video-duration.md" \
  -o "$d/references/gifs.md" "$u/references/gifs.md" \
  -o "$d/references/images.md" "$u/references/images.md" \
  -o "$d/references/import-srt-captions.md" "$u/references/import-srt-captions.md" \
  -o "$d/references/lottie.md" "$u/references/lottie.md" \
  -o "$d/references/measuring-dom-nodes.md" "$u/references/measuring-dom-nodes.md" \
  -o "$d/references/measuring-text.md" "$u/references/measuring-text.md" \
  -o "$d/references/sequencing.md" "$u/references/sequencing.md" \
  -o "$d/references/tailwind.md" "$u/references/tailwind.md" \
  -o "$d/references/text-animations.md" "$u/references/text-animations.md" \
  -o "$d/references/timing.md" "$u/references/timing.md" \
  -o "$d/references/transcribe-captions.md" "$u/references/transcribe-captions.md" \
  -o "$d/references/transitions.md" "$u/references/transitions.md" \
  -o "$d/references/trimming.md" "$u/references/trimming.md" \
  -o "$d/references/videos.md" "$u/references/videos.md"

Antigravity

Neste projeto: instala em .agents/skills/remotion/.

d=".agents/skills/remotion"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/remotion"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/3d.md" "$u/references/3d.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/assets.md" "$u/references/assets.md" \
  -o "$d/references/assets/charts/bar-chart.tsx" "$u/references/assets/charts/bar-chart.tsx" \
  -o "$d/references/assets/text-animations-typewriter.tsx" "$u/references/assets/text-animations-typewriter.tsx" \
  -o "$d/references/assets/text-animations-word-highlight.tsx" "$u/references/assets/text-animations-word-highlight.tsx" \
  -o "$d/references/audio.md" "$u/references/audio.md" \
  -o "$d/references/calculate-metadata.md" "$u/references/calculate-metadata.md" \
  -o "$d/references/can-decode.md" "$u/references/can-decode.md" \
  -o "$d/references/charts.md" "$u/references/charts.md" \
  -o "$d/references/compositions.md" "$u/references/compositions.md" \
  -o "$d/references/display-captions.md" "$u/references/display-captions.md" \
  -o "$d/references/extract-frames.md" "$u/references/extract-frames.md" \
  -o "$d/references/fonts.md" "$u/references/fonts.md" \
  -o "$d/references/get-audio-duration.md" "$u/references/get-audio-duration.md" \
  -o "$d/references/get-video-dimensions.md" "$u/references/get-video-dimensions.md" \
  -o "$d/references/get-video-duration.md" "$u/references/get-video-duration.md" \
  -o "$d/references/gifs.md" "$u/references/gifs.md" \
  -o "$d/references/images.md" "$u/references/images.md" \
  -o "$d/references/import-srt-captions.md" "$u/references/import-srt-captions.md" \
  -o "$d/references/lottie.md" "$u/references/lottie.md" \
  -o "$d/references/measuring-dom-nodes.md" "$u/references/measuring-dom-nodes.md" \
  -o "$d/references/measuring-text.md" "$u/references/measuring-text.md" \
  -o "$d/references/sequencing.md" "$u/references/sequencing.md" \
  -o "$d/references/tailwind.md" "$u/references/tailwind.md" \
  -o "$d/references/text-animations.md" "$u/references/text-animations.md" \
  -o "$d/references/timing.md" "$u/references/timing.md" \
  -o "$d/references/transcribe-captions.md" "$u/references/transcribe-captions.md" \
  -o "$d/references/transitions.md" "$u/references/transitions.md" \
  -o "$d/references/trimming.md" "$u/references/trimming.md" \
  -o "$d/references/videos.md" "$u/references/videos.md"

Global: instala em ~/.gemini/antigravity-cli/skills/remotion/.

d="$HOME/.gemini/antigravity-cli/skills/remotion"
u="https://raw.githubusercontent.com/davila7/claude-code-templates/57f899e5394bb8ca166f38eacae8f0853cbfe033/cli-tool/components/skills/video/remotion"
curl -fsSL --create-dirs \
  -o "$d/SKILL.md" "$u/SKILL.md" \
  -o "$d/references/3d.md" "$u/references/3d.md" \
  -o "$d/references/animations.md" "$u/references/animations.md" \
  -o "$d/references/assets.md" "$u/references/assets.md" \
  -o "$d/references/assets/charts/bar-chart.tsx" "$u/references/assets/charts/bar-chart.tsx" \
  -o "$d/references/assets/text-animations-typewriter.tsx" "$u/references/assets/text-animations-typewriter.tsx" \
  -o "$d/references/assets/text-animations-word-highlight.tsx" "$u/references/assets/text-animations-word-highlight.tsx" \
  -o "$d/references/audio.md" "$u/references/audio.md" \
  -o "$d/references/calculate-metadata.md" "$u/references/calculate-metadata.md" \
  -o "$d/references/can-decode.md" "$u/references/can-decode.md" \
  -o "$d/references/charts.md" "$u/references/charts.md" \
  -o "$d/references/compositions.md" "$u/references/compositions.md" \
  -o "$d/references/display-captions.md" "$u/references/display-captions.md" \
  -o "$d/references/extract-frames.md" "$u/references/extract-frames.md" \
  -o "$d/references/fonts.md" "$u/references/fonts.md" \
  -o "$d/references/get-audio-duration.md" "$u/references/get-audio-duration.md" \
  -o "$d/references/get-video-dimensions.md" "$u/references/get-video-dimensions.md" \
  -o "$d/references/get-video-duration.md" "$u/references/get-video-duration.md" \
  -o "$d/references/gifs.md" "$u/references/gifs.md" \
  -o "$d/references/images.md" "$u/references/images.md" \
  -o "$d/references/import-srt-captions.md" "$u/references/import-srt-captions.md" \
  -o "$d/references/lottie.md" "$u/references/lottie.md" \
  -o "$d/references/measuring-dom-nodes.md" "$u/references/measuring-dom-nodes.md" \
  -o "$d/references/measuring-text.md" "$u/references/measuring-text.md" \
  -o "$d/references/sequencing.md" "$u/references/sequencing.md" \
  -o "$d/references/tailwind.md" "$u/references/tailwind.md" \
  -o "$d/references/text-animations.md" "$u/references/text-animations.md" \
  -o "$d/references/timing.md" "$u/references/timing.md" \
  -o "$d/references/transcribe-captions.md" "$u/references/transcribe-captions.md" \
  -o "$d/references/transitions.md" "$u/references/transitions.md" \
  -o "$d/references/trimming.md" "$u/references/trimming.md" \
  -o "$d/references/videos.md" "$u/references/videos.md"

Peça ao Rook

Já usa o Rook Labs? Cole no chat do Rook: instale a skill https://rooklabs.sh/marketplace/cct.remotion

Prévia do SKILL.md

---
name: remotion
description: Best practices and comprehensive guide for Remotion - programmatic video creation in React with animations, compositions, and media handling
version: 1.0.0
author: remotion-dev
repo: https://github.com/remotion-dev/skills
license: MIT
tags: [Video, React, Animation, Remotion, Composition, Media, 3D, Audio, Captions, Charts, Lottie, Tailwind]
dependencies: [remotion>=4.0.0, react>=18.0.0]
---

# Remotion - Video Creation in React

Comprehensive skill set for creating programmatic videos using Remotion, a framework for creating videos programmatically using React.

## When to use

Use this skill whenever you are dealing with Remotion code to obtain domain-specific knowledge about:

- Creating video compositions with React components
- Animating elements using frame-based animations
- Working with audio, video, and image assets
- Building charts and data visualizations
- Implementing text animations and captions
- Using 3D content with Three.js
- Applying transitions and sequencing
- Integrating Tailwind CSS and Lottie animations

## Core Concepts

Remotion allows you to create videos using:
- **React Components**: Build video content with familiar React syntax
- **Frame-based Animations**: All animations driven by `useCurrentFrame()` hook
- **Compositions**: Define video compositions with duration, dimensions, and props
- **Assets**: Import and manipulate images, videos, audio, and fonts
- **Rendering**: Export videos programmatically with customizable settings

## Key Features

- Frame-by-frame control over animations
…

Ver todo o marketplace