Solid Geometry Problem Solving → Interactive Web Page

What This Skill Produces

A single-page HTML file that can be directly opened in a browser: problem statement/answers/step-by-step explanations (formulas rendered with MathJax) on the left, and a 3D model corresponding to the problem (Three.js, rotatable and scalable, with step-by-step highlighting of key elements and camera switching) on the right. The format is consistent with

template/lesson.html

Dependencies (Important)

The calculation core

lib/geometry_kernel.py

depends on sympy. Before running the script, ensure you have a

python3

environment that can import sympy: run

python3 -c "import sympy"

Handling Missing Libraries (Important): If an import error occurs (the same applies to sympy or any other library used later), first ask the user for permission to install before helping with installation (

python3 -m pip install <library-name>

), or switch to an interpreter that already has the library installed; do not install without asking first. The

python3

in the commands below refers to this interpreter that can run the dependencies properly.

Workflow

Step 1: Obtain Problem Spec (Unify Three Entries)

Organize the problem into a structured spec (see

references/problem-schema.md

for format): geometry type and dimensions, known construction points/conditions, type and object of the required solution, language.

Text Problems: Extract directly.
Images: Extract using visual image recognition, and echo the recognized problem to the user for confirmation (problem statement/geometry/dimensions/required solution/language) before proceeding.
Random Problem Generation: Select the geometry type and problem type, use the kernel to solve with random parameters, and reselect if the answer is not regular.

Output Language Follows Prompt Language: English prompts → English web pages, Chinese prompts → Chinese web pages. Record
language
in the spec.

Step 2: Perform Precise Calculations with the Kernel (Do Not Calculate Manually)

Follow the coordinate system conventions and solution recipes in

references/conventions.md

, call

lib/geometry_kernel.py

: Obtain precise coordinates, key vectors, normal vectors, final answers, and intermediate quantities to be displayed in each step (all as LaTeX strings). Use

kernel.to_three(points, scale)

to get the three.js coordinates of vertices.

You can first run the kernel in the command line to verify the answer, for example:

bash

python3 lib/geometry_kernel.py    # Built-in sample self-check

Step 3: Assemble Lesson Data and Inject into Template

📍 Output Location (Important): The finished HTML file must be written to the user's current working directory (
Path.cwd()
), unless the user explicitly specifies a path. Never write to the skill's own directory (such as
skills/edu-solid-geometry/output/
) — that is the internal development sample directory of the skill. Temporary build scripts should also be placed in the cwd or a temporary directory (such as
/tmp
) and can be deleted after use.

Write a temporary build script, import kernel, bodies, generate, assemble

lesson

steps

model

data (schema see

references/problem-schema.md

), then call

generate.render_html(data, out)

to inject into the template and generate HTML. Use an absolute path under cwd for

out

python

from pathlib import Path
out = Path.cwd() / "solution-<brief-problem-description>.html"   # Saved in user's current directory, not the skill directory
generate.render_html(data, out)

All numerical values in
```
steps[*].content
```
directly reference the calculation results of the kernel; the model only needs to organize the explanatory text (written in the target language).

Use the results of

kernel.to_three(...)

for

model.points

; use the topology from

lib/bodies.py

for

model.spheres

edges

(

quad_pyramid

tri_pyramid

cuboid

cube

prism

), and manually write edges for rare geometries.

Configure
```
highlight
```
(absolute set of visible elements for this step) and
```
cameraPos
```
for each step.
When line segment lengths are given in the problem statement: Add a
```
measure
```
element to the corresponding edge (use LaTeX for
```
label
```
, such as
```
2\sqrt{2}
```
), and include it in the
```
highlight
```
of the "Establish Coordinate System/List Known Conditions" step to mark the length at the point in the 3D diagram (see problem-schema).
For English output, fill in English copy for
```
lesson.ui
```
and set
```
lesson.language="en"
```
.

Directly Referable Examples:

build_data()

(regular square pyramid · line-plane angle),

build_cube_data()

(cube · line-plane angle),

build_box_volume_data()

(cuboid · volume) in

scripts/generate.py

are complete templates; you can modify them accordingly.

generate.py

can directly generate registered problems; if no path is passed, it defaults to writing to the current working directory (cwd), or you can explicitly specify a file name under cwd (use

scripts/generate.py

in the skill directory, output will be in cwd):

bash

python3 <skill-directory>/scripts/generate.py cube ./cube.html
python3 <skill-directory>/scripts/generate.py box  ./box.html

Random Problem Generation:

generate.py random <seed> [output.html]

, internally uses

kernel.is_clean(...)

to judge if the answer is regular, and reselects if not:

bash

python3 <skill-directory>/scripts/generate.py random 7 ./random.html   # Defaults to ./random.html(cwd) if no path is given

When expanding random problem types, follow the "random parameters → solve → reselect if not passing is_clean" process.

Step 4: Self-Check (Corresponding to Correctness Plan)

Kernel answer == answer card
```
answerValue
```
== final value displayed in the last step (generate.py already has assertion examples).
3D vertex coordinates come from
```
kernel.to_three
```
(same source as problem solving).
Start a local static server (serving the directory where the output file is located, i.e., cwd) to preview and check: no console errors, formulas rendered correctly, step-by-step highlighting/camera meets expectations. (When developing in the skill repository, you can use
```
geom-preview
```
in
```
.claude/launch.json
```
; when running elsewhere, start a temporary static server for cwd.)

⚠️ Must Close Any Ports/Services You Opened: Immediately stop the local service after preview and checking, never leave port-occupying processes running.
If opened with a preview tool: Run
preview_stop
(pass the corresponding serverId) immediately after checking.
If using
http.server
directly: Kill it after use, or verify release with
lsof -nP -iTCP:<port> -sTCP:LISTEN
.
Confirm the port is released before delivering, then inform the user of the result. Failing to close the service = incomplete self-check.

Step 5: Delivery

The finished product is written to the user's current working directory (cwd), named in the format

solution-<brief-problem-description>.html

. Inform the user of the path (under cwd), which can be directly opened in a browser. Before delivery, confirm: (1) The finished product is in cwd, not the skill directory; (2) No local services/ports opened during this preview are left running.

Expansion

Add Problem Types: Add solution functions in
```
geometry_kernel.py
```
(see conventions recipe table), and add a
```
build_*
```
function in
```
generate.py
```
.
Add Geometries: Add coordinate construction functions in
```
geometry_kernel.py
```
, and add edge topology in
```
bodies.py
```
.

edu-solid-geometry

NPX Install

Tags

SKILL.md Content (Chinese)

Solid Geometry Problem Solving → Interactive Web Page

What This Skill Produces

Dependencies (Important)

Workflow

Step 1: Obtain Problem Spec (Unify Three Entries)

Step 2: Perform Precise Calculations with the Kernel (Do Not Calculate Manually)

Step 3: Assemble Lesson Data and Inject into Template

Step 4: Self-Check (Corresponding to Correctness Plan)

Step 5: Delivery

Expansion

Directory