Agent skill

Remotion Best Practices

by elophanto in elophanto/EloPhanto

Best practices for Remotion - Video creation in React. An agent skill from elophanto/EloPhanto.

Custom licenceAuto-check: notesMedia & Creative

Install Remotion Best Practices

skills CLI
$ npx skills add elophanto/EloPhanto --skill remotion-best-practices -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install elophanto/EloPhanto remotion-best-practices --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/elophanto/EloPhanto.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/remotion-best-practices .claude/skills/remotion-best-practices && rm -rf skills-src

Use ~/.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/

Facts

Skill name
remotion-best-practices
GitHub stars
106
Token cost
~2.3k tokens
SKILL.md length
862 words
Files
38
Skills in repo
11
Repo updated
First seen
Licence
Custom licence

At a glance

Best practices for Remotion - Video creation in React. An agent skill from elophanto/EloPhanto.

  • Works in 5 steps: Read rules: Load the relevant rule files… → Scaffold (do NOT use npx create-video —… → Create project files → …
  • Asked to create
  • SKILL.md covers Triggers, EloPhanto Workflow, Design System — Apply Every Time and When to use, plus 6 more sections
  • Calls npx and npm

What it does

Remotion Best Practices is an agent skill from elophanto/EloPhanto. Best practices for Remotion - Video creation in React. Use when asked to create, render, or edit videos programmatically.

Its SKILL.md is about 2.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 38 other files (for example `rules/3d.md`, `rules/animations.md` and `rules/assets.md`).

It sits in Media & Creative, covering Video production. It works with Remotion and React. The repository describes itself as: Source-available autonomous AI agent with a self-model that actually changes as it runs - ego, affect and identity grounded in real psychology (Higgins, PAD/OCC). Writes its own…

When your agent uses it

  • Asked to create
  • Edit videos programmatically

Example prompts

  • “/remotion-best-practices”

Requirements

  • Node.js

Workflow steps

5 steps, taken from the first numbered list in SKILL.md.

  1. Read rules: Load the relevant rule files below based on the task
  2. Scaffold (do NOT use npx create-video — it requires interactive prompts)
  3. Create project files
  4. Build: Write React components following Remotion patterns from the rules.
  5. Render (ALWAYS do this — never stop before rendering)

What it can do on your machine

Read from SKILL.md and the folder at commit 7bfc65d. 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:

    • npx
    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and npm, 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 Best Practices loads about 2.3k tokens when it runs. Until then it costs about 36 tokens; SKILL.md has 862 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~36
When it runs · the whole SKILL.md, loaded when a task matches
~2.3k

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: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NoteMentions a .env fileSKILL.md:177
    m env/secret store, not hard-coded, and `.env` files are not committed

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

Its licence (Custom licence) doesn't allow us to republish the file, so here is its outline and opening line. It has 862 words (~2,250 tokens).

“When asked to create a video, follow this sequence:”

— opening of SKILL.md by elophanto, Custom licence
name
remotion-best-practices
metadata.tags
remotion, video, react, animation, composition

Read the full SKILL.md on GitHub

Files

SKILL.md and 37 other files in skills/remotion-best-practices of elophanto/EloPhanto.

  • SKILL.md
  • rules/3d.md
  • rules/animations.md
  • rules/assets.md
  • rules/audio-visualization.md
  • rules/audio.md
  • rules/calculate-metadata.md
  • rules/can-decode.md
  • rules/charts.md
  • rules/compositions.md
  • rules/display-captions.md
  • rules/extract-frames.md
  • rules/ffmpeg.md
  • rules/fonts.md
  • rules/get-audio-duration.md
  • rules/get-video-dimensions.md
  • rules/get-video-duration.md
  • rules/gifs.md
  • rules/images.md
  • rules/import-srt-captions.md
  • … and 18 more

Open the folder on GitHubat commit 7bfc65d

Compare with similar skills

Remotion Best Practices 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.

Remotion Best Practices compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Remotion Best Practices this skillelophanto/EloPhanto106—~2.3kAutomated safety check: NotesCustom licence
Remotion Best Practiceslyonjs/shortvid.io14733 repos~1kAutomated safety check: PassMIT
Remotion to HyperFrames Porterheygen-com/hyperframes60k3 repos~2.8kAutomated safety check: PassApache-2.0
Anything2explainerVincentwei1021/anything2explainer2.4k—~2.7kAutomated safety check: PassCustom licence
Remotion Motion Graphicshaidrrrry/claude-remotion-skill340—~2kAutomated safety check: PassMIT
Remotion BitsMarve10s/Better-Fullstack7561 repos~8.2kAutomated safety check: PassMIT

Similar skills

  • Remotion Best Practices

    lyonjs/shortvid.io

    Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.

    147 GitHub starsUsed in 33 repos~1k tokens
    Media & CreativeAuto-check passed
  • Remotion to HyperFrames Porter

    heygen-com/hyperframes

    Ports an existing Remotion (React) composition to HyperFrames HTML with GSAP, one way, and grades the result against a tiered set of reference fixtures.

    60k GitHub starsUsed in 3 repos~2.8k tokens
    Media & CreativeAuto-check passed
  • Anything2explainer

    Vincentwei1021/anything2explainer

    给一个主题,产出一条黑底 MG 风格(幕底可选星点或点阵波)、有配音字幕章节进度条的科普讲解视频(中文或英文;Remotion 代码动画;时长由用户定,常用 3–5 分钟)。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据,以及一条完整样片(《RAG 与知识库》)作为质量标尺。Turn any topic into a narrated…

    2.4k GitHub stars~2.7k tokensUpdated 22 days ago
    Media & CreativeAuto-check passed
  • Remotion Motion Graphics

    haidrrrry/claude-remotion-skill

    Create and edit professional motion graphics videos with Remotion (React-based video).

    340 GitHub stars~2k tokensUpdated 1 mo ago
    Media & CreativeAuto-check passed
  • Remotion Bits

    Marve10s/Better-Fullstack

    Animation components and utilities for Remotion video projects.

    756 GitHub starsUsed in 1 repo~8.2k tokens
    Media & CreativeAuto-check passed
  • Create Remotion Geist

    Marve10s/Better-Fullstack

    Create Remotion videos using the Geist design system aesthetic.

    756 GitHub stars~1.4k tokensUpdated today
    Media & CreativeAuto-check passed

More from elophanto/EloPhanto

All 11 skills in this repo
  • Pikastream Video Meeting

    elophanto/EloPhanto

    Join a Google Meet or Zoom call as a video meeting agent via PikaStreaming.

    106 GitHub stars~1.5k tokensUpdated 10 days ago
    Auto-check passed
  • Metaplex

    elophanto/EloPhanto

    Metaplex development on Solana — NFTs, tokens, compressed NFTs, candy machines, token launches.

    106 GitHub stars~1.6k tokensUpdated 10 days ago
    Auto-check passed
  • 12 Principles Of Animation

    elophanto/EloPhanto

    Audit animation code against Disney's 12 principles adapted for web.

    106 GitHub stars~1.5k tokensUpdated 10 days ago
    Auto-check passed
  • Deep Research

    elophanto/EloPhanto

    A skill your agent uses when investigating any claim, question, or topic where the easy first answer is likely insufficient.

    106 GitHub stars~2.4k tokensUpdated 10 days ago
    Auto-check passed
  • Kid Agents

    elophanto/EloPhanto

    A skill your agent uses when running dangerous shell commands, installing untrusted packages, or testing untrusted code that could damage the host.

    106 GitHub stars~1.6k tokensUpdated 10 days ago
    Auto-check passed
  • Nextjs16 Skills

    elophanto/EloPhanto

    Key facts and links for Next.js 16. An agent skill from elophanto/EloPhanto.

    106 GitHub stars~1.4k tokensUpdated 10 days ago
    Auto-check passed

Works with

Questions about Remotion Best Practices

What does Remotion Best Practices do?

Best practices for Remotion - Video creation in React. An agent skill from elophanto/EloPhanto. Remotion Best Practices is an agent skill from elophanto/EloPhanto. Best practices for Remotion - Video creation in React.

When should I use Remotion Best Practices?

Remotion Best Practices fits situations like: asked to create; edit videos programmatically.

How do I install Remotion Best Practices in Claude Code?

Run `npx skills add elophanto/EloPhanto --skill remotion-best-practices -a claude-code`. Or copy the skill folder (skills/remotion-best-practices in elophanto/EloPhanto) into .claude/skills/remotion-best-practices in your project. Claude Code loads it when a task matches its description.

How do I install Remotion Best Practices in Codex?

Run `npx skills add elophanto/EloPhanto --skill remotion-best-practices -a codex`. Or copy the skill folder (skills/remotion-best-practices in elophanto/EloPhanto) into .agents/skills/remotion-best-practices in your project. Codex loads it when a task matches its description.

Can I use Remotion Best Practices 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 elophanto/EloPhanto --skill remotion-best-practices -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-best-practices, .gemini/skills/remotion-best-practices, .github/skills/remotion-best-practices and .opencode/skills/remotion-best-practices in your project.

What does Remotion Best Practices need to run?

Going by SKILL.md and its folder, Remotion Best Practices needs the command-line tools its instructions call (npx and npm). Our summary lists: Node.js.

Does Remotion Best Practices access the network?

SKILL.md contains no URLs. Its commands use npx and npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Remotion Best Practices safe to install?

Our automated static check of SKILL.md found notes only (mentions a .env file), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Remotion Best Practices use?

Remotion Best Practices has a licence file (the repository's licence) that doesn't match a standard licence. Read it on GitHub before reusing the skill.

How many tokens does Remotion Best Practices use?

About 2.3k tokens (SKILL.md is roughly 9k 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 Best Practices?

Skills that share tags, products or a category with Remotion Best Practices: Remotion Best Practices (lyonjs/shortvid.io, 147 stars), Remotion to HyperFrames Porter (heygen-com/hyperframes, 60k stars), Anything2explainer (Vincentwei1021/anything2explainer, 2.4k stars) and Remotion Motion Graphics (haidrrrry/claude-remotion-skill, 340 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Remotion Best Practices?

elophanto (a GitHub user) maintains it in elophanto/EloPhanto, which has 106 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 1, 2026.

Source: elophanto/EloPhanto on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.