Remotion Best Practices
lyonjs/shortvid.io
Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.
Remotion (React video framework) production guide with Apple-style design rules.
Install Remotion Production Guide
$ npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config remotion-production-guide --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/video-production/remotion-production-guide .claude/skills/remotion-production-guide && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "remotion-production-guide" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/video-production/remotion-production-guide into .claude/skills/remotion-production-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-production-guide", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/video-production/remotion-production-guideType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config remotion-production-guide --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/video-production/remotion-production-guide .agents/skills/remotion-production-guide && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "remotion-production-guide" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/video-production/remotion-production-guide into .agents/skills/remotion-production-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-production-guide", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config remotion-production-guide --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/video-production/remotion-production-guide .cursor/skills/remotion-production-guide && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "remotion-production-guide" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/video-production/remotion-production-guide into .cursor/skills/remotion-production-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-production-guide", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/AnastasiyaW/codex-claude-code-config.git --path skills/video-production/remotion-production-guide--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config remotion-production-guide --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/video-production/remotion-production-guide .gemini/skills/remotion-production-guide && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "remotion-production-guide" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/video-production/remotion-production-guide into .gemini/skills/remotion-production-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-production-guide", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install AnastasiyaW/codex-claude-code-config remotion-production-guideInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/video-production/remotion-production-guide .github/skills/remotion-production-guide && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "remotion-production-guide" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/video-production/remotion-production-guide into .github/skills/remotion-production-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-production-guide", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install AnastasiyaW/codex-claude-code-config remotion-production-guide --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/AnastasiyaW/codex-claude-code-config.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/video-production/remotion-production-guide .opencode/skills/remotion-production-guide && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "remotion-production-guide" agent skill from https://github.com/AnastasiyaW/codex-claude-code-config/tree/main/skills/video-production/remotion-production-guide into .opencode/skills/remotion-production-guide/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-production-guide", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
remotion-production-guide- GitHub stars
- 154
- Token cost
- ~2k tokens
- SKILL.md length
- 475 words
- Files
- 1
- Skills in repo
- 50
- Repo updated
- First seen
- Licence
- MIT
At a glance
Remotion (React video framework) production guide with Apple-style design rules.
- : create video with remotion
- SKILL.md covers Quick Start, Project Structure, Constants-First Design and Animation Library, plus 11 more sections
- Calls npm and npx
- Remotion project
What it does
Remotion Production Guide is an agent skill from AnastasiyaW/codex-claude-code-config. Remotion (React video framework) production guide with Apple-style design rules. Use when: 'create video with remotion', 'remotion project', 'render video', 'product demo video', 'animated video', 'video from code'. Covers project setup, animation library, spring presets, typography rules, color palettes, pacing tables, scene templates, 3D integration, and export settings for all platforms. Do NOT use to write the script or narrative beats (use video-narrative-arc), to critique a script's impact (use…
Its SKILL.md is about 2k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.
It sits in Media & Creative, covering Video production. It works with Remotion, React and FFmpeg. The repository describes itself as: Claude Code, Codex, and multi-agent configuration system: principles, hooks, skills, and workflow patterns for AI-assisted development. The licence is MIT.
When your agent uses it
- : create video with remotion
- Remotion project
- Product demo video
- Video from code
Example prompts
- “create video with remotion”
- “remotion project”
- “render video”
- “/remotion-production-guide”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit 67709af. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
npmnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md. Its commands use npm and npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Remotion Production Guide loads about 2k tokens when it runs. Until then it costs about 178 tokens; SKILL.md has 475 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.
SKILL.md
The full file from AnastasiyaW/codex-claude-code-config at commit 67709af, republished under its MIT licence (© AnastasiyaW). 475 words, ~2,000 tokens.
Download SKILL.mdSave it as
.claude/skills/remotion-production-guide/SKILL.md (or your agent's skills folder).- name
- remotion-production-guide
- description
- Remotion (React video framework) production guide with Apple-style design rules. Use when: 'create video with remotion', 'remotion project', 'render video', 'product demo video', 'animated video', 'video from code'. Covers project setup, animation library, spring presets, typography rules, color palettes, pacing tables, scene templates, 3D integration, and export settings for all platforms. Do NOT use to write the script or narrative beats (use video-narrative-arc), to critique a script's impact (use script-evaluator), or for FFmpeg audio mastering/captions/platform color-grade on a finished render (use video-post-production); this stage builds and renders scenes in React/code.
Remotion Production Guide
Complete reference for creating production-quality videos with Remotion. Combines Apple-style design rules, motion design principles, and battle-tested animation patterns.
Quick Start
mkdir -p src && npm init -y
npm install --save-exact remotion @remotion/cli react react-dom typescript @types/react
echo "node_modules/\ndist/\nout/\n.cache/" > .gitignoreProject Structure
src/
index.ts # registerRoot
Root.tsx # Composition registration
videos/
ProductDemo/
index.tsx # Main composition
scenes/ # One file per scene
components/ # Reusable visual elements
lib/
constants.ts # ALL editable values (colors, timing, fonts, sizes)
animations.ts # Reusable animation helpers
public/ # Static assets (images, music, sounds)Constants-First Design
ALWAYS define all values in constants.ts. Never hardcode in components:
export const COLORS = {
bg: '#000000',
text: '#FFFFFF',
accent: '#007AFF',
muted: '#8E8E93',
cardBg: '#1C1C1E',
} as const;
export const TIMING = {
fps: 30,
fadeIn: 15, // 500ms
fadeOut: 12, // 400ms
stagger: 4, // 133ms between items
} as const;
export const SIZES = {
heroText: 120, // px
titleText: 72,
subtitleText: 42,
bodyText: 28,
captionText: 20, // NEVER below 16
} as const;Animation Library
import { interpolate, spring, Easing } from 'remotion';
// --- Opacity ---
export const fadeIn = (frame: number, delay = 0, duration = 15) =>
interpolate(frame, [delay, delay + duration], [0, 1], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
easing: Easing.out(Easing.cubic),
});
// --- Movement ---
export const slideUp = (frame: number, delay = 0, distance = 40) =>
interpolate(frame, [delay, delay + 20], [distance, 0], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
easing: Easing.out(Easing.cubic),
});
// --- Scale ---
export const scalePop = (frame: number, fps: number, delay = 0) =>
Math.min(spring({ frame: frame - delay, fps, config: { damping: 12, mass: 0.5 } }), 1);
// --- Stagger ---
export const stagger = (index: number, base = 0, gap = 4) => base + index * gap;
// --- Counter ---
export const countTo = (frame: number, target: number, delay = 0, duration = 30) =>
Math.round(target * interpolate(frame, [delay, delay + duration], [0, 1], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
easing: Easing.out(Easing.cubic),
}));Spring Presets
| Name | Config | Use Case |
|---|---|---|
| Smooth | { damping: 200 } | Default transitions |
| Snappy | { damping: 20, stiffness: 200 } | Quick appearances |
| Bouncy | { damping: 8, stiffness: 200 } | Playful elements (badges, icons) |
| Gentle | { damping: 200, stiffness: 50 } | Large elements (product images) |
Typography Rules
| Role | Size | Weight | Timing on Screen |
|---|---|---|---|
| Hero number/stat | 120-200px | 800-900 | 3-5 seconds |
| Section title | 64-80px | 600 | 2-4 seconds |
| Subtitle | 36-48px | 500 | 2-3 seconds |
| Body text | 24-32px | 400 | min 2 seconds |
| Caption | 16-20px | 400 | min 1.5 seconds |
| NEVER | <16px | - | - illegible on video |
Rules:
- Letter-spacing: -1 to -2px for large text (>48px)
- Line-height: 1.1-1.2 for headings, 1.4 for body
- Max 7 words on screen simultaneously
- NEVER animate text while expecting reading
- Font: Inter, Geist Sans, or system-ui
Animation Timing
| Type | Frames @30fps | ms |
|---|---|---|
| Text fade in | 9-15 | 300-500 |
| Text fade out | 6-12 | 200-400 |
| Slide in | 12-18 | 400-600 |
| Product appear | 18-30 | 600-1000 |
| Scale pop | 6-12 | 200-400 |
| Scene transition | 9-15 | 300-500 |
| Item stagger | 2-4 | 67-133 |
Easing Reference
| Use Case | Easing |
|---|---|
| Element entering | Easing.out(Easing.cubic) |
| Element exiting | Easing.in(Easing.cubic) |
| Apple-style | Easing.bezier(0.25, 0.1, 0.25, 1.0) |
| Dramatic enter | Easing.bezier(0.05, 0.7, 0.1, 1.0) |
| Material Standard | Easing.bezier(0.4, 0.0, 0.2, 1.0) |
| NEVER | linear (except progress bars) |
Color Palettes
Dark theme (premium/tech): bg #000/#0A0A0A, text #FFF, accent from brand Light theme (consumer/clean): bg #F5F3EF/#FFF, text #1D1D1F, accent from brand
- Max 3 colors + black/white/gray
- Background:text contrast min 7:1
- Use
linear-gradientfor premium text (WebkitBackgroundClip: 'text')
Scene Pacing
| Format | Total | Scenes | Frame Budget @30fps |
|---|---|---|---|
| 15s teaser | 450 frames | 5 | ~90 each |
| 30s demo | 900 frames | 5 | ~180 each |
| 60s launch | 1800 frames | 7 | ~260 each |
Breathing rule: After 3+ fast cuts, add one slow shot (5-8s). Alternate rhythm: FAST→SLOW→MEDIUM.
Show full SKILL.md (173 more words)Show less
Cross-Fade Wrapper
const Fade: React.FC<{ children: React.ReactNode; dur: number; fade?: number }> =
({ children, dur, fade = 15 }) => {
const frame = useCurrentFrame();
const inVal = interpolate(frame, [0, fade], [0, 1], { extrapolateRight: 'clamp' });
const outVal = interpolate(frame, [dur - fade, dur], [1, 0], {
extrapolateLeft: 'clamp', extrapolateRight: 'clamp',
});
return <AbsoluteFill style={{ opacity: Math.min(inVal, outVal) }}>{children}</AbsoluteFill>;
};3D Integration
# React Three Fiber in Remotion:
npm install @remotion/three @react-three/fiber three @types/three
# Lottie animations:
npm install @remotion/lottie lottie-web- Use
<ThreeCanvas>(not<Canvas>) for R3F in Remotion - Use
useCurrentFrame()instead of R3F'suseFrame() - Spline: design in spline.design, export to R3F, import via @remotion/three
Export Settings
| Platform | Resolution | Aspect | Command |
|---|---|---|---|
| YouTube | 1920x1080 | 16:9 | default |
| TikTok/Reels | 1080x1920 | 9:16 | --width 1080 --height 1920 |
| Instagram Square | 1080x1080 | 1:1 | --width 1080 --height 1080 |
# High quality master
npx remotion render src/index.ts CompositionId out/video.mp4
# Custom quality (CRF 18 = high, 28 = web preview)
npx remotion render src/index.ts CompositionId out/video.mp4 --crf 18Universal: MP4 container, H.264, AAC audio, yuv420p.
Critical Rules
- NEVER use CSS transitions/animations - won't render during export
- ALWAYS use
useCurrentFrame()+interpolate()orspring() - ALWAYS
extrapolateRight: 'clamp'to prevent overshoot spring()never reaches exactly 1.0 - useMath.min(spring(...), 1)for scale- Use
<Img>from remotion (not<img>) for reliable image loading - First render downloads Chrome Headless Shell (~108MB), subsequent use cache
- Google Fonts: use
@remotion/google-fontsfor reliable loading
DON'T List
- Don't rotate text
- Don't bounce text (unless playful brand)
- Don't animate 3+ elements simultaneously
- Don't use more than 2 animation styles per video
- Don't use star wipes or random transitions
- Don't put more than 7 words on screen at once
- Don't start with a logo (start with the hook)
- Don't commit node_modules
© AnastasiyaW, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
Just SKILL.md in skills/video-production/remotion-production-guide of AnastasiyaW/codex-claude-code-config.
Open the folder on GitHubat commit 67709af
Compare with similar skills
Remotion Production Guide next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Remotion Production Guide this skillAnastasiyaW/codex-claude-code-config | 154 | — | ~2k | Automated safety check: Pass | MIT | |
| Remotion Best Practiceslyonjs/shortvid.io | 147 | 33 repos | ~1k | Automated safety check: Pass | MIT | |
| Product DemoAlexwtlf/agentic-product-demo | 387 | — | ~8.8k | Automated safety check: Pass | Custom licence | |
| Remotion Video Factorywwwzhouhui/skills_collection | 283 | — | ~990 | Automated safety check: Pass | None | |
| Promo Video Makerliyupi/ai-promo-video-maker | 121 | — | ~145 | Automated safety check: Pass | MIT | |
| AI Mediaericrisco/rsc-harness | 190 | — | ~3.3k | Automated safety check: Pass | MIT |
Similar skills
Product Demo
Alexwtlf/agentic-product-demo
Shoot, animate, title and optionally score product demo videos with Remotion — for a landing page, docs, onboarding, an app store listing or a social post.
Remotion Video Factory
wwwzhouhui/skills_collection
视觉从代码生长的技术讲解视频工厂：给一个主题，产出一条"图解动画 + AI 配音"的 MP4——结构图/矩阵/连线拓扑/图表/数字滚动全部用 Remotion + React/SVG 代码精确绘制（不用 AI 视频模型，杜绝公式乱码与连线漂移，可参数化、改数据自动重排），旁白由 TTS 逐段生成 + ffprobe 实测时长（默认 edge-tts 神经音色；--engine clone…
Promo Video Maker
liyupi/ai-promo-video-maker
为产品、网站、App、SaaS、开源项目、课程、AI 模型或活动制作有商业质感的宣传片（4K MP4 + 网页版），流程包括调研、需求问询、风格样帧、真实页面 4K 截图、配乐卡点、AI 旁白、混音和自动校验。用户说「做宣传片」「做产品介绍视频」「做推广视频 / 预告片」「给这个项目做个视频」，或者要求 promo video、product trailer、launch video 时使用。
AI Media
ericrisco/rsc-harness
A skill your agent uses when a creative goal must become a finished media file: pick and order generative-media models per modality — AI voiceover, image-to-video clips, score — then glue them with…
Shortform Editing
ericrisco/rsc-harness
A skill your agent uses when you have raw 9:16 footage and need it cut into a post-ready vertical short — dead air removed, fast jump cuts, karaoke word-by-word burned-in captions from a transcript…
More from AnastasiyaW/codex-claude-code-config
All 50 skills in this repoBug Reproducer
AnastasiyaW/codex-claude-code-config
Find likely software bugs in a codebase, rank concrete bug candidates, and prove or reject them with focused regression tests before proposing a fix.
Motion Framer
AnastasiyaW/codex-claude-code-config
A skill your agent uses when implementing Motion or Framer Motion in React/JavaScript: interactive UI components, micro-interactions, gestures, layout or page transitions, and scroll-based animation.
Proof Verify
AnastasiyaW/codex-claude-code-config
Plan-based verification - freeze acceptance criteria before building, then verify after with an independent fresh-context agent (the builder must not verify their own work).
Workflow Orchestration
AnastasiyaW/codex-claude-code-config
Написание и запуск Claude Code dynamic workflows (JS-оркестратор субагентов).
Notebooklm Grounded Research
AnastasiyaW/codex-claude-code-config
A skill your agent uses when: NotebookLM, notebooklm MCP, large documentation sets, courses, books, papers, or citation-backed research are mentioned.
Deepseek Provider Contract
AnastasiyaW/codex-claude-code-config
Validate a proposed DeepSeek API integration before any key or project context is sent: check thinking-mode tool-call history, strict-schema assumptions, bounded output, and provider data boundaries.
Related
Categories
Questions about Remotion Production Guide
What does Remotion Production Guide do?
Remotion (React video framework) production guide with Apple-style design rules. Remotion Production Guide is an agent skill from AnastasiyaW/codex-claude-code-config. Remotion (React video framework) production guide with Apple-style design rules.
When should I use Remotion Production Guide?
Remotion Production Guide fits situations like: : create video with remotion; remotion project; product demo video; video from code.
How do I install Remotion Production Guide in Claude Code?
Run `npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a claude-code`. Or copy the skill folder (skills/video-production/remotion-production-guide in AnastasiyaW/codex-claude-code-config) into .claude/skills/remotion-production-guide in your project. Claude Code loads it when a task matches its description.
How do I install Remotion Production Guide in Codex?
Run `npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a codex`. Or copy the skill folder (skills/video-production/remotion-production-guide in AnastasiyaW/codex-claude-code-config) into .agents/skills/remotion-production-guide in your project. Codex loads it when a task matches its description.
Can I use Remotion Production Guide in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add AnastasiyaW/codex-claude-code-config --skill remotion-production-guide -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/remotion-production-guide, .gemini/skills/remotion-production-guide, .github/skills/remotion-production-guide and .opencode/skills/remotion-production-guide in your project.
What does Remotion Production Guide need to run?
Going by SKILL.md and its folder, Remotion Production Guide needs the command-line tools its instructions call (npm and npx). Our summary lists: Node.js.
Does Remotion Production Guide access the network?
SKILL.md contains no URLs. Its commands use npm and npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Is Remotion Production Guide safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.
What licence does Remotion Production Guide use?
Remotion Production Guide is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Remotion Production Guide use?
About 2k tokens (SKILL.md is roughly 8k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.
What are the alternatives to Remotion Production Guide?
Skills that share tags, products or a category with Remotion Production Guide: Remotion Best Practices (lyonjs/shortvid.io, 147 stars), Product Demo (Alexwtlf/agentic-product-demo, 387 stars), Remotion Video Factory (wwwzhouhui/skills_collection, 283 stars) and Promo Video Maker (liyupi/ai-promo-video-maker, 121 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Remotion Production Guide?
AnastasiyaW (a GitHub user) maintains it in AnastasiyaW/codex-claude-code-config, which has 154 GitHub stars. The repository holds 50 skills in this directory. The repository was last updated on October 9, 2026.
Source: AnastasiyaW/codex-claude-code-config on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.