HTML Design
NimaChu/html-design
Create, redesign, repair, validate, preview, and package lightweight standalone HTML deliverables.
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
Install Math Explainer
$ npx skills add GordenSun/mathVideoMaker --skill math-explainer -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install GordenSun/mathVideoMaker math-explainer --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/GordenSun/mathVideoMaker.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/math-explainer .claude/skills/math-explainer && 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 "math-explainer" agent skill from https://github.com/GordenSun/mathVideoMaker/tree/main/skills/math-explainer into .claude/skills/math-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "math-explainer", 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/GordenSun/mathVideoMaker/tree/main/skills/math-explainerType 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 GordenSun/mathVideoMaker --skill math-explainer -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install GordenSun/mathVideoMaker math-explainer --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GordenSun/mathVideoMaker.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/math-explainer .agents/skills/math-explainer && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "math-explainer" agent skill from https://github.com/GordenSun/mathVideoMaker/tree/main/skills/math-explainer into .agents/skills/math-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "math-explainer", 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 GordenSun/mathVideoMaker --skill math-explainer -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install GordenSun/mathVideoMaker math-explainer --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GordenSun/mathVideoMaker.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/math-explainer .cursor/skills/math-explainer && 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 "math-explainer" agent skill from https://github.com/GordenSun/mathVideoMaker/tree/main/skills/math-explainer into .cursor/skills/math-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "math-explainer", 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/GordenSun/mathVideoMaker.git --path skills/math-explainer--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 GordenSun/mathVideoMaker --skill math-explainer -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install GordenSun/mathVideoMaker math-explainer --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GordenSun/mathVideoMaker.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/math-explainer .gemini/skills/math-explainer && 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 "math-explainer" agent skill from https://github.com/GordenSun/mathVideoMaker/tree/main/skills/math-explainer into .gemini/skills/math-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "math-explainer", 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 GordenSun/mathVideoMaker math-explainerInstalls 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 GordenSun/mathVideoMaker --skill math-explainer -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/GordenSun/mathVideoMaker.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/math-explainer .github/skills/math-explainer && 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 "math-explainer" agent skill from https://github.com/GordenSun/mathVideoMaker/tree/main/skills/math-explainer into .github/skills/math-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "math-explainer", 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 GordenSun/mathVideoMaker --skill math-explainer -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install GordenSun/mathVideoMaker math-explainer --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/GordenSun/mathVideoMaker.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/math-explainer .opencode/skills/math-explainer && 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 "math-explainer" agent skill from https://github.com/GordenSun/mathVideoMaker/tree/main/skills/math-explainer into .opencode/skills/math-explainer/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "math-explainer", 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
math-explainer- GitHub stars
- 289
- Used in
- 1 other repo
- Token cost
- ~2.4k tokens
- SKILL.md length
- 534 words
- Files
- 15 (incl. scripts, references)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- None found
At a glance
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
- Works in 9 steps: 核心心法（必读，照做） → 阶段总览（先复制这个清单跟踪进度） → 阶段 A — 明确需求 → …
- The user asks to explain
- SKILL.md covers 0. 核心心法（必读，照做）, 1. 阶段总览（先复制这个清单跟踪进度）, 2. 阶段 A — 明确需求 and 3. 阶段 B — 写分镜脚本（最重要的一步）, plus 6 more sections
- Runs Python and Shell scripts from its folder; calls bash and python3
What it does
Math Explainer is an agent skill from GordenSun/mathVideoMaker. Generate math explanation videos (animated with Manim) and interactive web pages from a user's request. Use when the user asks to explain, teach, visualize, or animate a math/physics concept, wants a "math video", "讲解视频", "数学动画", "动画演示", a Manim animation, an interactive math demo, an interactive webpage/可视化/网页演示, or to turn a formula/theorem/problem into a visual explainer. By default produces BOTH a Manim-rendered MP4 video and a paired self-contained interactive HTML page sharing the same concept, notation…
Its SKILL.md is about 2.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 17 other files, including scripts and reference files (for example `references/interactive-web-guide.md`, `references/manim-cookbook.md` and `references/manim-guide.md`).
It sits in Media & Creative, covering HTML artifacts, Talk and speech writing and Infographics. It works with Manim.
When your agent uses it
- The user asks to explain
- Animate a math/physics concept
- Wants a math video
- A Manim animation
Example prompts
- “math video”
- “/math-explainer”
Requirements
- Python 3
- A Bash shell
Workflow steps
9 steps, taken from the step headings in SKILL.md.
- 核心心法（必读，照做）
- 阶段总览（先复制这个清单跟踪进度）
- 阶段 A — 明确需求
- 阶段 B — 写分镜脚本（最重要的一步）
- 阶段 C — 准备环境（视频需要；网页不依赖它，可并行进行）
- 阶段 D1 — 制作视频（Manim）
- 阶段 D2 — 制作交互式网页（与视频配套）
- 阶段 E — 交付
- 常见错误速查（先看这里，再翻详细文档）
What it can do on your machine
Read from SKILL.md and the folder at commit f7e5ef2. 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 5 files in scripts/ (Python and Shell), which the agent can run.
Shell commands in SKILL.md call:
bashpython3
From the folder's file list and the shell code blocks in SKILL.md.
Network
Links to these hosts (documentation or services it may open):
github.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
Math Explainer loads about 2.4k tokens when it runs, and up to ~14k if it reads all its reference files. Until then it costs about 165 tokens; SKILL.md has 534 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 534 words (~2,374 tokens).
- name
- math-explainer
Files
SKILL.md and 14 other files (scripts, references) in skills/math-explainer of GordenSun/mathVideoMaker.
- SKILL.md
- references/interactive-web-guide.md
- references/manim-cookbook.md
- references/manim-guide.md
- references/pedagogy-and-storyboard.md
- scripts/check_env.py
- scripts/check_text.py
- scripts/check_web.py
- scripts/render.sh
- scripts/setup_manim.sh
- templates/example_pythagoras_proof.py
- templates/interactive_template.html
- templates/mathviz.py
- templates/scene_template.py
- templates/storyboard.md
Open the folder on GitHubat commit f7e5ef2
Used in 1 other repository
We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in GordenSun/mathVideoMaker, which our catalogue first saw on October 7, 2026.
Compare with similar skills
Math Explainer 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 |
|---|---|---|---|---|---|---|
| Math Explainer this skillGordenSun/mathVideoMaker | 289 | 1 repos | ~2.4k | Automated safety check: Pass | None | |
| HTML DesignNimaChu/html-design | 101 | — | ~2.7k | Automated safety check: Pass | None | |
| Tufte Reportglebis/claude-skills | 388 | — | ~2.4k | Automated safety check: Pass | MIT | |
| Self-Contained HTML PagesSourceWeft/SourceWeft | 158 | — | ~817 | Automated safety check: Pass | Custom licence | |
| Static Web Artifacts BuilderMathews-Tom/armory | 327 | — | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Explainer InfographicTheCraigHewitt/skills | 156 | — | ~1.5k | Automated safety check: Pass | MIT |
Similar skills
Tufte Report
glebis/claude-skills
Create Tufte-inspired data reports and infographic dashboards as standalone HTML files.
Self-Contained HTML Pages
SourceWeft/SourceWeft
Builds and revises polished offline HTML reports, landing pages, infographics and interactive visualizations as a single file, with viewport QA before delivery.
Static Web Artifacts Builder
Mathews-Tom/armory
Build self-contained static HTML artifacts opened in a browser: interactive diagrams, dashboards, infographics.
Explainer Infographic
TheCraigHewitt/skills
Generate an animated, interactive HTML page that explains a complex concept through real-world analogies, visual diagrams, and progressive disclosure.
Visual Explainer
NeverSight/learn-skills.dev
Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data.
Related
Works with
Questions about Math Explainer
What does Math Explainer do?
Generate math explanation videos (animated with Manim) and interactive web pages from a user's request. Math Explainer is an agent skill from GordenSun/mathVideoMaker. Generate math explanation videos (animated with Manim) and interactive web pages from a user's request.
When should I use Math Explainer?
Math Explainer fits situations like: the user asks to explain; animate a math/physics concept; wants a math video; A Manim animation.
How do I install Math Explainer in Claude Code?
Run `npx skills add GordenSun/mathVideoMaker --skill math-explainer -a claude-code`. Or copy the skill folder (skills/math-explainer in GordenSun/mathVideoMaker) into .claude/skills/math-explainer in your project. Claude Code loads it when a task matches its description.
How do I install Math Explainer in Codex?
Run `npx skills add GordenSun/mathVideoMaker --skill math-explainer -a codex`. Or copy the skill folder (skills/math-explainer in GordenSun/mathVideoMaker) into .agents/skills/math-explainer in your project. Codex loads it when a task matches its description.
Can I use Math Explainer 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 GordenSun/mathVideoMaker --skill math-explainer -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/math-explainer, .gemini/skills/math-explainer, .github/skills/math-explainer and .opencode/skills/math-explainer in your project.
What does Math Explainer need to run?
Going by SKILL.md and its folder, Math Explainer needs Python and a shell for the scripts in its folder and the command-line tools its instructions call (bash and python3). Our summary lists: Python 3; A Bash shell.
Does Math Explainer access the network?
SKILL.md names 1 domain. As links in the text: github.com. This is read from the text; nothing was executed.
Is Math Explainer 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 Math Explainer use?
No licence was found for Math Explainer or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.
How many tokens does Math Explainer use?
About 2.4k tokens (SKILL.md is roughly 9.5k 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 12k tokens, read only when the agent opens those files.
What are the alternatives to Math Explainer?
Skills that share tags, products or a category with Math Explainer: HTML Design (NimaChu/html-design, 101 stars), Tufte Report (glebis/claude-skills, 388 stars), Self-Contained HTML Pages (SourceWeft/SourceWeft, 158 stars) and Static Web Artifacts Builder (Mathews-Tom/armory, 327 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Math Explainer?
GordenSun (a GitHub user) maintains it in GordenSun/mathVideoMaker, which has 289 GitHub stars. The repository was last updated on June 3, 2026.
Source: GordenSun/mathVideoMaker on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.