Remotion Best Practices
lyonjs/shortvid.io
Best practices for Remotion - Video creation in React. An agent skill from lyonjs/shortvid.io.
在 Remotion 项目中创建带动画的金融 K 线图（蜡烛图）。涵盖数据获取（Yahoo Finance）、 插件架构（config / timeline / Scene / plugin）、Canvas 逐帧绘制、深色交易终端风格、 以及 Remotion Studio 预览和渲染输出。触发词：K线图、蜡烛图、candlestick、OHLC、 股票动画、金融图表视频、Remotion 图表。
Install Remotion Candlestick
$ npx skills add vibe-motion/skills --skill remotion-candlestick -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install vibe-motion/skills remotion-candlestick --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/vibe-motion/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/remotion-candlestick .claude/skills/remotion-candlestick && 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-candlestick" agent skill from https://github.com/vibe-motion/skills/tree/main/remotion-candlestick into .claude/skills/remotion-candlestick/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-candlestick", 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/vibe-motion/skills/tree/main/remotion-candlestickType 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 vibe-motion/skills --skill remotion-candlestick -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install vibe-motion/skills remotion-candlestick --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/remotion-candlestick .agents/skills/remotion-candlestick && 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-candlestick" agent skill from https://github.com/vibe-motion/skills/tree/main/remotion-candlestick into .agents/skills/remotion-candlestick/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-candlestick", 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 vibe-motion/skills --skill remotion-candlestick -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install vibe-motion/skills remotion-candlestick --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/remotion-candlestick .cursor/skills/remotion-candlestick && 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-candlestick" agent skill from https://github.com/vibe-motion/skills/tree/main/remotion-candlestick into .cursor/skills/remotion-candlestick/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-candlestick", 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/vibe-motion/skills.git --path remotion-candlestick--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 vibe-motion/skills --skill remotion-candlestick -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install vibe-motion/skills remotion-candlestick --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/remotion-candlestick .gemini/skills/remotion-candlestick && 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-candlestick" agent skill from https://github.com/vibe-motion/skills/tree/main/remotion-candlestick into .gemini/skills/remotion-candlestick/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-candlestick", 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 vibe-motion/skills remotion-candlestickInstalls 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 vibe-motion/skills --skill remotion-candlestick -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/remotion-candlestick .github/skills/remotion-candlestick && 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-candlestick" agent skill from https://github.com/vibe-motion/skills/tree/main/remotion-candlestick into .github/skills/remotion-candlestick/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-candlestick", 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 vibe-motion/skills --skill remotion-candlestick -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install vibe-motion/skills remotion-candlestick --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/vibe-motion/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/remotion-candlestick .opencode/skills/remotion-candlestick && 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-candlestick" agent skill from https://github.com/vibe-motion/skills/tree/main/remotion-candlestick into .opencode/skills/remotion-candlestick/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "remotion-candlestick", 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-candlestick- GitHub stars
- 1.3k
- Token cost
- ~1.5k tokens
- SKILL.md length
- 160 words
- Files
- 2
- Skills in repo
- 16
- Repo updated
- First seen
- Licence
- None found
At a glance
在 Remotion 项目中创建带动画的金融 K 线图（蜡烛图）。涵盖数据获取（Yahoo Finance）、 插件架构（config / timeline / Scene / plugin）、Canvas 逐帧绘制、深色交易终端风格、 以及 Remotion Studio 预览和渲染输出。触发词：K线图、蜡烛图、candlestick、OHLC、 股票动画、金融图表视频、Remotion 图表。
- Tasks that involve Video production
- SKILL.md covers 前置条件, 步骤 1：获取金融数据, 步骤 2：创建插件文件结构 and 步骤 3：注册合成, plus 2 more sections
- Calls pnpm and npx; reaches query1.finance.yahoo.com
What it does
Remotion Candlestick is an agent skill from vibe-motion/skills. 在 Remotion 项目中创建带动画的金融 K 线图（蜡烛图）。涵盖数据获取（Yahoo Finance）、 插件架构（config / timeline / Scene / plugin）、Canvas 逐帧绘制、深色交易终端风格、 以及 Remotion Studio 预览和渲染输出。触发词：K线图、蜡烛图、candlestick、OHLC、 股票动画、金融图表视频、Remotion 图表。
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file.
It sits in Media & Creative, covering Video production. It works with Remotion and yfinance. The repository describes itself as: agent skills for vibe motion.
When your agent uses it
- Tasks that involve Video production
Example prompts
- “/remotion-candlestick”
Requirements
- Node.js
What it can do on your machine
Read from SKILL.md and the folder at commit 4c86c0d. 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:
pnpmnpx
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
query1.finance.yahoo.com
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 Candlestick loads about 1.5k tokens when it runs. Until then it costs about 55 tokens; SKILL.md has 160 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
Without a licence we can't republish the file, so here is its outline and opening line. It has 160 words (~1,483 tokens).
“本 skill 记录了在 vibe-motion-app 这个 Remotion 项目中创建 S&P 500 K 线图的完整制作过程。”
- name
- remotion-candlestick
- metadata.type
- project
Files
SKILL.md and 1 other file in remotion-candlestick of vibe-motion/skills.
- SKILL.md
- sp500-kline-demo.gif
Open the folder on GitHubat commit 4c86c0d
Compare with similar skills
Remotion Candlestick 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 Candlestick this skillvibe-motion/skills | 1.3k | — | ~1.5k | Automated safety check: Pass | None | |
| Remotion Best Practiceslyonjs/shortvid.io | 147 | 33 repos | ~1k | Automated safety check: Pass | MIT | |
| Canvas Capture Extensionremotion-dev/remotion | 63k | — | ~907 | Automated safety check: Pass | Custom licence | |
| Making Demo Videosnukeop/nuclear | 19k | — | ~892 | Automated safety check: Pass | AGPL-3.0 | |
| HyperFrames Video Entry Pointheygen-com/hyperframes | 59k | 3 repos | ~5.2k | Automated safety check: Pass | Apache-2.0 | |
| Avatar Videocalesthio/OpenMontage | 66k | — | ~1.6k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
- Official
Canvas Capture Extension
remotion-dev/remotion
Rebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension.
Making Demo Videos
nukeop/nuclear
A skill your agent uses when making a demo, tutorial, or feature video of Nuclear.
HyperFrames Video Entry Point
heygen-com/hyperframes
Entry point for making, editing and rendering videos from HTML compositions with HyperFrames, routing each request to the right workflow.
Avatar Video
calesthio/OpenMontage
Create AI avatar videos with precise control over avatars, voices, scripts, scenes, and backgrounds using HeyGen's v2 API.
Video Podcast Maker
Agents365-ai/video-podcast-maker
A skill your agent uses when the user gives a topic and wants an automated topic-driven narrated explainer, podcast, or knowledge-summary video (Bilibili / YouTube / Xiaohongshu / Douyin / WeChat…
More from vibe-motion/skills
All 16 skills in this repoPixel2motion
vibe-motion/skills
Turn a raster logo (PNG/JPG/WebP/screenshot) into a clean minimal SVG with edge smoothness as the primary hard gate and IoU optimized as high as reasonably possible without a fixed global threshold…
Brand Launch Video Star
vibe-motion/skills
Create fast, high-impact 15-30 second brand and product marketing videos from an official company website, verified brand sources, or user-uploaded product imagery.
3D Chladni Render
vibe-motion/skills
Clone or update https://github.com/nolangz/3D-Chladni and export deterministic 3D Chladni particle motion as MP4 or transparent ProRes MOV.
Colorize
vibe-motion/skills
Turn photos, videos, and Live Photos into a black-and-white to color reveal clip (单彩渐变 + 动感模糊 + 丁达尔旋焦).
Light Spotlight Render
vibe-motion/skills
Generate a swinging spotlight text-reveal HTML animation with configurable text, swing angle, lamp scale, glow, and colors.
Printed Curtain Render
vibe-motion/skills
Generate a browser-based p5.js curtain simulation that weaves user-supplied PNG, JPEG, or WebP artwork and optional text into individually moving strands.
Related
Categories
Questions about Remotion Candlestick
What does Remotion Candlestick do?
在 Remotion 项目中创建带动画的金融 K 线图（蜡烛图）。涵盖数据获取（Yahoo Finance）、 插件架构（config / timeline / Scene / plugin）、Canvas 逐帧绘制、深色交易终端风格、 以及 Remotion Studio 预览和渲染输出。触发词：K线图、蜡烛图、candlestick、OHLC、 股票动画、金融图表视频、Remotion 图表。. Remotion Candlestick is an agent skill from vibe-motion/skills.
When should I use Remotion Candlestick?
Remotion Candlestick fits situations like: tasks that involve Video production.
How do I install Remotion Candlestick in Claude Code?
Run `npx skills add vibe-motion/skills --skill remotion-candlestick -a claude-code`. Or copy the skill folder (remotion-candlestick in vibe-motion/skills) into .claude/skills/remotion-candlestick in your project. Claude Code loads it when a task matches its description.
How do I install Remotion Candlestick in Codex?
Run `npx skills add vibe-motion/skills --skill remotion-candlestick -a codex`. Or copy the skill folder (remotion-candlestick in vibe-motion/skills) into .agents/skills/remotion-candlestick in your project. Codex loads it when a task matches its description.
Can I use Remotion Candlestick 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 vibe-motion/skills --skill remotion-candlestick -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-candlestick, .gemini/skills/remotion-candlestick, .github/skills/remotion-candlestick and .opencode/skills/remotion-candlestick in your project.
What does Remotion Candlestick need to run?
Going by SKILL.md and its folder, Remotion Candlestick needs the command-line tools its instructions call (pnpm and npx). Our summary lists: Node.js.
Does Remotion Candlestick access the network?
SKILL.md names 1 domain. In commands or code: query1.finance.yahoo.com; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.
Is Remotion Candlestick 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 Candlestick use?
No licence was found for Remotion Candlestick or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Remotion Candlestick use?
About 1.5k tokens (SKILL.md is roughly 5.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 Candlestick?
Skills that share tags, products or a category with Remotion Candlestick: Remotion Best Practices (lyonjs/shortvid.io, 147 stars), Canvas Capture Extension (remotion-dev/remotion, 63k stars), Making Demo Videos (nukeop/nuclear, 19k stars) and HyperFrames Video Entry Point (heygen-com/hyperframes, 59k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Remotion Candlestick?
vibe-motion (a GitHub organization) maintains it in vibe-motion/skills, which has 1,330 GitHub stars. The repository holds 16 skills in this directory. The repository was last updated on October 5, 2026.
Source: vibe-motion/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.