Guide · Agent skill
How to use the Isometric Explainer agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Isometric Explainer skill lets an AI agent turn a process, such as a cache, a queue or a retry loop, into one interactive isometric picture of an invented machine. Each station of the machine stands for one step, and the buttons change a tested state model so the picture, numbers and text always agree. This guide covers what the skill does, how to install it, how to ask for it, what it needs and where to be careful.
Isometric Explainerrohitg00/ai-engineering-from-scratch · MIT Download the skill Quick start
- 1Download the ZIP. Download the isometric-explainer skill ZIP from this page.
- 2Unzip into a skills folder. Unzip it into ~/.claude/skills/ for personal use, or into the project's .claude/skills/ folder.
- 3Or upload it in the Claude apps. Go to Settings → Capabilities → Skills and upload the ZIP.
- 4Check the requirements. Make sure Node.js can run .mjs modules and that you have a headless browser for verification.
- 5Ask with a trigger phrase. Describe a process and use a phrase such as "explain this as a machine".
- 6Try the controls. Open the page and use run, step, break and repair to see how the model responds.
What the skill makes the agent do
The skill builds a single web page. The page shows a solid isometric machine on a bench. Each station of the machine stands for one step of a process: for example, a request card moves on a carriage, a probe drops, and a press stamps the card.
A pure state model decides every move, so the picture, the numbers and the words match. Controls such as run, step, break, repair and reset act on a real simulation run, and the configuration is written to the URL. The output is built from the included starter templates and a geometry library.
- Works best when the process has stations, an order and failure modes.
- The reader can break one part and see what fails.
- The figure is the main content of the page, not a small inline diagram.
Install the skill from the ZIP
Download the ZIP of the skill from this page and unzip it. The skill folder is named isometric-explainer and contains SKILL.md, a templates folder, a kit folder and a references folder.
For a personal install, unzip it into ~/.claude/skills/. For a single project, unzip it into the project's .claude/skills/ folder instead. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
- Personal install: ~/.claude/skills/
- Project install: the project's .claude/skills/ folder
- Claude apps: Settings → Capabilities → Skills, then upload the ZIP
Trigger the skill with natural requests
The skill loads when your request matches its description. The source lists these trigger phrases, and you can use them directly or describe the same idea in your own words.
Name the process and the kind of output you want. The clearer the process, the better the machine the agent can invent.
- "Explain this as a machine"
- "Isometric explainer" or "machine explainer"
- "Interactive isometric figure"
- "Explorable explainer"
- "Show how it works inside"
Examples of good requests
Good requests name a process with stations, order and something that can fail. The agent will first write one sentence that says what moves through what and what that motion means, and it will reject the idea if that sentence cannot be written.
Ask for a page that a reader can run and break. Ask for a figure as the main content of an article or lesson.
- "Explain this cache as a machine: a request card stops under a probe, and a stored copy means a hit."
- "Explain how our retry loop works as an explorable explainer with run, step and break buttons."
- "Show how it works inside: a queue with workers that can fail and be repaired."
What you need before you start
The skill runs scripts. It needs Node.js that can run .mjs modules and the included model tests. The verification step needs a headless browser to take screenshots and check the console for errors.
The skill does not use the network, according to its listing.
- Node.js capable of running .mjs modules and the included model tests
- A headless browser for the verification step (screenshots and console error checks)
- Runs scripts: yes
- Uses network: no
Safety notes on scripts and network
Because the skill runs scripts, read SKILL.md and the templates before you let it run in a project you care about. The listing says it does not use the network, so the page it builds does not need to fetch data from outside.
The skill also forbids faking a real model, service or metric. Any scripted part is labelled "fixed script" in the page copy, and any simulated timing is marked as a simulation.
- Review the scripts in kit/ and templates/ before running them.
- Expect a note that times are fixed costs, not measurements.
- Do not use the figure as evidence of real performance numbers.
Tips for better results
Keep the machine small. The skill counts parts and sets tiers: a figure of 40 to 80 parts needs no approval, a hero of 80 to 150 parts needs no approval, and anything above 150 needs your approval first.
Choose the right tool for the job. If the concept is a small diagram inside a README or lesson, the sibling skill blueprint-figure is the better fit. If there is no order or state change, a static SVG is clearer.
- Keep the part count under 150 unless you approve more.
- Describe the failure modes you want readers to see.
- Check the desktop and phone screenshots the skill produces before you publish.
What people use it for
- Showing a developer how a cache hit and miss flow through stations in a system.
- Building an explorable explainer for a lesson where readers break a retry loop and see what fails.
- Creating an interactive figure as the main content of an article about a queue with workers.
Frequently asked questions
How do I install the isometric explainer agent skill?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder. You can also upload the ZIP in the Claude apps under Settings → Capabilities → Skills.
What does the isometric explainer skill require?
It requires Node.js capable of running .mjs modules and the included model tests. The verification step also needs a headless browser for screenshots and console error checks.
Is the isometric explainer skill free?
The skill is listed under the MIT licence. This page does not state pricing, so check the repository licence file for the terms.
Does the isometric explainer skill use the internet?
According to its listing, it does not use the network. It does run scripts, so review the scripts in kit/ and templates/ before running them.
What should I use instead for a small diagram?
For a small diagram inside a README or lesson, the source recommends the sibling skill blueprint-figure. If the concept has no order or state change, a static SVG is clearer and cheaper to maintain.
Why does the skill refuse some topics?
The skill forbids animating guesses. If no deterministic model of the behaviour can be written, it will not build the figure, because that would mislead readers.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use this skill if you need an interactive, clickable figure that explains a process with stations, order and failures, and you can run Node.js and a headless browser. Pick a static SVG or the blueprint-figure skill for simple concepts or small diagrams, and avoid it for topics you cannot model deterministically.
Download the skill