AI product Open source
Teachable Figures is an agent skill for Claude Code and Codex that turns a lesson claim into an interactive teaching figure. It structures each lesson around a predict–try–explain loop: the learner predicts an outcome, changes a cause, observes the effect, and explains a new case. The skill can produce standalone HTML figures or integrate with a host application's lesson schema, using 2D SVG, isometric or mechanical SVG, turning 3D, and optional WebGL renderers.
The workflow captures the audience, claim, misconception, representation, fidelity, and controls, then builds from a shared model that drives motion, readouts, accessible summaries, and explanations. It includes rendering kits, reviewed examples, browser checks, and a learner workspace using LESSONS.md, LEARNER.md, and LEARNING-PLAN.md. The repository provides fifteen complete examples, including gear ratios, transformer data flow, seasons, Bayes and base rates, natural selection, and dynamic equilibrium.
The skill and standalone pages have no package runtime dependencies; Node.js is used for Anatomy builders and Playwright for browser checks. Its own code is MIT-licensed and its original lesson content is CC BY 4.0, while bundled upstream skills and third-party assets retain their stated licenses. The figures are teaching designs rather than evidence of learning effectiveness, and the repository notes that they have not been evaluated with novice learners or a screen reader in the cited review.
1 use taken from transcripts — each links to the moment in the video.
An agent skill for Claude Code and Codex that builds interactive figures for teaching where students predict, change a cause, watch the effect, and explain a new case, in styles from simple SVG to full 3D.
1 in the library.