edulab: Turn Any Math Problem Into a 3D Interactive Lesson

A student stares at a solid geometry problem. “Find the angle between line PQ and plane ABC.” The textbook has a static diagram. The lines blur together. You can’t rotate it, can’t zoom in, can’t sanity-check whether the 120° answer even makes spatial sense.

This is how most students learn 3D geometry: from 2D pictures.

edulab changes that. Give it a problem, get back a single HTML page with MathJax on the left and an interactive Three.js 3D model on the right. Rotate the shape, zoom into the intersection, watch the camera animate through each solution step. It turns “I read it” into “I can see it.”

What You Get

edulab produces a self-contained lesson page. No server, no login, no dependencies. Open it in any browser.

• Left panel: problem statement, final answer, and step-by-step breakdown. Every formula rendered with MathJax — not screenshots of formulas, real typeset math.
• Right panel: a 3D model of the solid. Key elements highlight as the steps progress. The camera moves to show each relationship from the clearest angle.
• Source consistency: the answer, the 3D coordinates, and every intermediate value come from the same sympy computation. No hand-calculated numbers that drift apart.

It handles cubes and cuboids, pyramids and prisms, cylinders and cones. Problem types: line-plane angles, dihedral angles, skew line angles, point-to-plane distances, volume. All solved uniformly with the coordinate-system-plus-vector method.

Three Ways to Start

edulab accepts problems through three entry points:

• Text: paste or type a problem description. The skill extracts the statement and solves directly.
• Image upload: take a photo of a problem. Vision reads it, echoes it back for confirmation, then solves.
• Random generation: ask for a random problem with a seed. It generates fresh parameters and re-rolls if the answer isn’t clean.

Usage: Inputs and Outputs

Here’s what a full interaction looks like. All three entry points converge to the same pipeline.

Input — any of these:

• Type a problem: “A regular quadrilateral pyramid P-ABCD, base edge 2, height 1. Find the angle between line BE and plane PAC, where E is the midpoint of PC.”
• Upload a photo of a geometry problem. The agent reads it with vision, echoes the problem back for confirmation, then proceeds.
• Ask for random: “Give me a random dihedral angle problem on a cube.” It generates fresh parameters and re-rolls if the answer is messy.

No matter how you start, the input gets normalized into a structured problem spec: body type, dimensions, given conditions, what to solve for, and the output language (follows your prompt language).

Agent workflow — five steps the skill executes:

1. Normalize: convert the input into a machine-readable spec (JSON with geometry type, coordinates, query type)
2. Compute: a Python kernel using sympy runs exact coordinate math. No hand calculation. Outputs coordinates, vectors, normals, and the final answer as LaTeX strings.
3. Assemble: inject all data into template/lesson.html — problem text, step-by-step content, 3D model coordinates, camera positions, highlight mappings
4. Self-check: kernel answer must equal answer card value equal final step value. Local preview confirms no console errors, all formulas render.
5. Deliver: writes a single HTML file to your current working directory, named solution-<short-problem-description>.html

Output — one self-contained HTML file. Open it in any browser. No server, no login. Left panel: problem, answer, step-by-step MathJax breakdown. Right panel: interactive Three.js 3D model with step-synced highlights and camera transitions.

The whole interaction is one conversation turn. You describe a problem, the agent does the math and writes the HTML, you open it in a new tab.

Before edulab, here’s a quick detour.

Claude Code introduced a plugin system called agent skills. A skill is a package of instructions, scripts, and templates that teaches an AI agent how to do something it doesn’t natively know — generate video, render diagrams, or in this case, solve solid geometry and produce interactive lessons.

Think of skills as teaching an agent a workflow. The agent doesn’t memorize the answer. It learns the method. A video skill teaches it how to scaffold and render an HTML-to-video project. A diagram skill teaches it SVG composition rules. edulab teaches it coordinate-system geometry, sympy computation, and template injection.

This matters because it changes what an AI assistant is. Without skills, Claude can reason about geometry but can’t produce a 3D model. With edulab, it can solve, compute, and render — all in one conversation.

How It Works

eulab’s pipeline has four stages:

1. Normalize the problem: whether you typed it, uploaded an image, or asked for random, the input becomes a structured spec — solid type, dimensions, given conditions, what to solve for.
2. Compute exactly: a Python kernel using sympy calculates coordinates, vectors, normals, and the answer. No floating-point drift. Every value is exact.
3. Assemble the template: the kernel output gets injected into a data-driven HTML template. The 3D vertex coordinates come from the same computation as the solution steps.
4. Self-check: the kernel answer must match the answer card and the final step value. A local preview confirms formulas render correctly and there are no console errors.

You can also run the kernel standalone, without Claude:

python3 lib/geometry_kernel.py                     # built-in self-check
python3 scripts/generate.py cube   ./cube.html     # cube, line-plane angle
python3 scripts/generate.py random 7 ./random.html # random problem (seed=7)

Inside the HTML Page

The output page is a single file. All dependencies — Three.js, MathJax, CSS — load from CDN. The page has no backend, no build step, no npm.

Here’s how the interactive effects work under the hood:

Data-driven rendering. Every lesson page starts from the same template: template/lesson.html. A Python script injects a JSON data block — problem statement, solution steps, 3D model coordinates, camera positions per step — into a single script tag. The page reads this data island and renders everything client-side. No hardcoded content.

3D scene. Three.js WebGLRenderer draws the solid: vertices (spheres), edges (cylinders as tubes), planes (semi-transparent meshes), arrows, and measure labels via CSS2DRenderer. OrbitControls handles left-drag to rotate, scroll to zoom, right-drag to pan.

Step-by-step camera animation. Each solution step in the JSON data specifies a cameraPos and a list of highlight elements. When you advance a step, the page hides all highlight elements, shows only the current step’s set, and smoothly lerps the camera to the new position. The left panel simultaneously swaps the step content with a 280ms fade-up transition.

Draggable exploration. The current sample (regular quadrilateral pyramid) lets you drag point P along line SA. A raycaster projects your mouse onto the constraint segment, a setParam(t) function recomputes the math coordinates, updates all dependent 3D objects in real time, and a readout panel shows the live angle/distance. This means students can test “what happens to the angle when P moves?” instead of just reading the answer.

Overflow handling. MathJax block formulas that exceed the sidebar width get a forced horizontal scrollbar. You can also click-drag to scroll long formulas without touching the scrollbar.

Accessibility. The page includes a skip link, aria-label/aria-live attributes on the step container, and respects prefers-reduced-motion by disabling all animations.

Setup

Install in one command:

npx skills add wy51ai/edulab

Or through the Claude Code plugin marketplace:

/plugin marketplace add wy51ai/edulab
/plugin install edulab

The computation kernel needs sympy. If it’s missing:

python3 -m pip install sympy

Trigger it by describing a geometry problem — “find the dihedral angle in this regular quadrilateral pyramid” — or by uploading an image of one.

What It Doesn’t Do

edulab’s first skill covers solid geometry only. It won’t help with algebra, calculus, or physics. The problem types are the ones solved by the coordinate-system-plus-vector method — if a problem requires pure synthetic reasoning without coordinates, edulab isn’t built for it.

The output is a static HTML file. It’s not a web app with user accounts or progress tracking. It’s designed to be generated, opened, and explored.

On the upside, edulab is extensible. Add a problem type by writing a solver function in geometry_kernel.py. Add a new solid by defining its coordinates and edge topology. The architecture is straightforward — Python for computation, HTML for presentation.

Skills Are a Learning Paradigm

Most discussions of agent skills focus on developer productivity: generate code, scaffold projects, write tests. edulab shows a different direction.

Skills can produce learning materials that didn’t exist five minutes ago. A student asks about dihedral angles on a pyramid, and the agent generates a custom lesson — with a 3D model of that exact pyramid, with that exact angle highlighted. Not a generic Khan Academy video. Not a textbook diagram with different numbers. The thing they’re stuck on, visualized.

This is bigger than geometry. The same pattern — problem normalization, exact computation, template injection into interactive output — applies to physics, chemistry, statistics, any domain where understanding benefits from visualization.

We’re used to AI that answers questions. edulab points toward AI that builds learning environments.

Try It

edulab is open source under Apache 2.0. 235 stars, 51 forks, built by WY. Install it, throw a geometry problem at it, and open the HTML.

edulab on GitHub