Remotion
zhuzhaoyun/Molio
Molio's builtin skill for MAKING a video from any source — wiki notes, articles, scripts, product info, or a brief — and rendering it to MP4.
Production pipeline for Motion Canvas — TypeScript-based programmatic vector animation with real-time preview.
Install Motion Canvas
$ npx skills add dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection motion-canvas --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/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .claude/skills && cp -r skills-src/motion-canvas .claude/skills/motion-canvas && 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 "motion-canvas" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/motion-canvas into .claude/skills/motion-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-canvas", 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/dracohu2025-cloud/draco-skills-collection/tree/main/motion-canvasType 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 dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection motion-canvas --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .agents/skills && cp -r skills-src/motion-canvas .agents/skills/motion-canvas && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "motion-canvas" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/motion-canvas into .agents/skills/motion-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-canvas", 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 dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection motion-canvas --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/motion-canvas .cursor/skills/motion-canvas && 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 "motion-canvas" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/motion-canvas into .cursor/skills/motion-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-canvas", 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/dracohu2025-cloud/draco-skills-collection.git --path motion-canvas--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 dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection motion-canvas --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/motion-canvas .gemini/skills/motion-canvas && 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 "motion-canvas" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/motion-canvas into .gemini/skills/motion-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-canvas", 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 dracohu2025-cloud/draco-skills-collection motion-canvasInstalls 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 dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .github/skills && cp -r skills-src/motion-canvas .github/skills/motion-canvas && 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 "motion-canvas" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/motion-canvas into .github/skills/motion-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-canvas", 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 dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install dracohu2025-cloud/draco-skills-collection motion-canvas --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/dracohu2025-cloud/draco-skills-collection.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/motion-canvas .opencode/skills/motion-canvas && 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 "motion-canvas" agent skill from https://github.com/dracohu2025-cloud/draco-skills-collection/tree/main/motion-canvas into .opencode/skills/motion-canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "motion-canvas", 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
motion-canvas- GitHub stars
- 227
- Token cost
- ~1.5k tokens
- SKILL.md length
- 637 words
- Files
- 8 (incl. scripts, references)
- Skills in repo
- 27
- Repo updated
- First seen
- Licence
- None found
At a glance
Production pipeline for Motion Canvas — TypeScript-based programmatic vector animation with real-time preview.
- Works in 5 steps: One scene, one idea → Start from the final visual story → Prefer refs + named helpers over… → …
- Users want explainer videos
- SKILL.md covers Best fit, Core mental model, Bootstrap and Authoring rules, plus 6 more sections
- Runs Shell and TypeScript scripts from its folder; calls npx and npm
What it does
Motion Canvas is an agent skill from dracohu2025-cloud/draco-skills-collection. Production pipeline for Motion Canvas — TypeScript-based programmatic vector animation with real-time preview. Use when users want explainer videos, technical demos, timeline-based motion graphics, code animations, animated UI mockups, or synchronized voice-over scenes built with Motion Canvas.
Its SKILL.md is about 1.5k tokens, which your agent loads only when the skill is triggered. The skill folder holds 10 other files, including scripts and reference files (for example `README.md`, `references/core-concepts.md` and `references/patterns.md`).
It sits in Media & Creative, covering Video production, Motion graphics and Text to speech and voice. It works with TypeScript, Manim and Remotion.
When your agent uses it
- Users want explainer videos
- Technical demos
- Timeline-based motion graphics
- Code animations
Example prompts
- “/motion-canvas”
Requirements
- Node.js
- A Bash shell
Workflow steps
5 steps, taken from the step headings in SKILL.md.
- One scene, one idea
- Start from the final visual story
- Prefer refs + named helpers over anonymous chaos
- Animate meaningfully
- Keep scenes composable
What it can do on your machine
Read from SKILL.md and the folder at commit 26e8975. 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
Ships 1 file in scripts/ (Shell and TypeScript), which the agent can run.
Shell commands in SKILL.md call:
npxnpm
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
Motion Canvas loads about 1.5k tokens when it runs, and up to ~2.7k if it reads all its reference files. Until then it costs about 77 tokens; SKILL.md has 637 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); the scripts in this folder are not scanned.
SKILL.md
Without a licence we can't republish the file, so here is its outline and opening line. It has 637 words (~1,500 tokens).
“Motion Canvas sits between Manim and Remotion.”
- name
- motion-canvas
- version
- 1.0.0
Files
SKILL.md and 7 other files (scripts, references) in motion-canvas of dracohu2025-cloud/draco-skills-collection.
- SKILL.md
- README.md
- references/core-concepts.md
- references/patterns.md
- references/selection-guide.md
- scripts/setup.sh
- templates/project-starter.ts
- templates/scene-starter.tsx
Open the folder on GitHubat commit 26e8975
Compare with similar skills
Motion Canvas 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 |
|---|---|---|---|---|---|---|
| Motion Canvas this skilldracohu2025-cloud/draco-skills-collection | 227 | — | ~1.5k | Automated safety check: Pass | None | |
| Remotionzhuzhaoyun/Molio | 433 | — | ~4k | Automated safety check: Pass | Custom licence | |
| Anything2explainerVincentwei1021/anything2explainer | 2.4k | — | ~2.7k | Automated safety check: Pass | Custom licence | |
| Video TalkcraftVincentwei1021/video-talkcraft | 1.4k | — | ~8.7k | Automated safety check: Notes | Custom licence | |
| Remotion Motion Graphicshaidrrrry/claude-remotion-skill | 299 | — | ~2k | Automated safety check: Pass | MIT | |
| Qiaomu Cutjoeseesun/qiaomu-cut-skill | 372 | — | ~6.8k | Automated safety check: Notes | MIT |
Similar skills
Anything2explainer
Vincentwei1021/anything2explainer
给一个主题，产出一条黑底 MG 风格（幕底可选星点或点阵波）、有配音字幕章节进度条的科普讲解视频（中文或英文；Remotion 代码动画；时长由用户定，常用 3–5 分钟）。内含可编译模板、图元库、配音/分镜/渲染工具、风格与动效规范、多 agent 分工协议与 QC 判据，以及一条完整样片（《RAG 与知识库》）作为质量标尺。Turn any topic into a narrated…
Video Talkcraft
Vincentwei1021/video-talkcraft
终极口播视频 skill：中文口播稿 + 成品配音 → CPU 字级时间戳 → SHOTBOOK 层矩阵分镜 → Remotion 电影感成片（横屏默认/竖屏）。当用户要"做口播视频"、"解说/科普视频"、"把文案变成视频"、"给配音配画面动效"时使用。默认使用成品配音，可选 Fish Audio 从稿子合成配音与时间戳；数字人生成技术不在本 skill…
Remotion Motion Graphics
haidrrrry/claude-remotion-skill
Create and edit professional motion graphics videos with Remotion (React-based video).
Qiaomu Cut
joeseesun/qiaomu-cut-skill
把一句话需求转成可复现、可验收视频工程的乔木智能剪辑导演。Use when the user asks to create, plan, edit, remix, explain, narrate, subtitle, animate, composite, or render a video—including one-line requests such as “制作一个科普视频：介绍…
Showtime
FavioVazquez/showtime
A skill your agent uses when the user wants a video made, edited or finished: a launch or promo, product demo, explainer, trailer or teaser, tutorial or walkthrough, a screen recording turned into a…
More from dracohu2025-cloud/draco-skills-collection
All 27 skills in this repoAI News Bitable Archive Dingtalk
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when parsing a DingTalk daily news document and syncing title, date, Top 3, summary, conclusion, document link, and status into a DingTalk multidimensional table.
Feishu Seedance Video Pipeline
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when running a Feishu/Lark Base-centered Seedance video production pipeline: inspect/backfill the Base row, create/reference assets, build Row-24-style Chinese Seedance…
News Aggregator Skill
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when collecting public news candidates from Hacker News, GitHub Trending, Hugging Face papers, and other web sources for briefings and daily reports.
Open Design To Open Slide
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when mining Open Design visual systems and converting them into Open Slide React template kits or standalone 20-page template albums, with build, deployment, screenshot QA…
Daily AI Agent Aigc Top News Dingtalk
dracohu2025-cloud/draco-skills-collection
A skill your agent uses when generating a daily 24h AI / Agent / AIGC top-news briefing, publishing it as a DingTalk document, validating it, and optionally archiving it to a DingTalk…
Epub2podcast Gpt Image
dracohu2025-cloud/draco-skills-collection
可独立运行的 GPT-Image 增强版 EPUB2Podcast：在本地把 EPUB 转成双人中文音频、GPT-Image/Smart Slide 视觉页、最终 MP4，并生成 YouTube 发布素材。
Related
Works with
Categories
Questions about Motion Canvas
What does Motion Canvas do?
Production pipeline for Motion Canvas — TypeScript-based programmatic vector animation with real-time preview. Motion Canvas is an agent skill from dracohu2025-cloud/draco-skills-collection. Production pipeline for Motion Canvas — TypeScript-based programmatic vector animation with real-time preview.
When should I use Motion Canvas?
Motion Canvas fits situations like: users want explainer videos; technical demos; timeline-based motion graphics; code animations.
How do I install Motion Canvas in Claude Code?
Run `npx skills add dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a claude-code`. Or copy the skill folder (motion-canvas in dracohu2025-cloud/draco-skills-collection) into .claude/skills/motion-canvas in your project. Claude Code loads it when a task matches its description.
How do I install Motion Canvas in Codex?
Run `npx skills add dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a codex`. Or copy the skill folder (motion-canvas in dracohu2025-cloud/draco-skills-collection) into .agents/skills/motion-canvas in your project. Codex loads it when a task matches its description.
Can I use Motion Canvas 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 dracohu2025-cloud/draco-skills-collection --skill motion-canvas -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/motion-canvas, .gemini/skills/motion-canvas, .github/skills/motion-canvas and .opencode/skills/motion-canvas in your project.
What does Motion Canvas need to run?
Going by SKILL.md and its folder, Motion Canvas needs a shell and TypeScript for the scripts in its folder and the command-line tools its instructions call (npx and npm). Our summary lists: Node.js; A Bash shell.
Does Motion Canvas 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 Motion Canvas 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. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Motion Canvas use?
No licence was found for Motion Canvas or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Motion Canvas use?
About 1.5k tokens (SKILL.md is roughly 6k 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 1.2k tokens, read only when the agent opens those files.
What are the alternatives to Motion Canvas?
Skills that share tags, products or a category with Motion Canvas: Remotion (zhuzhaoyun/Molio, 433 stars), Anything2explainer (Vincentwei1021/anything2explainer, 2.4k stars), Video Talkcraft (Vincentwei1021/video-talkcraft, 1.4k stars) and Remotion Motion Graphics (haidrrrry/claude-remotion-skill, 299 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Motion Canvas?
dracohu2025-cloud (a GitHub user) maintains it in dracohu2025-cloud/draco-skills-collection, which has 227 GitHub stars. The repository holds 27 skills in this directory. The repository was last updated on September 17, 2026.
Source: dracohu2025-cloud/draco-skills-collection on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.