[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-106296":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":17,"stars90d":15,"forks30d":15,"starsTrendScore":18,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":22,"topics":23,"createdAt":10,"pushedAt":24,"updatedAt":25,"readmeContent":26,"aiSummary":10,"trendingCount":15,"starSnapshotCount":15,"syncStatus":27,"lastSyncTime":28,"discoverSource":29},106296,"teachable-figures","ywEdAi\u002Fteachable-figures","ywEdAi","An agent skill for causal teaching figures through predict, try, and explain. Includes rendering kits, reviewed examples, and browser checks.","https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002F",null,"JavaScript",224,29,89,0,14,65,93,87.93,false,"main",true,[],"2026-10-28 22:39:34","2026-11-02 17:18:58","\u003Cp align=\"center\">\n  \u003Cimg src=\"assets\u002Freadme\u002Fhero.svg\" width=\"100%\" alt=\"Teachable figures. An agent skill for interactive learning through predict, try, and explain.\">\n\u003C\u002Fp>\n\n# Teachable figures\n\n[English](README.md) · [简体中文](README.zh-CN.md) · **[Live demos →](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002F)**\n\nTurn a lesson's claim into an experiment a learner can operate. Predict a result, change a cause, read the effect, and explain a new case.\n\nThis is an **agent skill**, with rendering examples and verification tools. It works with a host application's lesson schema or a standalone HTML figure.\n\n## Quick install\n\n**Claude Code** (available in every project):\n\n```sh\ngit clone https:\u002F\u002Fgithub.com\u002FywEdAi\u002Fteachable-figures.git ~\u002F.claude\u002Fskills\u002Fteachable-figures\n```\n\nFor one project only, clone into that project's `.claude\u002Fskills\u002Fteachable-figures`. Restart Claude Code, then type `\u002Fteachable-figures` or simply describe a teaching task.\n\n**Codex**:\n\n```sh\ngit clone https:\u002F\u002Fgithub.com\u002FywEdAi\u002Fteachable-figures.git ~\u002F.codex\u002Fskills\u002Fteachable-figures\n```\n\nInvoke it with `$teachable-figures` in a prompt.\n\n**Other agents or manual install**: download the [repository ZIP](https:\u002F\u002Fgithub.com\u002FywEdAi\u002Fteachable-figures\u002Farchive\u002Frefs\u002Fheads\u002Fmain.zip) or the `.skill` file (a ZIP archive) from the [latest release](https:\u002F\u002Fgithub.com\u002FywEdAi\u002Fteachable-figures\u002Freleases\u002Flatest) and extract it into the agent's skill directory. If the agent has no skill directory, ask it to read `SKILL.md` first.\n\nFor a Git installation, update with `git pull` in the install directory. For a ZIP or `.skill` installation, download the newer archive and replace the installed skill folder; preserve any local customizations first.\n\n## Two ways to use it\n\n**Guided mode (default).** The skill asks one round of at most five questions, each with a recommended answer you can accept with \"ok\": who the learner is, the claim and misconception, standalone HTML or an existing app, schematic\u002Fdetailed\u002F3D fidelity, and the planned controls. It builds after you confirm the plan.\n\n```text\n\u002Fteachable-figures Explain to middle-school students why an idler gear\ndoes not change the speed-ratio magnitude.\n```\n\n**Direct mode.** Say \"just build it\" or \"skip questions\", or name the claim, learner, target, and fidelity up front. The skill applies defaults and lists every assumption in its delivery note.\n\n```text\n\u002Fteachable-figures Just build it. Explain why adding an idler gear does not\nchange the final speed-ratio magnitude. Misconception: every extra gear makes\nthe output slower. Standalone HTML with prediction, one-turn counters, native\ncontrols, reset, and an explanation prompt.\n```\n\nIn Codex, write `$teachable-figures` instead of `\u002Fteachable-figures`.\n\n## What it is for, and what it is not for\n\n| Good fit | Poor fit |\n| --- | --- |\n| A mechanism the learner can **change and observe**: gear ratios, attention masks, cross-section areas | Data charts, dashboards, or report figures with nothing to predict |\n| Structures that need cutting, separating, or rotating: a rocket cutaway, chest organs, garment pleats | Slide decks, posters, infographics, or static illustrations |\n| One claim from a text, one figure per mechanism | A whole course in one request; pick the mechanisms worth a figure first |\n| A teaching model with stated assumptions | Clinical anatomy, engineering simulation, CAD, or physics-engine accuracy; reconstruction presented as historical fact |\n\nA generated figure is a teaching design. It has not been evaluated with learners.\n\n## Explore six complete examples\n\n![Actual screenshots of a cone section, a schematic chest, a rocket launch, Transformer data flow, a Ming robe, and a gear-ratio experiment](assets\u002Freadme\u002Fexamples.png)\n\n**[Try all six examples online →](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002F)** No installation required. Each page also runs offline with native controls, reset, an explanation, and a transfer question. Download the [example directory](examples\u002F) for local use. Every page switches between English and Chinese, with the figure on the left and the steps on the right.\n\nNew to the skill? Start with **[How it works](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002Fhow-it-works.html)**: a teachable figure about the skill itself. Hand it requests, see which it declines, and remove a step to see which failures a screenshot never shows.\n\n| Example | What the learner can inspect |\n| --- | --- |\n| [Cone sections in 3D](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002Fgeometry-slices.html) | Rotate a cut cone. Compare linear radius growth with quadratic area growth. |\n| [Human chest in 3D](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002Fhuman-anatomy.html) | Rotate atlas-sourced human surfaces, open the chest window, and inspect lungs, heart, airways, and a labeled schematic diaphragm. |\n| [Rocket launch](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002Frocket-launch.html) | Inspect a crafted rocket cutaway and separate its assemblies; compare thrust, pad support, burnout, and coasting. |\n| [Transformer data flow](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002Ftransformer-flow.html) | Trace toy vectors through Q\u002FK\u002FV, masking, attention, residual normalization, and FFN stages. |\n| [A Ming robe](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002Fchinese-clothing.html) | Inspect overlapping cloth fronts, shaded fold surfaces, and a pleat section, based on a specific museum garment. |\n| [Gear ratios](https:\u002F\u002Fywedai.github.io\u002Fteachable-figures\u002Fgear-ratio.html) | Add an idler and distinguish output-turn magnitude from rotation direction. |\n\nThe two spatial examples rotate world-coordinate geometry with depth ordering. The chest uses Human Reference Atlas meshes, with a separately authored schematic diaphragm and an inspection window. The rocket is a one-dimensional ideal model, the Transformer uses disclosed toy parameters, and the clothing drawing distinguishes documented facts from reconstruction.\n\n\u003Cdetails>\n\u003Csummary>See the original gear-ratio teaching loop\u003C\u002Fsummary>\n\nThe [gear-ratio lesson](examples\u002Fgear-ratio.html) asks whether an extra idler gear makes the output slower. One input turn produces half an output turn with a 12-tooth driver and 24-tooth output. The idler changes direction while preserving that magnitude.\n\n![Gear-ratio experiment after both trials. Both outputs make half a turn; the idler changes direction. Native controls and turn counters make the result inspectable.](assets\u002Freadme\u002Fgear-ratio.png)\n\nOpen the HTML file locally. It runs without a server, framework, or remote assets. The gears are a schematic of an ideal model, not a physical tooth-contact simulation.\n\n\u003C\u002Fdetails>\n\n## Start with the mechanism\n\nThe teaching spec names a claim, misconception, cause, observable effect, and truth model before geometry. One model drives motion, readouts, accessible summaries, and explanations.\n\nChoose subject representation first, then the simplest renderer that meets the requested fidelity and interaction. [Renderer selection](references\u002Frendering-selection.md) routes iso-figure to functional box-like devices, Anatomy to crafted rigid mechanisms, and organic anatomy\u002Ftextiles to appropriate source geometry or illustration. The upstream name Anatomy does not imply a medical atlas.\n\nChoose a mode that preserves that representation:\n\n| Mode | Use it for |\n| --- | --- |\n| 2D SVG | Distributions, curves, state traces, and small processes. |\n| Lightweight isometric SVG | Working keys, switches, drawers, and screens. |\n| Mechanical SVG | Supports, joints, pipes, cutaways, and exploded assemblies. |\n| Turning 3D | Rotation or changing occlusion that explains the concept. |\n| Optional WebGL | Fields such as waves, heat, or light that need it. |\n\nRenderer and mechanism are separate choices. A gear ratio does not need a 3D renderer to teach the ratio.\n\n## Review and iteration\n\nThe [rendering fusion review](reviews\u002Frendering-fusion-audit.md) explains why the initial examples fell short visually and how v0.3.0 separates subject fidelity from renderer complexity. The [v0.2.0 report](reviews\u002Fv0.2.0.md) records the earlier geometry fix and five new lessons. The historical October 27 review includes independent [UI\u002FUX feedback](reviews\u002Fuiux.md) and [pedagogical feedback](reviews\u002Fpedagogy.md).\n\nThe reviewed revision fixes writing-field shortcut interception in both lightweight examples. It adds native controls and live readouts. The synth also gains reset, mute, input ownership, and a scope that stops when idle, hidden, offscreen, or under reduced motion.\n\nThe teaching guidance now distinguishes expected probabilities from random samples, defines the meaningful observation, and asks for a causal explanation plus a transfer case. The pedagogy report contains worked temperature-sampling and idler-gear specs.\n\nThe four turning-dial crowding defects are repaired through actual socket and terminal geometry. The full configured 3D audit passes with every failure category at zero. Audit thresholds, exclusions, and the rendering engine remain unchanged. [Read the raw full-audit output](reviews\u002Fturning-dial-full-audit-v0.2.0.txt).\n\n## Run the checks\n\nThe skill and standalone pages have no package runtime dependencies. Node.js is needed for Anatomy builders. Playwright is a development dependency for the browser checks.\n\n```sh\nnpm ci\nnpm test\nnpm run test:browser\n```\n\nThe v0.3.0 rendering revision passes 4 model\u002Fspec checks and 21 browser cases; both new geometry preparation scripts also regenerate their embedded output. The earlier 12 upstream theme builds are recorded in the v0.2.0 review. To run the slower full turning-dial geometry audit in a temporary copy:\n\n```sh\nnpm run audit:3d\n```\n\nThe browser suite uses an installed Google Chrome. Set `BROWSER_CHANNEL=chromium` to use a Playwright Chromium installation. Builds run in a temporary copy and leave the bundled source unchanged.\n\nModel tests check the ripple solver and interference behavior. Build tests generate six Anatomy examples in both themes. Browser cases check input isolation, native controls, reset, held-note ownership, the five new lessons, layout at 360px and desktop widths, both color schemes, and reduced motion. See the [current review](reviews\u002Fv0.2.0.md) for the exact scope and remaining gaps.\n\n## Know the limits\n\n- Upstream Anatomy examples are rendering demonstrations. Their automatic tours must be disabled before lesson integration. The six complete lessons do not autoplay.\n- The AI English Shift adapter describes a particular host. Inspect its current source before relying on paths, registry shape, or language requirements.\n- Passing model and browser checks does not establish learning effectiveness. These figures have not been evaluated with novice learners or a screen reader in this review.\n- The full mechanical audit covers the configured turning-dial fixture. The cone and atlas chest have their own checks and selected-view inspection, not an exhaustive mesh-intersection proof. A successful build is insufficient evidence of physical accuracy.\n\n## Sources and licenses\n\nThis skill fuses the existing **teachable-figures** teaching workflow with two upstream rendering skills. The teaching workflow contributes the claim, misconception, predict → try → explain loop, reusable configuration, and host integration.\n\n| Upstream skill | What this fusion uses | Pinned revision | License |\n| --- | --- | --- | --- |\n| [Anatomy — wheresryan22\u002Fanatomy](https:\u002F\u002Fgithub.com\u002Fwheresryan22\u002Fanatomy) | Mechanical solids, joints and pipes, cutaway and exploded views, camera controls, 3D\u002FWebGL techniques, and geometry verification tools. Bundled in `assets\u002Fanatomy\u002F`. | [`454a0ef`](https:\u002F\u002Fgithub.com\u002Fwheresryan22\u002Fanatomy\u002Ftree\u002F454a0ef801b6d9b905f08309d094491c7085b3dd) | [MIT · Ryan](assets\u002Fanatomy\u002FLICENSE) |\n| [iso-figure — MrBongoC\u002Fai-iso-skill](https:\u002F\u002Fgithub.com\u002FMrBongoC\u002Fai-iso-skill) | Isometric SVG projection, working keys\u002Fswitches\u002Fdisplays, shared state and rendering, and portable HTML examples. Bundled in `assets\u002Fiso-figure\u002F` and adapted in `references\u002Fsimple-iso.md`. | [`44b4da7`](https:\u002F\u002Fgithub.com\u002FMrBongoC\u002Fai-iso-skill\u002Ftree\u002F44b4da7714148eef547cc1b102e433472dfe3531) | [MIT · Tolga Cohce](assets\u002Fiso-figure\u002FLICENSE) |\n\nAnatomy is the upstream skill's name; it is a toolkit for explanatory objects, not a medical atlas. This fusion adapts upstream defaults to teaching: no mandatory part count, no autoplay before prediction, readable labels, native controls, reduced motion, and a shared truth model. The repository also includes local geometry fixes, accessibility changes, six complete lessons, and review tools.\n\nSee [sources and fusion decisions](references\u002Fsources-and-fusion.md) for the contribution boundaries and [the source manifest](references\u002Fsource-manifest.json) for exact revisions and local adaptations. Scientific and historical references for each lesson appear on its example page.\n\nThe README design workflow uses [oil-oil\u002Fbeautify-github-readme](https:\u002F\u002Fgithub.com\u002Foil-oil\u002Fbeautify-github-readme). It is documentation tooling, separate from the two bundled rendering skills.\n\nThe chest also uses **[Human Reference Atlas \u002F HuBMAP reference meshes](https:\u002F\u002Fhumanatlas.io\u002F3d-reference-library)** under [CC BY 4.0](https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F). This is a domain data source, separate from the rendering skills. [Asset provenance and alteration details](assets\u002Fhra\u002Fprovenance.json) record the fixed revision, source hashes, cropping, packing and recoloring; [rebuild instructions](assets\u002Fhra\u002FREADME.md) accompany the derivative.\n\nBoth upstream contributions retain their MIT notices in [Anatomy's license](assets\u002Fanatomy\u002FLICENSE) and [iso-figure's license](assets\u002Fiso-figure\u002FLICENSE). Those licenses cover the corresponding contributions. No additional license is granted here for the original lesson material, app references, or screenshots.\n\n## Demo hosting\n\nGitHub Pages serves the `gh-pages` branch. To publish the current `examples\u002F` directory from a clean `main` checkout:\n\n```sh\ngit subtree push --prefix examples origin gh-pages\n```\n\nPages redeploys when that branch changes. The demos have no runtime package dependencies; `.nojekyll` keeps the published HTML unchanged.\n",2,"2026-11-03 04:31:34","CREATED_QUERY"]