# Isometric Explainer

Builds an interactive isometric machine page where each station shows one process step.

- Repository: https://github.com/rohitg00/ai-engineering-from-scratch (76237 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-29
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add rohitg00/ai-engineering-from-scratch --skill isometric-explainer -g -a claude-code -y`
Codex: `npx skills add rohitg00/ai-engineering-from-scratch --skill isometric-explainer -g -a codex -y`
Cursor: `npx skills add rohitg00/ai-engineering-from-scratch --skill isometric-explainer -g -a cursor -y`
Gemini CLI: `npx skills add rohitg00/ai-engineering-from-scratch --skill isometric-explainer -g -a gemini-cli -y`

## Description

Builds an interactive isometric machine page. Each station of one invented machine stands for one step of a process. A pure, tested state model drives the motion, the readouts and the copy. The page has controls and a verification loop. Trigger phrases: "isometric explainer", "machine explainer", "explain this as a machine", "interactive isometric figure", "explorable explainer", "show how it works inside".

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Isometric Explainer

This skill makes a single-page interactive figure. The figure is 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. The `templates/` folder holds a working starter, and `kit/` holds the geometry library it uses.

## When to use

- The concept is a process with stations, order and failure modes: a loop, a pipeline, a cache, a queue, a retry policy.
- The reader can break one part and see what fails.
- The figure is the main content of a page.

## When not to use

- A static diagram explains the idea. Make a flat SVG figure instead.
- The concept has no order or state change. Make a static figure instead.
- The figure is a small diagram inside a lesson or a README. Use the sibling skill `blueprint-figure`.
- You cannot write a deterministic model of the behavior. Do not animate a guess.
- The job needs more than 150 parts and the user has not approved the size.

## Method

1. Invent the machine. Write one sentence: "X moves through Y, and that motion means Z." If you cannot write it, pick another machine. See `references/concept.md`.
2. Count the parts on paper before you draw, and pick a tier.

   | Tier | Parts | Approval |
   |---|---|---|
   | Figure | 40 to 80 | not needed |
   | Hero | 80 to 150 | not needed |
   | Larger | more than 150 | get the user's approval first |

The rest: https://github.com/rohitg00/ai-engineering-from-scratch/blob/HEAD/.claude/skills/isometric-explainer/SKILL.md