Manim Video Production
browser-use/video-use
Produces math and technical explainer videos with Manim Community Edition: concept animations, equation derivations, algorithm walkthroughs and data stories.
Agent skill
Produces Chinese hand-drawn explainer videos with voiceover, subtitles, timeline, editable project and a real MP4, by stroke-by-stroke story animation or programmatic animation.
SKILL.md written in Chinese; this summary is our English description.
$ npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install hi-nikola/hand-drawn-explainer-video-nikola hand-drawn-explainer-video-nikola --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
Claude Code skills documentation · loads skills from .claude/skills/
Install the "hand-drawn-explainer-video-nikola" agent skill from https://github.com/hi-nikola/hand-drawn-explainer-video-nikola/tree/main into .claude/skills/hand-drawn-explainer-video-nikola/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hand-drawn-explainer-video-nikola", 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.
$ npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install hi-nikola/hand-drawn-explainer-video-nikola hand-drawn-explainer-video-nikola --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "hand-drawn-explainer-video-nikola" agent skill from https://github.com/hi-nikola/hand-drawn-explainer-video-nikola/tree/main into .agents/skills/hand-drawn-explainer-video-nikola/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hand-drawn-explainer-video-nikola", 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 hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install hi-nikola/hand-drawn-explainer-video-nikola hand-drawn-explainer-video-nikola --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "hand-drawn-explainer-video-nikola" agent skill from https://github.com/hi-nikola/hand-drawn-explainer-video-nikola/tree/main into .cursor/skills/hand-drawn-explainer-video-nikola/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hand-drawn-explainer-video-nikola", 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.
$ npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install hi-nikola/hand-drawn-explainer-video-nikola hand-drawn-explainer-video-nikola --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "hand-drawn-explainer-video-nikola" agent skill from https://github.com/hi-nikola/hand-drawn-explainer-video-nikola/tree/main into .gemini/skills/hand-drawn-explainer-video-nikola/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hand-drawn-explainer-video-nikola", 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 hi-nikola/hand-drawn-explainer-video-nikola hand-drawn-explainer-video-nikolaInstalls 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 hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "hand-drawn-explainer-video-nikola" agent skill from https://github.com/hi-nikola/hand-drawn-explainer-video-nikola/tree/main into .github/skills/hand-drawn-explainer-video-nikola/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hand-drawn-explainer-video-nikola", 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 hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install hi-nikola/hand-drawn-explainer-video-nikola hand-drawn-explainer-video-nikola --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "hand-drawn-explainer-video-nikola" agent skill from https://github.com/hi-nikola/hand-drawn-explainer-video-nikola/tree/main into .opencode/skills/hand-drawn-explainer-video-nikola/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "hand-drawn-explainer-video-nikola", 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.
hand-drawn-explainer-video-nikolaProduces Chinese hand-drawn explainer videos with voiceover, subtitles, timeline, editable project and a real MP4, by stroke-by-stroke story animation or programmatic animation.
The agent first decides which of two routes the user actually wants and never passes one off as the other: a stroke-by-stroke story animation where the picture is drawn onto one canvas as the narration plays, or a programmatic animation that arranges flow cards, relationship diagrams and knowledge graphics with SVG, HTML and GSAP. For the stroke route you choose a look (natural-skin chibi characters, the Xiaohei line style or another hand-drawn style) and a layout such as single scene, multi-act story or left-right semantic islands.
Delivery scope can be prompts only with no paid calls, a short sample of ten to fifteen seconds, a full video, or edits to an existing one that touch only the affected stages. Prompt mode has no local dependencies; the stroke renderer ships with the repository but needs an isolated Python environment, and programmatic mode needs Node.js, HyperFrames, a browser and FFmpeg. Narration defaults to a Volcano Engine voice that needs your own authorized account or an existing audio track, image and video models are optional and may cost money, and a setup_check script runs first.
8 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit 3ee5d1c. It shows what the files ask for, not the result of running them.
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.
Ships 1 file in scripts/, which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Hand-Drawn Explainer Video Maker loads about 904 tokens when it runs, and up to ~18k if it reads all its reference files. Until then it costs about 77 tokens; SKILL.md has 126 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 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.
The full file from hi-nikola/hand-drawn-explainer-video-nikola at commit 3ee5d1c, republished under its Apache-2.0 licence (© hi-nikola). 126 words, ~904 tokens.
.claude/skills/hand-drawn-explainer-video-nikola/SKILL.md (or your agent's skills folder). This skill also uses 101 other files; get the full folder from GitHub.把中文主题、文稿或 SRT 变成真正可播放、可检查、可继续编辑的手绘讲解视频。先识别用户要的是“画面被逐笔画出来”,还是“手绘风独立元素运动”;不能为了方便把一种效果冒充另一种效果。
提示词模式无本地依赖;逐笔渲染器已随仓库打包,首次使用需创建隔离 Python 环境;程序动画模式需 Node.js、HyperFrames、浏览器和 FFmpeg。成片配音默认使用火山引擎刘飞音色,需用户自己的已授权账号或复用已有音轨;图像生成和视频模型为可选能力,可能产生费用。
| 用户真正想要的效果 | 制作路线 | 必读 |
|---|---|---|
| “画面被画出来”“边讲边画”“逐笔落墨”“笔尖跟着线走” | 逐笔故事动画 | stroke-story-workflow.md |
| 流程卡片、概念关系、独立元素组合、确定性文字 | 程序动画 | HyperFrames + SVG/HTML + GSAP,读 automation-workflow.md |
逐笔故事动画选定后,再分别选择画面结构与视觉风格:
场景视频与“只输出 Flow/Nano Banana 提示词”是可选交付方式,不是本 Skill 的第三条手绘制作路线。自然连续人物动作或复杂运镜需要先核实视频模型、成本和一致性限制;只要提示词时读 prompt-workflow.md。
逐笔路线使用 vendor/srt-whiteboard-animation/ 中随仓库发布的 MIT 后端快照。它不包含第二份 SKILL.md,不会单独触发或要求重复确认;主 Skill 统一负责路由、配音、字幕、渲染和验收。运行环境不可用时保存已完成资产并报告缺口;除非用户明确同意,不以 SVG 动画冒充真实逐笔绘制。
程序化知识图形是制作路线,不是视觉风格。参考 “什么是 Skill”程序动画案例。逐笔案例见 《约法三章》 与 《乔布斯的一生》。
参考图只影响当前项目,除非用户明确要求保存为新预设。人物、画风、动效和声音分别记录,不把换画风等同于换音色或重做旁白。
仓库中的 preferences.json 只含无密钥默认值。用户指令和项目 DESIGN.md 优先。成片默认使用火山引擎 seed-tts-2.0 的刘飞音色 zh_male_liufei_uranus_bigtts;用户明确要求时可选择火山引擎其他已授权音色,已有与文稿一致的合格音轨优先复用。不要自动改用电脑系统朗读、edge-tts 或其他低质量本地 TTS;缺少授权音轨时可以继续提示词、画面和无配音阶段,但必须把配音列为未完成项。
python scripts/setup_check.py完整视频在首次配音或长渲染前还要运行路线对应的预检。预检失败只阻止依赖该能力的阶段,不重做已经通过的音频、插画或字幕。
hand-follow 只平滑手部,不能让线条真正减速。质量与交付细节见 quality-and-delivery.md。仓库结构、贡献和许可见 README。
© hi-nikola, Apache-2.0. 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 101 other files (scripts, references) in the repository root of hi-nikola/hand-drawn-explainer-video-nikola.
Open the folder on GitHubat commit 3ee5d1c
Hand-Drawn Explainer Video Maker 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 |
|---|---|---|---|---|---|---|
| Hand-Drawn Explainer Video Maker this skillhi-nikola/hand-drawn-explainer-video-nikola | 374 | — | ~904 | Automated safety check: Pass | Apache-2.0 | |
| Manim Video Productionbrowser-use/video-use | 29k | 6 repos | ~3k | Automated safety check: Pass | MIT | |
| Embedded Video Captionsheygen-com/hyperframes | 60k | 3 repos | ~8.6k | Automated safety check: Pass | Apache-2.0 | |
| HyperFrames Video Compositionsspinabot/brigade | 11k | — | ~1.6k | Automated safety check: Pass | MIT | |
| Qiaomu Cutjoeseesun/qiaomu-cut-skill | 372 | — | ~6.8k | Automated safety check: Notes | MIT | |
| Bang Motionbangtutorial/bang-motion | 587 | — | ~9.7k | Automated safety check: Pass | MIT |
browser-use/video-use
Produces math and technical explainer videos with Manim Community Edition: concept animations, equation derivations, algorithm walkthroughs and data stories.
heygen-com/hyperframes
Adds captions to a single-subject talking-head video without editing the footage, from plain subtitles to cinematic text placed behind the speaker.
spinabot/brigade
Writes HTML compositions with a GSAP timeline that the render_video tool turns into deterministic MP4 videos from data, text or layouts.
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 “制作一个科普视频:介绍…
bangtutorial/bang-motion
Membangun motion graphic sinematik di browser (promo video, opener, intro, bumper, kinetic typography, explainer/video penjelasan bergambar 16:9 atau 9:16) memakai HTML + CSS + GSAP (+ Three.js bila…
heygen-com/hyperframes-community-skills
Turns your local Claude Code session history into a 60 to 75 second hand-drawn ink film about a day with your agent, with a string score and your approval of every line.
Categories
Produces Chinese hand-drawn explainer videos with voiceover, subtitles, timeline, editable project and a real MP4, by stroke-by-stroke story animation or programmatic animation. The agent first decides which of two routes the user actually wants and never passes one off as the other: a stroke-by-stroke story animation where the picture is drawn onto one canvas as the narration plays, or a programmatic animation that arranges flow cards, relationship diagrams and knowledge graphics with SVG, HTML and GSAP. For the stroke route you choose a look (natural-skin chibi characters, the Xiaohei line style or another hand-drawn style) and a layout such as single scene, multi-act story or left-right semantic islands.
Hand-Drawn Explainer Video Maker fits situations like: turning a script or SRT file into a hand-drawn whiteboard-style explainer video; making a video where the picture is drawn stroke by stroke while narration plays; animating flow cards and concept diagrams with programmatic motion; producing only the image and video prompts for a hand-drawn explainer.
Run `npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a claude-code`. Or copy the skill folder (the hi-nikola/hand-drawn-explainer-video-nikola repository) into .claude/skills/hand-drawn-explainer-video-nikola in your project. Claude Code loads it when a task matches its description.
Run `npx skills add hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a codex`. Or copy the skill folder (the hi-nikola/hand-drawn-explainer-video-nikola repository) into .agents/skills/hand-drawn-explainer-video-nikola 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 hi-nikola/hand-drawn-explainer-video-nikola --skill hand-drawn-explainer-video-nikola -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/hand-drawn-explainer-video-nikola, .gemini/skills/hand-drawn-explainer-video-nikola, .github/skills/hand-drawn-explainer-video-nikola and .opencode/skills/hand-drawn-explainer-video-nikola in your project.
SKILL.md names no scripts, command-line tools or credentials: Hand-Drawn Explainer Video Maker is instructions for the agent only. Our summary lists: Python for the stroke renderer; Node.js, HyperFrames, a browser and FFmpeg for programmatic animation; An authorized Volcano Engine account or an existing narration track.
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
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.
Hand-Drawn Explainer Video Maker is published under the Apache-2.0 licence (from the LICENSE file in the skill folder). It allows redistribution, so the full SKILL.md is shown on this page.
About 904 tokens (SKILL.md is roughly 3.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 17k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Hand-Drawn Explainer Video Maker: Manim Video Production (browser-use/video-use, 29k stars), Embedded Video Captions (heygen-com/hyperframes, 60k stars), HyperFrames Video Compositions (spinabot/brigade, 11k stars) and Qiaomu Cut (joeseesun/qiaomu-cut-skill, 372 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
hi-nikola (a GitHub user) maintains it in hi-nikola/hand-drawn-explainer-video-nikola, which has 374 GitHub stars. The repository was last updated on September 3, 2026.
Source: hi-nikola/hand-drawn-explainer-video-nikola on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.