Another open-source skill: one-click generation of visualized math explanation videos

Prompt: Install this Skill: https://t.co/otI2ZDfdlf Then use this Skill to explain to elementary school students: □+28=□×5

The two videos below are the results I generated. https://t.co/wffOzXxrMb

GordenSun/mathVideoMaker

Source: https://github.com/GordenSun/mathVideoMaker

mathVideoMaker

A Cursor Agent Skill: simultaneously generates a “math explanation video” (rendered as MP4 via Manim) and an “interactive webpage” (self-contained HTML), with carefully polished implementation details to ensure even weaker models, or those without visual capabilities, can produce accurate, engaging content consistently.

Reference implementation: ManimCommunity/manim (https://github.com/ManimCommunity/manim) (based on Manim Community v0.20+).

What it can do

• Explanation video: Uses Manim to animate the derivation process of a math/physics concept, rendered to MP4.
• Interactive webpage: A self-contained single-file HTML (KaTeX formulas + canvas interaction) that lets the audience drag parameters and see changes in real-time.
• Both share the same design (concepts, notation, parameters, colors), complementing each other: the video explains, the webpage lets you explore.

Design highlights (why this Skill is different)

• Explains “why”: Forces demonstration of derivation/proof, not just the conclusion (includes a self-check of “can you understand even with the narration covered”).
• Quality assurance without vision: Replaces “look at the picture and find errors” with text-based checks:
  • SafeScene automatically prints [layout] warnings during rendering (out-of-bounds/overlap);
  • check_text.py statically checks for missing glyphs (prevents empty boxes □);
  • check_web.py statically checks the webpage (formulas/ids/sliders/canvas/layout/JS syntax).
• Mechanized layout + liveliness: Safe zone + fit_content to prevent clipping; dark color theme + glow + emphasis animations; subtitles with background.

Demo

Elementary problem “□ + 28 = □ × 5” explanation video (GIF preview):

Demo: □ + 28 = □ × 5

See the full high-definition version (including original speed): examples/BoxDivide.mp4. The same topic also generates a companion interactive webpage (drag □ to balance the scale).

Installation

Place the skills/math-explainer/ folder from this repo into your project (or personal directory) under .cursor/skills/:

git clone https://github.com/GordenSun/mathVideoMaker.git

# Option 1: as a project skill (active for the project)
cp -R mathVideoMaker/skills/math-expliner   your-project/.cursor/skills/

# Option 2: as a personal skill (available for all projects)
cp -R mathVideoMaker/skills/math-expliner  ~/.cursor/skills/

Environment (only needed for video generation; pure webpage can skip)

macOS / Linux:

bash .cursor/skills/math-explainer/scripts/setup_manim.sh   # install manim + ffmpeg + system libs + fonttools
python3 .cursor/skills/math-explainer/scripts/check_env.py  # health check

macOS key dependencies: cairo, pango, pkg-config (required for building pycairo via pip; script includes these). LaTeX is optional; if absent, Text/frow can be used instead of formulas.

Usage

In Cursor, simply tell the Agent something like:

• “Make a video explaining the Pythagorean theorem”
• “Explain to elementary school students: 5×□ = 4×□ + 7”
• “Explain how y=n·x² changes with n”

The Agent will read SKILL.md and follow the phased workflow to produce both the video and the companion webpage. The final output will be placed in the topic folder root (<topic>/<scene-name>.mp4 and <topic>/index.html).

Directory structure

mathVideoMaker/
├── skills/math-explainer/         # Copy this to .cursor/skills/ for use
│   ├── SKILL.md                   # Main scheduling: phases + checkpoints
│   ├── references/                # Pedagogy/storyboard, Manim guide, recipes, web guide
│   ├── scripts/                   # setup / check_env / check_text / check_web / render
│   └── templates/                 # Scene skeleton, mathviz guardrails, golden examples, webpage & storyboard templates
└── examples/                      # Demo videos

Thanks to the LinuxDO (https://linux.do) community for support