edu-plane-geometry

Plane Geometry → Interactive Teaching Webpage

What this skill produces

A single-page HTML (three columns) that can be opened directly in a browser:

Left column: problem statement + dynamic console — a variable parameter slider (such as side length ratio, angle, position parameter) drives real-time recomputed geometric quantities (side lengths, area, angles...), plus an "identity indicator" or "range bar".
Middle column: step-by-step solution (formulas use KaTeX), can be collapsed with one click to give space to the board.
Right column: light-colored 2D Canvas dynamic geometry board (polygon fill + segments + point labels + right-angle marks/equal-length marks/angle arcs), overlaid with a brush doodle toolbar. No coordinate axis grid, restoring the pure geometry style of a textbook.

Dependencies

No external dependencies. Template engine template/board-geo.html is a self-contained single-page HTML. As long as you can use Python 3 (standard library is enough) for string replacement, or directly inject JSON manually.

Difference from edu-analytic-geometry

edu-plane-geometry: pure plane geometry, boardno coordinate axes/grid(light background), points can be defined viageometry construction syntaxdefinitions
edu-analytic-geometry: analytic geometry, board with coordinate axes/grid, involving conic sections

Workflow

Step 1: Determine the problem specification

Clarify:

Geometric elements: triangle (right/isosceles/equilateral/general), quadrilateral (trapezoid/parallelogram/rectangle/square), circle, etc.
Variable parameters: which side is variable, angle range, scale factor
Theorem/relationship to display: Pythagorean theorem a²+b²=c², area equation, congruence conditions, similarity ratio, etc.
Language: output language follows the prompt language (Chinese/English)

Step 2: Design the geometry system

Choose a convenient coordinate system (coordinates are still needed internally, but the boarddoes not display coordinate axes/grid).

Coordinate placement tips：

Place the right-angle vertex at the origin, with the two legs along the coordinate axes
For symmetric figures, use symmetry to reduce the number of variables
Fix a+b as a constant so that the height of figures such as trapezoids remains unchanged
Ensure the geometric structure is valid (non-degenerate) across the slider's entire range

Geometry construction syntax(points support object syntax instead of coordinates):

"points": {
  // 传统坐标语法（仍然支持）
  "A": [0, 0],
  "B": ["a", 0],
  // 几何构造语法（推荐）
  "C": { "type": "midpoint", "a": "A", "b": "B" },
  "D": { "type": "foot", "from": "C", "to": ["A", "B"] },
  "E": { "type": "intersection", "l1": ["A", "B"], "l2": ["C", "D"] },
  "F": { "type": "on_ray", "from": "A", "dir": "B", "distance": "t" },
  "G": { "type": "reflect", "point": "C", "line": ["A", "B"] },
  "H": { "type": "rotate", "point": "C", "center": "A", "angle": 90 }
}

Step 3: Assemble the data and inject it into the template

📍 Output location & unique artifact: delivered to the useronly one .html, written tothe current working directory (Path.cwd()）. Do not leave any other files in the cwd — build scripts (.py）、__pycache__, screenshots and other temporary files all go in /tmp or delete it after use. Never write it into the skill's own directory either.

Data format(three-part JSON, schema see template/board-geo.html data island __LESSON_DATA__）：

{
  "lesson": {
    "language": "zh-CN",
    "title": "页面标题",
    "problem": "<p>题面 HTML，公式用 $…$ / $$…$$</p>",
    "answer": "$a^2+b^2=c^2$"
  },
  "steps": [
    { "title": "步骤一", "content": "<p>解析内容...</p>" },
  ],
  "board": {
    "view": { "xRange": [-1, 7], "yRange": [-1, 7] },
    "points": {
      "P": [0, 0],
      "Q": ["a", 0],
      "R": [0, "b"]
    },
    "param": {
      "name": "t",
      "label": "边长 $a$",
      "min": 1, "max": 5, "step": 0.1,
      "value": 3, "standard": 3
    },
    "scalars": [
      { "name": "a", "expr": "t" },
      { "name": "b", "expr": "4" },                            // 另一直角边 b 固定
      { "name": "c", "expr": "sqrt(a*a+b*b)" },               // 斜边
      { "name": "chk", "expr": "a*a+b*b-c*c" }                // 勾股恒等式左侧，应恒为 0
    ],
    "derived": [
      { "type": "polygon", "pts": ["P", "Q", "R"],
        "color": "rgba(248,113,113,0.25)", "stroke": "#f87171" },
      { "type": "segment", "name": "PQ", "a": "P", "b": "Q", "color": "aux" },
    ],
    "annotations": [
      { "type": "right_angle", "vertex": "R", "arms": ["P", "Q"] },
      { "type": "tick", "segment": ["P", "Q"], "count": 1 },
      { "type": "angle_arc", "vertex": "P", "arms": ["Q", "R"], "label": "$\\theta$" },
    ],
    "readouts": [
      { "id": "a", "label": "边长 $a$", "type": "expr", "expr": "a" },
      { "id": "angleP", "label": "$\\angle P$", "type": "angle",
        "vertex": "P", "arms": ["Q", "R"], "digits": 1 },
      { "id": "area", "label": "面积", "type": "area_triangle",
        "pts": ["P", "Q", "R"] },
      // 勾股恒等式验证：a²+b²-c² 应恒等于 0，供 constant 指示器引用
      { "id": "chk", "label": "$a^2+b^2-c^2$", "type": "expr", "expr": "chk", "digits": 3 },
    ],
    "constant": { "of": "chk", "label": "$a^2+b^2-c^2 \\equiv 0$" },
    "legend": [
      { "color": "#f87171", "text": "△PQR" },
    ]
  }
}

Build script method(Python, recommended): Place the build script in /tmp, and do string replacement directly:

#!/usr/bin/env python3
import json, sys
from pathlib import Path
sys.dont_write_bytecode = True

SKILL_DIR = Path(".claude/skills/edu-plane-geometry")
TEMPLATE = SKILL_DIR / "template" / "board-geo.html"
PLACEHOLDER = "__LESSON_DATA__"

data = {
    "lesson": { ... },
    "steps": [ ... ],
    "board": { ... }
}

template = TEMPLATE.read_text(encoding="utf-8")
out_path = Path.cwd() / "solution-xxx.html"
out_path.write_text(
    template.replace(PLACEHOLDER, json.dumps(data, ensure_ascii=False)),
    encoding="utf-8"
)
print("written:", out_path)

python3 -B /tmp/build.py && rm -f /tmp/build.py

Note: change the template path to board-geo.html, not the original board.html。

Step 4: Self-check and delivery

Numerical correctness: manually verify the sign expectations of area/length values
Geometric correctness: right-angle marks, equal-length marks, and angle arc annotation positions are correct
Browser preview: start a local static server, check that there are no console errors, KaTeX works properly, and slider interaction is smooth
Close port: stop the local server immediately after preview ends
Cleanup: delete /tmp temporary scripts in, and confirm that cwd only contains .html

Data format reference (core fields)

Description of key board fields

Field	Type	Description
`view`	`{xRange, yRange, showGrid?, showAxes?}`	Mathematical coordinate viewport (grid/axes default false)
`points`	`{name: [x,y] 或 {xy,...} 或 {type,...}}`	Vertex coordinates or geometric construction objects
`param`	`{name, min, max, step, value, label, ticks}`	Slider definitions
`scalars`	`[{name, expr}]`	Named constants derived from param
`derived`	Construction sequence	polygon / segment / midpoint / foot_perp etc.
`annotations`	`[{type, ...}]`	Geometric annotations (right-angle/equal-length marks/angle arcs/parallel marks)
`readouts`	`[{id, label, type, ...}]`	Real-time values
`constant`	`{of, label}`	Fixed-value indicators
`legend`	`[{color, text}]`	Legend

Point geometry construction types

type	Field	Description
`midpoint`	`a, b`	Midpoint of AB
`foot`	`from, to: [p1,p2]`	Foot of perpendicular from point to line
`intersection`	`l1: [p1,p2], l2: [p1,p2]`	Intersection of two lines
`on_ray`	`from, dir, distance`	A point on a ray (from→dir direction, given distance)
`on_circle`	`center, radius, angle`	A point on a circle (angle in °)
`rotate`	`point, center, angle`	Rotate around center (°)
`reflect`	`point, line: [p1,p2]`	Reflect about a line

Annotation types

type	Field	Description
`right_angle`	`vertex, arms: [p1,p2]`	Right-angle mark ∟
`tick`	`segment: [p1,p2], count`	Equal-length mark `\|\|`(count number of marks)
`parallel_mark`	`segment: [p1,p2], count`	Parallel mark `►`(count number of marks)
`angle_arc`	`vertex, arms: [p1,p2], label?, radius?`	Angle arc annotation (optional label)

New geometry types for readouts

type	Field	Displayed content
`angle`	`vertex, arms: [p,q]`	Angle value (degrees)
`ratio`	`a,b, c,d`	Ratio of the lengths of segments AB and CD
`area`	`pts: [p,q,r,...]`	Polygon area

Other existing types:expr / distance / coord / area_triangle / length / status

Common derived type

type	Field	Effect
`polygon`	`pts, color, stroke`	Semi-transparent filled polygon
`segment`	`a, b, color, dashed`	Segment
`midpoint`	`name, a, b`	Midpoint
`foot_perp`	`name, point, line`	Foot of perpendicular
`vector`	`from, to, color, label`	Vector arrow

Expression engine

Coordinate values/scalars in expr supports:+ - * / ^ sqrt cbrt abs sin cos tan asin acos atan atan2 exp log pow min max sign floor ceil hypot PI Trigonometric functions useradians(angles must be converted first:theta*PI/180). Parameter names must be valid JS identifiers (such as t/k/a/ratio, cannot use θ and other non-identifiers).