Install Remotion, set up Remotion, add Remotion to a project, install Remotion AI skills, update Remotion, upgrade Remotion packages, check Remotion version, set up video project with Remotion, remotion skills, remotion rules
Full lifecycle skill for Remotion: fresh install, AI skill rules setup, and updates.
Determine what already exists before taking any action.
Check for Remotion installation:
# Look for remotion in package.json (current dir and remotion/ subdir)
cat package.json 2>/dev/null | grep -E '"remotion|@remotion' | head -5
cat remotion/package.json 2>/dev/null | grep -E '"remotion|@remotion' | head -5
Check for AI skill rules:
# Look for skill files in project-level .claude/skills/remotion/
ls .claude/skills/remotion/SKILL.md 2>/dev/null
ls .claude/skills/remotion/rules/*.md 2>/dev/null | wc -l
Based on results, branch to:
Report what was detected and which path you're taking.
Ask the user which approach they want:
npx create-video@latest
Recommend: Blank template, TailwindCSS enabled, install AI skills when prompted.
If npx create-video fails on Windows (spawn ENOENT), fall back to manual setup:
mkdir remotion && cd remotion
npm init -y
npm i --save-exact remotion@latest @remotion/cli@latest @remotion/player@latest
npm i --save-exact remotion@latest @remotion/cli@latest
Only add the core packages. Ask user which extras they need:
@remotion/player — embed videos in React apps@remotion/transitions — transition effects@remotion/google-fonts — Google Fonts support@remotion/media — media utilities@remotion/tailwind — TailwindCSS integrationThese are Claude Code rule files from the remotion-dev/skills GitHub repo. They go into the project-level .claude/skills/remotion/ directory.
npx remotion skills add remotion-dev/skills
If the CLI fails, manually fetch from GitHub:
Fetch the SKILL.md:
URL: https://raw.githubusercontent.com/remotion-dev/skills/main/skills/remotion/SKILL.md
Write to: .claude/skills/remotion/SKILL.md
Get the rules directory listing:
URL: https://github.com/remotion-dev/skills/tree/main/skills/remotion/rules
Extract all .md filenames from the page.
Fetch each rule file:
Raw URL pattern: https://raw.githubusercontent.com/remotion-dev/skills/main/skills/remotion/rules/{filename}
Write each to: .claude/skills/remotion/rules/{filename}
Report how many files were installed.
cd <remotion-dir>
npm view remotion version # latest on npm
cat package.json | grep -E '"remotion|@remotion' | head -10 # currently installed
Report current vs latest version. If already up to date, skip.
Try npx remotion upgrade first. On Windows this commonly fails with spawn npm ENOENT. If it fails:
remotion / @remotion/* packagesnpm i --save-exact --no-fund --no-audit [email protected] @remotion/[email protected] @remotion/[email protected] ...
Only include packages already in the project's package.json — don't add new ones.
Try npx remotion skills update first. On Windows this commonly fails with spawn EINVAL. If it fails:
Fetch the rules directory listing from GitHub:
https://github.com/remotion-dev/skills/tree/main/skills/remotion/rules
Compare with local files using Glob on .claude/skills/remotion/rules/*.md
For new files not present locally, fetch raw content from:
https://raw.githubusercontent.com/remotion-dev/skills/main/skills/remotion/rules/{filename}
and write them to the local rules directory.
Note: Existing files may have upstream changes too. Mention this to the user and offer to re-pull specific files if needed.
Set up ElevenLabs text-to-speech and background music for walkthrough videos.
cd <remotion-dir>
npm i --save-dev @elevenlabs/elevenlabs-js dotenv
.env.localCreate remotion/.env.local with:
ELEVENLABS_API_KEY=
ELEVENLABS_VOICE_ID=
.gitignoreEnsure .env.local is in .gitignore (it usually is by default, but verify):
echo ".env.local" >> .gitignore
Browse the ElevenLabs Voice Library at https://elevenlabs.io/voice-library to find a voice that fits your project. Copy the Voice ID and paste it into .env.local as ELEVENLABS_VOICE_ID.
Browse https://pixabay.com/music/ for royalty-free background music. Download a track and place it at:
remotion/public/audio/bg-music.mp3
Choose something upbeat but not distracting — it will be ducked (volume lowered) during voiceover.
cd <remotion-dir>
cat package.json | grep -E '"remotion|@remotion' | head -10
Count local skill rule files:
ls .claude/skills/remotion/rules/*.md 2>/dev/null | wc -l
Optionally test the setup works:
cd <remotion-dir>
npx remotion compositions
If the project has a memory file tracking the Remotion version or skill count (e.g. in .claude/projects/*/memory/remotion.md), update it with the new version number and skill file count.
A properly configured Remotion project in a brownfield codebase (e.g. Remotion living inside a larger app):
Directory structure:
project-root/
├── remotion/ # Remotion lives in its own subdirectory
│ ├── package.json # Separate package.json with Remotion deps
│ ├── remotion.config.ts
│ ├── tsconfig.json
│ ├── src/ # Compositions, components, utilities
│ ├── public/ # Static assets (images, audio, fonts)
│ ├── scripts/ # Helper scripts (e.g. ElevenLabs TTS)
│ └── out/ # Rendered output (gitignored)
├── .claude/
│ └── skills/
│ └── remotion/ # AI skill rules (project-level)
│ ├── SKILL.md
│ └── rules/ # ~35+ rule .md files
└── ...
Typical package.json dependencies:
{
"dependencies": {
"remotion": "4.x.x",
"@remotion/cli": "4.x.x",
"@remotion/player": "4.x.x",
"@remotion/transitions": "4.x.x",
"@remotion/google-fonts": "4.x.x",
"@remotion/media": "4.x.x",
"react": "^18.3.1",
"react-dom": "^18.3.1"
},
"devDependencies": {
"@types/react": "^18.3.0",
"typescript": "^5.0.0"
}
}
All remotion and @remotion/* packages must be on the same exact version (use --save-exact).
https://github.com/remotion-dev/skillshttps://raw.githubusercontent.com/remotion-dev/skills/main/skills/remotion/SKILL.mdhttps://github.com/remotion-dev/skills/tree/main/skills/remotion/ruleshttps://raw.githubusercontent.com/remotion-dev/skills/main/skills/remotion/rules/{filename}