isometric-explainer

isometric-explainer is a skill for Claude Code, Codex from LaurentiuGabriel/learnscape. It costs 259 tokens per session (1,905 once invoked), scanned A, original, MIT.

An interactive isometric diagram that teaches a complex system as a place, with a vehicle moving through each step. It is built as a standalone website using HTML, 2D canvas, and plain JavaScript.

In plain words
What is it for?
Use it to explain algorithms, mechanisms, or other step-by-step systems through an explorable visual simulation.
Why use it?
It makes an invisible process easier to understand by showing sequence, scale, repetition, and changing values as a journey. The underlying simulation performs the real calculations instead of only showing prepared animation.

Skill for Claude CodeCodex

Part of the learnscape plugin — 1 skill shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/laurentiugabriel/learnscape/isometric-explainer
Any agent
npx skills add LaurentiuGabriel/learnscape --skill isometric-explainer
Clone the repo
git clone --depth 1 https://github.com/LaurentiuGabriel/learnscape

Made for: Claude Code, Codex.

Or install learnscape, the plugin that ships this one along with the rest of its 1 skill.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for isometric-explainer

README.md
[![agentmods](https://agentmods.dev/badge/skills/laurentiugabriel/learnscape/isometric-explainer.svg)](https://agentmods.dev/skills/laurentiugabriel/learnscape/isometric-explainer)
Your own site
<a href="https://agentmods.dev/skills/laurentiugabriel/learnscape/isometric-explainer"><img src="https://agentmods.dev/badge/skills/laurentiugabriel/learnscape/isometric-explainer.svg" alt="Measured on agentmods" height="20"></a>
Per session 259 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 1,905 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00259 $0.01905
Opus 5 $0.00130 $0.00953
Sonnet 5 $0.00052 $0.00381
Haiku 4.5 $0.00026 $0.00191

Measured 4d ago against content hash 095ddbf3f656, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

isometric-explainer scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 4d ago.

The scan reads SKILL.md. This mod also ships 8 executable files (assets/template/js/iso.js, assets/template/js/main.js, assets/template/js/model.js, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/isometric-explainer/SKILL.md · 157 lines

How it starts

The opening of the file, as written. The whole thing — 157 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Isometric explainers

You are building a place that runs a mechanism. A vehicle carries real state along roads; each stop is one step of the real thing; the vehicle stops long enough for the reader to read about the step it just performed.

This works because it turns an invisible process into a journey with geography. The reader gets sequence for free (the road), scale for free (the distance), proportion for free (the size of a building), and repetition for free (a loop in the road is a loop in the algorithm). Nothing here is decoration hung on a lecture — the animation is the explanation.

Read this file, then read references/build-order.md and follow it. The other references are lookups for when you reach the part they cover.

The five rules

Everything else in this skill follows from these. Break one and you get a screen saver with captions.

  1. Compute the real thing. model.js must actually do the work — the real arithmetic, the real algorithm, at reduced scale. Never interpolate between pre-baked results. When the reader drags a slider the numbers must move because the model moved.
  2. The vehicle carries state, not cargo. The bars on its flank are the actual vector. The crates in its bed are the actual byte count. The gauge is the actual budget spent. If you could delete the vehicle's decoration without losing information, it was decoration.
  3. Publish a fidelity ledger. Say exactly what is computed, what is scaled down, what is assumed, and what is faked — in the About modal and the README. Half the educational value is the reader knowing which numbers to trust. See references/fidelity.md.
  4. Pace it for reading, not watching. The first visit to a station stops for as long as its write-up takes to read. Later visits get a beat. The reader never has to pause to keep up. See references/pacing.md.
  5. One canvas, no dependencies. Canvas 2D, plain ES5-style JS in IIFEs, <script> tags in order, no build step, no network calls. It opens from file://, it works offline, it deploys to any static host, and it is still readable in five years.

Read the full file on GitHub · 157 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 4d ago First seen · 157 lines · 259 tokens per session scan A 095ddbf3f656

Subscribe to this mod's changes

isometric-explainer is a skill published in the GitHub repository LaurentiuGabriel/learnscape (111 stars, last pushed 24d ago), licensed MIT. It adds 259 tokens to every session and 1,905 once invoked, about $0.0013 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

Related

Other skills, from other repositories

article-writing

Write articles, guides, blog posts, tutorials, newsletter issues, and other long-form content in a distinctive voice derived from supplied examples or brand guidance. Use when the user wants polished written content longer than a paragraph, especially when voice consistency, structure, and credibility matter.

affaan-m/ECC · 57 tokens

ljg-learn

Deep concept anatomist that deconstructs any concept through 8 exploration dimensions (history, dialectics, phenomenology, linguistics, formalization, existentialism, aesthetics, meta-philosophy) and compresses insights into an epiphany. Use when user asks to explain, dissect, or deeply understand a concept, term, or…

lijigang/ljg-skills · 113 tokens

eli5

Explain research, papers, or technical ideas in plain English with minimal jargon, concrete analogies, and clear takeaways. Use when the user says "ELI5 this", asks for a simple explanation of a paper or research result, wants jargon removed, or asks what something technically dense actually means.

companion-inc/feynman · 63 tokens

code-documenter

Use when adding docstrings, creating API documentation, or building documentation sites. Invoke for OpenAPI/Swagger specs, JSDoc, doc portals, tutorials, user guides.

zebbern/claude-code-guide · 39 tokens

deck-course-module

暖纸背景 + Playfair, 左侧学习目标常驻, 含 MCQ 自测页.

nexu-io/html-anything · 25 tokens

grid-ctf-ops

Operational knowledge for the gridctf scenario including strategy playbook, lessons learned, and resource references. Use when generating, evaluating, coaching, or debugging gridctf strategies.

greyhaven-ai/autocontext · 42 tokens