Skip to content
Get packs

Isometric Explainer

Builds an interactive isometric machine page where a tested state model drives each step of a process.

Source Download skill
Repository
rohitg00/ai-engineering-from-scratch
Stars
76,331
Licence
MIT
Files
15 files

What it does

When installed, the agent can turn a process, such as a cache, queue or retry loop, into a single interactive isometric picture of an invented machine. Each station of the machine stands for one step, and buttons like run, step, break and repair change a deterministic model so the picture, numbers and text always agree. The output is a single web page that the agent builds with included starter templates and a geometry library.

Great for

  • Developers who want to explain a system's flow to readers with a clickable, visual figure
  • Designers or educators building explorable explainers for a lesson or article
  • Content creators who need an interactive page as the main content, not a small inline diagram

Skip it if

  • Simple concepts with no order or state change, where a static SVG is clearer and cheaper to maintain
  • Small diagrams inside a README or lesson, which the sibling blueprint-figure skill handles better
  • Topics where no deterministic model of the behaviour can be written, since the skill forbids animating guesses and misleading readers

Try asking

  • “Make an isometric explainer of how a cache with eviction and retry works”
  • “Explain this as a machine: how a message queue moves jobs between workers”
  • “Build an interactive isometric figure showing how a request passes through a pipeline with failure points”
Step-by-step guide: how to use Isometric ExplainerInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 15 original files, the MIT licence and an attribution note.

    isometric-explainer.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip isometric-explainer.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip isometric-explainer.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Start by writing the one-sentence machine statement, as the skill instructs, before asking for any drawing; if it is hard to write, pick a different concept.
  • Ask for the state model and its tests first, then the geometry, so the page's numbers can be checked against the tests.
  • Review the generated scripts in templates/ and kit/ before running the build, since the skill executes Node scripts and a headless browser.

What's inside

  • kit/ink.mjs
  • kit/iso-kit.mjs
  • kit/lathe.mjs
  • kit/tube.mjs
  • references/colour-and-ink.md
  • references/concept.md
  • references/geometry.md
  • references/live.md
  • references/state-model.md
  • references/verify.md
  • SKILL.md
  • templates/build.mjs
  • templates/live.js
  • templates/model.mjs
  • templates/model.test.mjs

Redistributed unmodified from rohitg00/ai-engineering-from-scratch under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.