Remotion Best Practices
lyonjs/shortvid.io
Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.
Video editing pipeline: cut footage, assemble clips via FFmpeg and Remotion.
$ npx skills add notque/vexjoy-agent --skill video-editing -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install notque/vexjoy-agent video-editing --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/notque/vexjoy-agent.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/content/video-editing .claude/skills/video-editing && 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 "video-editing" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/content/video-editing into .claude/skills/video-editing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-editing", 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/notque/vexjoy-agent/tree/main/skills/content/video-editingType 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 notque/vexjoy-agent --skill video-editing -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install notque/vexjoy-agent video-editing --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/content/video-editing .agents/skills/video-editing && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "video-editing" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/content/video-editing into .agents/skills/video-editing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-editing", 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 notque/vexjoy-agent --skill video-editing -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install notque/vexjoy-agent video-editing --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/content/video-editing .cursor/skills/video-editing && 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 "video-editing" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/content/video-editing into .cursor/skills/video-editing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-editing", 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/notque/vexjoy-agent.git --path skills/content/video-editing--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 notque/vexjoy-agent --skill video-editing -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install notque/vexjoy-agent video-editing --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/content/video-editing .gemini/skills/video-editing && 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 "video-editing" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/content/video-editing into .gemini/skills/video-editing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-editing", 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 notque/vexjoy-agent video-editingInstalls 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 notque/vexjoy-agent --skill video-editing -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/content/video-editing .github/skills/video-editing && 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 "video-editing" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/content/video-editing into .github/skills/video-editing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-editing", 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 notque/vexjoy-agent --skill video-editing -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install notque/vexjoy-agent video-editing --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/notque/vexjoy-agent.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/content/video-editing .opencode/skills/video-editing && 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 "video-editing" agent skill from https://github.com/notque/vexjoy-agent/tree/main/skills/content/video-editing into .opencode/skills/video-editing/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "video-editing", 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.
video-editingVideo editing pipeline: cut footage, assemble clips via FFmpeg and Remotion.
Video Editing is an agent skill from notque/vexjoy-agent. Video editing pipeline: cut footage, assemble clips via FFmpeg and Remotion.
Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 6 other files, including reference files (for example `references/ffmpeg-commands.md`, `references/ffmpeg-filters.md` and `references/image-to-video.md`).
It sits in Media & Creative, covering Video production. It works with FFmpeg and Remotion. The repository describes itself as: VexJoy AI Agent with Jev Intelligent Routing - /do routes plain-English requests to the right specialist agent and gates the work with reviews, tests, and a learning loop. The licence is MIT.
6 steps, taken from the step headings in SKILL.md.
Read from SKILL.md and the folder at commit 5218674. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
ReadWriteBashGrepGlobEditTaskSkillFrom allowed-tools in the SKILL.md frontmatter.
Shell commands in SKILL.md call:
yt-dlpnpxnpmaptpython3ffmpegFrom the folder's file list and the shell code blocks in SKILL.md.
Hosts in commands or code, which the agent is likely to contact:
nodejs.orgFrom URLs in SKILL.md, links to its own repository left out.
Names these keys or tokens, usually read from environment variables:
ELEVENLABS_API_KEYFrom names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Video Editing loads about 2.3k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 23 tokens; SKILL.md has 904 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.
The automated check noted patterns worth knowing about, such as sudo or a known installer.
allowed-tools: Read, Write, Bash, Grep, Glob, Edit, Task, SkillAutomated 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.
The full file from notque/vexjoy-agent at commit 5218674, republished under its MIT licence (© notque). 904 words, ~2,333 tokens.
.claude/skills/video-editing/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.This skill implements a 6-layer pipeline where AI handles judgment tasks (what to keep, what to cut, highlight selection) and FFmpeg/Remotion handle mechanical execution deterministically.
| Layer | Name | Mechanism | Primary Tool |
|---|---|---|---|
| 1 | CAPTURE | Inventory source footage | Bash + Glob |
| 2 | AI STRUCTURE | Transcript to EDL | LLM judgment |
| 3 | FFMPEG CUTS | EDL to segment files | FFmpeg (deterministic) |
| 4 | REMOTION COMPOSITION | Segments to TSX composition | Remotion + TypeScript |
| 5 | AI GENERATION | Fill gaps with generated assets | ElevenLabs / fal.ai (conditional) |
| 6 | FINAL POLISH | Human taste layer | Human + NLE |
| Signal | Load | Content |
|---|---|---|
| Shell commands for each phase, gate checks | references/phase-commands.md | Full command blocks for Phases 1-6 |
| FFmpeg recipes: cutting, concat, proxy, detection | references/ffmpeg-commands.md | Timestamp extraction, batch cutting, audio normalization, scene/silence detection |
| Remotion composition scaffold | references/remotion-scaffold.md | TSX composition template, render command, reuse patterns |
| Image-to-video pipeline | references/image-to-video.md | Validate, prepare, encode, verify workflow |
| FFmpeg filter graphs for visualization | references/ffmpeg-filters.md | Scale/pad, showwaves, showspectrum, overlay, complete filter graphs |
Hard requirements (BLOCK if missing): ffmpeg (all phases), node (Remotion / npx).
Soft requirements (WARN if missing): remotion (only required for Phase 4).
which ffmpeg >/dev/null 2>&1 || { echo "ERROR: ffmpeg not found. Install: brew install ffmpeg (macOS) | apt install ffmpeg (Linux)"; exit 1; }
which node >/dev/null 2>&1 || { echo "ERROR: node not found. Install: https://nodejs.org or via nvm"; exit 1; }
npx remotion --version >/dev/null 2>&1 || echo "WARNING: remotion CLI not found. Phase 4 unavailable. Install: npm install @remotion/cli"Goal: Inventory all source footage and confirm files exist on disk before any processing.
Constraint: Source files are read-only. All FFmpeg commands write to new files only. Never overwrite source footage.
Steps: locate source files (find), inspect each with ffprobe, generate proxies for files >10 min (see references/ffmpeg-commands.md -> Proxy Generation), create working directories (segments/, assembled/). Full command block: references/phase-commands.md -> Phase 1.
Gate: Source files confirmed on disk. File list written to source-inventory.txt. Proceed only when gate passes.
Goal: Analyze content and produce a written EDL (cuts.txt) that drives all downstream cutting.
Constraint: cuts.txt is the contract. The EDL file is the only source of truth for downstream phases. Do not hand-edit FFmpeg commands — generate them from the EDL.
Constraint: Before writing the EDL manually, run FFmpeg scene/silence detection. Detection output informs judgment, not replaces it.
Steps: transcribe with whisper/AssemblyAI, run scene/silence detection, apply judgment (what advances narrative, what is filler, target duration), write cuts.txt in EDL format START_TIME,END_TIME,LABEL, review for overlap and total duration. Full command block and EDL format example: references/phase-commands.md -> Phase 2.
Gate: transcript.txt exists. cuts.txt written to disk. Proceed only when both files exist.
Goal: Execute the EDL deterministically — one FFmpeg cut per segment in cuts.txt.
Constraint: Batch-cut from EDL using a loop. Do not create individual FFmpeg commands per cut. This ensures reproducibility and review capability as a list.
Constraint: Always generate concat-list.txt from cuts.txt order, not from shell glob. Shell glob (segments/*.mp4) sorts alphabetically, not by EDL order.
Steps: batch-cut from EDL with while loop (libx264/aac, -avoid_negative_ts make_zero), verify segments, generate concat-list.txt in EDL order, concat with -f concat -safe 0 -c copy. Full command block: references/phase-commands.md -> Phase 3. See also references/ffmpeg-commands.md -> Batch Cutting.
Gate: All segment files exist. assembled/rough-cut.mp4 written to disk. Proceed only when gate passes.
Goal: Wrap segments in a Remotion TSX composition for programmatic overlays, titles, or transitions.
When to use: Only when rough-cut.mp4 requires programmatic elements (animated titles, lower thirds, caption tracks, brand overlays). If rough-cut.mp4 is sufficient, skip to Phase 6.
Constraint: Layer 4 requires TypeScript/React. Hand off to typescript-frontend-engineer for TSX work; return to python-general-engineer for Phase 5 onward.
Steps: initialize Remotion (npm create video@latest first time; otherwise npm install @remotion/cli @remotion/player remotion), scaffold composition (see references/remotion-scaffold.md), render with npx remotion render. Full command block: references/phase-commands.md -> Phase 4.
Gate: assembled/remotion-output.mp4 exists. Proceed only when gate passes.
Goal: Fill genuine gaps in source material with generated assets — only when needed.
Constraint: Check whether existing footage covers the gap before generating anything. Generate only what doesn't exist.
Decision tree: cut around the gap → update cuts.txt and re-run Phase 3; voiceover → ElevenLabs (authorization required); music → fal.ai (defer to fal-ai-media); b-roll → fal.ai (defer to fal-ai-media). ElevenLabs Python helper, authorization pattern, and save-to-disk flow: references/phase-commands.md -> Phase 5.
Gate: All required generated assets saved to assets/ directory before proceeding.
Goal: Deliver assembled output and hand off taste-layer work to human.
Constraint: Layer 6 is human territory. The skill assembles; the human finishes. The following require human judgment and should not be attempted programmatically:
Handoff template (handoff-notes.txt with source list, EDL, rough-cut path, remaining-for-human checklist): references/phase-commands.md -> Phase 6.
Gate: assembled/rough-cut.mp4 (or assembled/remotion-output.mp4) exists. handoff-notes.txt written to disk.
Pull a video's transcript as readable paragraphs. Prefer uploader subtitles; fall back to auto-generated.
# Path 1: uploader subtitles (accurate)
yt-dlp --skip-download --write-subs --sub-langs en --sub-format vtt -o '<work-dir>/%(id)s' '<URL>'
# Path 2: auto-generated (fallback when path 1 writes no file)
yt-dlp --skip-download --write-auto-subs --sub-langs en --sub-format vtt -o '<work-dir>/%(id)s' '<URL>'
# Clean VTT to paragraphs
python3 skills/research/video-transcript/scripts/vtt_to_paragraph.py <work-dir>/<id>.en.vttOptions: --timestamps for [mm:ss] markers, --keep-brackets for cue tags, -o FILE for file output. Other languages: change --sub-langs. List available: yt-dlp --list-subs '<URL>'.
| Error | Cause | Solution |
|---|---|---|
| "No such file or directory" on source | Path in cuts.txt doesn't match filename | Run cat source-inventory.txt. Quote paths with spaces. |
| FFmpeg "Invalid option" or codec errors | Codec unavailable or flag syntax error | ffmpeg -codecs | grep libx264. Fall back to -c:v copy. |
| Remotion "Could not find composition" | Composition ID mismatch | Check src/index.ts for registered ID. Match exactly in render command. |
| Segments concat in wrong order | Shell glob sorts alphabetically, not by EDL | Generate concat-list.txt from cuts.txt order, not from glob. |
| ElevenLabs 401 | ELEVENLABS_API_KEY not set | export ELEVENLABS_API_KEY=your_key before Phase 5. |
| No .vtt file from transcript extraction | Video has no subtitles in requested language | yt-dlp --list-subs '<URL>' and pick an available language. |
© notque, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 5 other files (references) in skills/content/video-editing of notque/vexjoy-agent.
Open the folder on GitHubat commit 5218674
Video Editing 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 |
|---|---|---|---|---|---|---|
| Video Editing this skillnotque/vexjoy-agent | 438 | — | ~2.3k | Automated safety check: Notes | MIT | |
| Remotion Best Practiceslyonjs/shortvid.io | 147 | 33 repos | ~1k | Automated safety check: Pass | MIT | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 59k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| ShortsAgriciDaniel/claude-shorts | 218 | — | ~3.2k | Automated safety check: Notes | MIT | |
| Black White Text OpenerPluviobyte/video-production-skills | 667 | — | ~1k | Automated safety check: Pass | None | |
| Product DemoAlexwtlf/agentic-product-demo | 370 | — | ~8.8k | Automated safety check: Pass | Custom licence |
lyonjs/shortvid.io
Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
AgriciDaniel/claude-shorts
Interactive longform-to-shortform video creator. An agent skill from AgriciDaniel/claude-shorts.
Pluviobyte/video-production-skills
Create reusable black-background white-text opening animations for new videos.
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.
Bomx/super-video-maker-skill
End-to-end AI video production skill for agentic frameworks.
notque/vexjoy-agent
Deterministic palette/matrix pixel art (not AI). An agent skill from notque/vexjoy-agent.
notque/vexjoy-agent
Pull request lifecycle: commit, codex review, sync, review, fix, status, cleanup, and PR mining.
notque/vexjoy-agent
Improve architecture across modules by deepening interfaces.
notque/vexjoy-agent
Code quality: cleanup, linting, formatting, quality gates. An agent skill from notque/vexjoy-agent.
notque/vexjoy-agent
Statistical rule discovery from Go codebase patterns. An agent skill from notque/vexjoy-agent.
notque/vexjoy-agent
Review and fix temporal references in code comments. An agent skill from notque/vexjoy-agent.
Categories
Video editing pipeline: cut footage, assemble clips via FFmpeg and Remotion. Video Editing is an agent skill from notque/vexjoy-agent. Video editing pipeline: cut footage, assemble clips via FFmpeg and Remotion.
Video Editing fits situations like: tasks that involve Video production.
Run `npx skills add notque/vexjoy-agent --skill video-editing -a claude-code`. Or copy the skill folder (skills/content/video-editing in notque/vexjoy-agent) into .claude/skills/video-editing in your project. Claude Code loads it when a task matches its description.
Run `npx skills add notque/vexjoy-agent --skill video-editing -a codex`. Or copy the skill folder (skills/content/video-editing in notque/vexjoy-agent) into .agents/skills/video-editing in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add notque/vexjoy-agent --skill video-editing -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/video-editing, .gemini/skills/video-editing, .github/skills/video-editing and .opencode/skills/video-editing in your project.
Going by SKILL.md and its folder, Video Editing needs the command-line tools its instructions call (yt-dlp, npx, npm, apt, python3 and ffmpeg) and credentials named ELEVENLABS_API_KEY. Our summary lists: Python 3; Node.js; A credential in ELEVENLABS_API_KEY. Its frontmatter pre-approves these tools: Read, Write, Bash, Grep, Glob, Edit, Task, Skill.
SKILL.md names 1 domain. In commands or code: nodejs.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.
Video Editing is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
About 2.3k tokens (SKILL.md is roughly 9.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 8.8k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Video Editing: Remotion Best Practices (lyonjs/shortvid.io, 147 stars), HyperFrames Video Entry Point (heygen-com/hyperframes, 59k stars), Shorts (AgriciDaniel/claude-shorts, 218 stars) and Black White Text Opener (Pluviobyte/video-production-skills, 667 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
notque (a GitHub user) maintains it in notque/vexjoy-agent, which has 438 GitHub stars. The repository holds 61 skills in this directory. The repository was last updated on October 3, 2026.
Source: notque/vexjoy-agent on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.