Skill Anatomy for Claude Code: turning any question into an interactive clickable machine

Skill Anatomy is a free Agent Skill (MIT license) that runs in Claude Code (Anthropic): you ask a question like "how does an espresso machine create pressure?", and Claude builds the answer into a real machine with isometric graphics, buttons for each step, window panes looking into the working parts, and every number on the screen comes from a single calculation model. According to Elvar Sun (@elvar_official, post on X on 18/10/2026, over 313 thousand views on X), this skill was written by wheresryan22, and takes only about 10 minutes to create an interactive espresso machine. This post rewrites that tutorial in Vietnamese, with two videos and a cover image from the original post, and checks the GitHub code repository on 23/10/2026.

Lever espresso machine: runs step by step from grinding to pouring milk, 36 seconds. Video: Elvar Sun, from the original post on X.

Cover of the original post: Claude Code and anatomy skill. Image: Elvar Sun.

What is Skill Anatomy?

Anatomy is an Agent Skill (a directory with a SKILL.md file following the agentskills.io open standard) that helps Claude explain an idea by building it into a working object. According to the README, when you ask Claude to draw a diagram explaining a technical concept, Anatomy makes it invent an object where the way the object operates is the concept itself: for example a master lock that only rotates when all its pins align to illustrate a cache lock.

The wheresryan22/anatomy repository (GitHub, checked 23/10/2026) has about 19,350 stars, MIT license, last updated on 18/10/2026, described as a skill that creates detailed interactive isometric diagrams of machines and complex systems, outputting to SVG with optional WebGL or 3D. It runs in Claude Code and according to the README also runs in Antigravity, OpenCode, Codex and MiniMax Code. If you're not familiar with the concept of skills, see MCP là gì? for a picture of how agents use external tools.

What parts does an "interactive machine" have?

Each diagram is a standalone HTML page, openable in a browser on a computer or tablet, and according to the original post author every diagram has the same six parts. For example on the espresso machine:

1. The machine: a familiar object built from many small details: bolts, gauges, trays, scales under the cup.
2. The buttons: one button per step, in order, only the next button clickable so no one misses the important part. One mode switch: Manual waits for each click, Auto runs in a loop.
3. Window panes: a cross-section into where the work happens; on the espresso machine, the window shows the piston, spring and water inside the group head.
4. The numbers: gauges, screens on the machine and chips below: coffee dose, boiler, brew pressure, grams in cup, brew time, milk temperature; all come from one model of the real machine.
5. Text: a hint for each step at the top, plus onomatopoeia written right on the action like grrrr, tok, psssh, knock.
6. The big idea: one sentence under the diagram, for example "the spring creates pressure".

Same process for many machines: espresso machine, car engine, washing machine, microwave, smoke detector, capsule toy dispenser. Video: Elvar Sun.

What do you need to prepare to use Anatomy?

You need Claude Code, Node.js, Chrome and for the video part at the end you also need ffmpeg and Python 3. According to the original post:

• Claude Code on a Claude plan that includes Claude Code.
• Node.js 22.20 or later (the original post states the skill installer requires this). The skill's README says the skill needs Node 20.10 or later, only uses built-in modules, no npm install needed; follow the higher requirement if the installer says so.
• Google Chrome: the skill auto-checks using a headless browser; the README lists scripts that find Chrome or Chromium in common places on macOS, Linux, Windows, and you set CHROME_PATH if you use a different build.
• ffmpeg and Python 3: only for the video part at the end; Claude Code installs them for you if you ask.

Step 1: Install the skill and choose a question

Install using the skill installer then type /anatomy in Claude Code. The command matches the project README:

npx skills add wheresryan22/anatomy -g -a claude-code

No npm? Clone directly into the skills folder:

git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

The best questions are ones with a moving part and a number. The author suggests five unanswered ones: how a toilet refills after flushing, how bike gears make pedaling easier, how a key opens a lock, how an elevator stops at the right floor, and how compound interest grows when you deposit 100 USD every month. Pick a question you haven't answered yourself.

Step 2: Give Claude the assignment to build a machine

Paste a command into Claude Code and replace everything in square brackets. This is my shortened translation of the author's original command:

/anatomy Someone asked me: "[How does an espresso machine make coffee?]"

Answer with a machine, not a diagram. Build a [real lever espresso machine with a grinder next to it, filter handle, tamper, milk pitcher and cup on a scale], made of many small parts, isometric view, into a standalone HTML page.

The steps are buttons stacked in a left column: [Grind 18 g] [Tamp] [Lock in] [Pull lever] [Release] [Steam milk] [Pour] [Fresh cup]. Only the next step can be pressed. Each button runs that step right on the machine.

Carve out a window into the spot where the real work happens [group head: piston, spring and water inside]. The viewer sees cause and effect at the same time.

Write a small model of the real thing...

The end of the command in the original post asks for a pure calculation model so every number reads from it. The author explains why this approach holds up:

• Model before picture: clock, scale and timer all read from one function so they can't contradict each other. His version self-checks when building: one shot takes 27.0 seconds, first drop at 5.4 seconds, yields 36 g.
• One big idea: if you can't say it in one line then the picture is explaining two things and neither one lands.

According to the author, every other machine of his comes from this same command with new parts in square brackets.

Step 3: Make it understood at a glance

Step 3 is making the machine understood at a glance. The test, per Elvar Sun, is a seven-year-old: a hint a child understands after one read, an adult gets in half a second. The original command to Claude (Anthropic) sets five requirements:

1. Each step gets a short hint on top, simple for a seven-year-old: what's happening and why.
2. Pill-shaped button with a number in a circle; running step lights up, done steps fade.
3. Handwriting-style letters on each action.
4. Speed label when a step runs faster or slower than real time (×4, ×1/20), figured from actual seconds.
5. Two-mode switch: Manual by default (nothing moves until someone presses, next button blinks) and Auto (machine runs on loop), remembers choice between visits.

Example from the post on 10/18/2026: real shot takes 27 seconds but runs in 6.5 seconds so label reads ×4 while the timer still shows 27 seconds; car engine is opposite, 800 rpm at idle, runs slow ×1/20.

Step 4: Create the image style

The author's style command describes a children's book drawn in ink not a technical drawing: navy ink outline thick 1.2 px, flat color with three shades for each hue (top brightest, sides darker), cream paper background #f5f0e5, one bright color for each thing, chrome and brass metal, color swatch below to change the machine's color, and warm gray short hard shadow #ddd4c3 right behind each thing, never blue or purple. Every knob, screen and label must sit on a face nothing covers.

The author says each line here is one fix: first draft had long purple shadows and a timer covered by the group head. Take that as a way to learn: every mistake you see becomes a rule.

Step 5: Make Claude Self-Check Like a Critic

Step 5 is making Claude self-review like a critic before showing it to you. This is a translation of the original command from Elvar Sun's post on 18/10/2026:

Before showing me anything, check like a critic:
1. Take a frame halfway through each step and read each image: details hidden behind other details,
   text overflowing cells, numbers not matching the model.
2. Scan every movement longer than 1 second with 0.1 second intervals and count pixel changes
   each frame. A frame that changes 3 times more than neighboring frames is stuttering: find and fix it.
3. Slow movement must be continuous. Never jump between pre-drawn poses
   in movement longer than one second.
Tell me what you checked and fixed. Show me the screenshot images.

According to Elvar Sun, rule number 2 caught the worst error: in one frame, at one angle alone, the launch lever turned into a giant black disc. A normal frame when the lever moved changed from 900 to 1,400 pixels, but the error frame changed 95,245. After fixing, according to Elvar Sun, he scanned all 612 frames of the lifting movement and no frame jumped anymore. These are the author's numbers, not independently verified, but the method of counting pixel changes between frames is something you can reuse for any animation.

Step 6: Turn Into Video and Add Music

Make the video with three commands in sequence, according to the original post:

1. Make the tour recordable: add window.seek(t) to replay everything from start to time t so any frame can be drawn in any order; when the URL has ?render then the page stops its own clock; draw the cursor going to each button and clicking before the step starts; compress the whole tour to 36 seconds, 0.7 seconds between steps, first click at 0.9 seconds, the main step still slowest.
2. Record: open the page with ?render in headless Chrome, call window.seek() for each frame at 60 fps, size 1500 × 1320, capture each frame then push into ffmpeg as H.264, yuv420p, faststart; then make a composite image every 3 seconds one frame to review.
3. Mix music: ask it to compose in code, don't use copyrighted samples: lo-fi background music 36 seconds at 84 BPM with light electric piano over Fmaj7, Em7, Dm7, Cmaj7 chords, round bass, brush drums after the first beat and vinyl crackle; on top are soft sounds at the exact moment of the image (click each time you press, grinding machine sound, steam, espresso dripping), balance volume -14 LUFS, true peak below -1 dB, mix into video using ffmpeg.

The author explains: screen recording drops frames when movement is slow, but the tour "seeked" always comes out at 60 fps; his version has 2,160 frames, 36 seconds, weighs 4.5 MB.

Build in Batches and Put Up on a Website

When one diagram runs well, Claude Code builds the rest in parallel, each machine one agent. The most important point is to give each agent one separate fact to prove, with real numbers: one agent only taking the order "make a microwave" will draw a box with a disc inside, while the agent given "measure the speed of light with a chocolate bar" must draw standing waves. Example the author gives: microwave measuring the speed of light from two melt points on a chocolate bar 6.12 cm apart. Each agent works in its own folder, doesn't edit shared files and checks screenshot images before reporting back.

When you have two or three diagrams, gather them on one page: homepage has each diagram one card (prettiest image, name and one line saying what question it answers), each diagram one separate page with navigation bar, arrow keys to switch machines, spacebar or Enter to run next step, preview image 1200 × 630 for each page with absolute image path so the card shows up when shared on X, external links open new tabs, then deploy to Vercel. According to the author, the text line under each card is what sells it.

Bonus: add a slider (like coffee dose from 9 to 22 g) and rerun the model when you drag, so viewers can break the machine and see for themselves what each number does.

What are Skill Anatomy's limitations?

The project's README spells out the constraints:

• Not a charting library: no axes, data series or graphs; numbers appear as tables read by model and size, actual quantities of details.
• Only draws machines, tools, equipment: doesn't draw people or precise maps; ideas without mechanisms to build will come out weaker.
• Intentionally slow: one diagram takes a whole long work session: detail list, geometry, checking and close-ups of every joint on both interfaces; the Raptor engine takes a few minutes, while a full 3D trajectory check takes 15 to 20 minutes for 30 parts.
• Effects need WebGL: without WebGL the SVG still reads, and when reduced motion is on all diagrams stand still.
• 3D mode still beta: only proven on one example and one test diagram, not yet on production diagrams.

The original post also mentions the author's view counts (bicycle pump lesson 122,818 views, washing machine 110,691 views) which we haven't verified. The author's visual-learning.app page, as of 23/10/2026, lists 30 machines (the original post said 12 when posted), available to view free to try clicking.

OPCAIOS's experience

OPCAIOS hasn't run a test of Anatomy; this post is based on the original post, the repository's README, and checking the visual-learning.app page. Two points align with how we make images for the blog: diagrams and cover images are also built from code (write HTML then screenshot with headless Chrome), and one lesson worth reusing is the self-check step: have AI take screenshots, read each one and fix it before you see it. If you're interested in code-built video, see more in Making motion graphics with Claude Opus 5.5 and Motion engineering with Claude Opus 5.5.

Frequently asked questions

What is Skill Anatomy by Claude Code?

A free (MIT) Agent Skill that helps Claude turn an answer into an interactive isometric machine with step-by-step buttons, window panes into main parts and numbers taken from a calculation model.

How do I install Anatomy?

Run npx skills add wheresryan22/anatomy -g -a claude-code, or clone the repository into ~/.claude/skills/anatomy, then open Claude Code and type /anatomy with your question. Needs Node.js, Chrome; ffmpeg and Python 3 only for the video part.

Is Anatomy free and which agents can run it?

Free, MIT license, no dependencies to install. Written for Claude Code and by the README also runs on Antigravity, OpenCode, Codex and MiniMax Code; you still need a package to use your own agent.

What kind of content can Anatomy draw?

Machines, tools, equipment and systems with mechanisms to build; not charts, people or precise maps. Ideas without mechanisms will come out weaker.

How do I start using Anatomy for lessons or content?

Should start from a question with moving parts and a number. First, pick a question you can't answer yourself yet, like "how does an elevator stop at the right floor". Next, ask Claude (Anthropic) to build a machine with the /anatomy command following Steps 1 and 2 above. Then, have Claude self-screenshot and check each step like in Step 5, then fix spots where detail is hidden or numbers don't match the model. Finally, only share once you've tried both Manual and Auto mode yourself. By the original post from Elvar Sun (18/10/2026), one espresso machine takes about 10 minutes; OPCAIOS hasn't run a test of Anatomy so hasn't verified this number. Want to learn about applying AI to your work, check OPCAIOS's AI application training course.

Source: Elvar Sun's (@elvar_official) post "How I Turn Any Question Into a Machine You Can Run" on X, x.com/elvar_official/status/2111831136171151589, posted 18/10/2026; video and cover image from the original post by request, owned by the author; this is a Vietnamese rewrite. The wheresryan22/anatomy repository (README, license, limits, install command) and visual-learning.app page checked 23/10/2026. View counts and test numbers in the original post are the author's, not yet verified; OPCAIOS hasn't run a test of Anatomy.