Repolode
Submit
ywEdAi

ywEdAi/teachable-figures

An agent skill that turns a lesson claim into an interactive figure where learners predict, change a cause, and explain a new case.

View on GitHubWebsite
Stars
288
Forks
38
Open issues
0
Last commit
5 days ago

What is it?

Teachable figures is an agent skill for building interactive teaching figures around a single causal claim. A learner predicts an outcome, changes a cause with native controls, observes the effect, and then explains a transfer case. The skill starts from a teaching spec that names the claim, the common misconception, the cause, the observable effect, and the underlying truth model, and only then chooses geometry and a renderer.

The repository includes the skill instructions, rendering kits adapted from two upstream skills (Anatomy for mechanical solids and 3D views, and iso-figure for isometric SVG), six complete example lessons that run offline as standalone HTML, and browser and model test suites. It works with a host application's lesson schema or as a standalone HTML figure, and is installed into Claude Code or Codex skill directories.

The examples cover gear ratios, cone cross-sections, a human chest in 3D, a rocket cutaway, Transformer attention data flow, and a Ming-dynasty robe. The project states that generated figures are teaching designs that have not been evaluated with learners.

Key features

  • 01Turns a single teaching claim into a predict, try, and explain interaction loop.
  • 02Provides rendering kits for 2D SVG, isometric SVG, mechanical cutaways, and turning 3D views.
  • 03Ships six complete offline HTML lessons with native controls, reset, and bilingual pages.
  • 04Includes model and browser test suites, plus a 3D geometry audit script.
  • 05Installs into Claude Code or Codex as a skill, or works from a plain HTML figure.

Use cases

  • Creating an interactive physics or mechanics demo that shows how changing one input alters an output.
  • Building a standalone HTML teaching figure for a lesson on a misconception.
  • Adding predict-and-explain interactions to an existing educational web app.
  • Exploring ways to visualize abstract models such as attention or gear trains for students.

Quick start

  1. 1

    Install for Claude Code by cloning the repository into your skills directory

    git clone https://github.com/ywEdAi/teachable-figures.git ~/.claude/skills/teachable-figures
  2. 2

    Restart Claude Code, then type /teachable-figures and describe a teaching task

  3. 3

    Optionally install development dependencies to run the checks

    npm ci

Things to know

  • The license is not specified in the metadata, so reuse terms are unclear.
  • Figures have not been evaluated with learners, so teaching effectiveness is unproven.
  • Some bundled examples include autoplay tours that must be disabled before lesson integration.
  • Browser checks require an installed Google Chrome or a Playwright Chromium setup.

In collections

Claude Code tools, skills & pluginsAI coding assistants & agentsAI agent skill librariesLearning & education tools

Topics

#agent-skill#education#interactive-learning#svg#webgl#html#claude-code#codex

FAQ

What is teachable-figures?
An agent skill that turns a lesson claim into an interactive figure where learners predict, change a cause, and explain a new case. Teachable figures is an agent skill for building interactive teaching figures around a single causal claim. A learner predicts an outcome, changes a cause with native controls, observes the effect, and then explains a transfer case. The skill starts from a teaching spec that names the claim, the common misconception, the cause, the observable effect, and the underlying truth model, and only then chooses geometry and a renderer.
Is teachable-figures free to use? What license does it have?
teachable-figures has no declared license. Its code is public, but without a license you have no explicit permission to reuse it; ask the author before relying on it.
Is teachable-figures still maintained?
Actively maintained. The last commit to teachable-figures was on Nov 3, 2026.
What can I use teachable-figures for?
Creating an interactive physics or mechanics demo that shows how changing one input alters an output. Building a standalone HTML teaching figure for a lesson on a misconception. Adding predict-and-explain interactions to an existing educational web app. Exploring ways to visualize abstract models such as attention or gear trains for students.
How do I install teachable-figures?
Install for Claude Code by cloning the repository into your skills directory: git clone https://github.com/ywEdAi/teachable-figures.git ~/.claude/skills/teachable-figures Restart Claude Code, then type /teachable-figures and describe a teaching task Optionally install development dependencies to run the checks: npm ci
Where can I get teachable-figures?
The source code and installation instructions are on GitHub: https://github.com/ywEdAi/teachable-figures

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects