Skip to content
Get packs

Guide · Agent skill

How to use the Anatomy Isometric Figures agent skill

Updated · written with AI from the project's own documentation and checked against our catalogue data

Anatomy is an agent skill that teaches a coding agent to draw technical ideas as crafted isometric SVG figures of real physical objects, such as a test rig, a dial gauge or a lock. This guide explains what the skill makes the agent do, how to install it, how to ask for a figure in plain language, and what to watch for. By the end you will have the skill running and know what a good request looks like.

Anatomy Isometric Figureswheresryan22/anatomy · MIT

Quick start

  1. 1Download and unzip the skill. Download the ZIP from the skill's page and unzip it. Keep the anatomy folder intact.
  2. 2Place it where your agent looks. Move the folder into ~/.claude/skills/ for all projects, or into a project's .claude/skills/ folder. In the Claude apps, upload it under Settings → Capabilities → Skills instead.
  3. 3Install Node.js 20.10 or later. Confirm your Node.js version meets the minimum before running any build script.
  4. 4Ask for a figure in plain words. Describe the idea, the machine you want it shown as, and where it will appear, such as docs or a landing page.
  5. 5Build and review the output. Run the build script for a framework-free example or let the agent produce React/Next.js code, then open the result and check it at zoom.
  6. 6Print or publish if needed. Print an A4 PDF for a poster or handout. Publish to the community gallery only after reviewing the content.

What the skill makes the agent do

Anatomy tells the agent to explain a technical idea by building a physical machine that works the way the idea works. Instead of boxes, arrows and labels, the figure is made of many small solid parts with four-tone shading, correct painter's order, a framed card with a title, hint and live readout, and calm eased motion.

The output is standalone SVG and HTML code. It works framework-free in TypeScript or JavaScript, and in React or Next.js. The skill can also add WebGL shader effects such as fire, exhaust, water, caustics and lamp light, drawn in the same isometric perspective.

  • Interactive isometric SVG figures for docs, blog posts, landing pages and articles
  • Framework-free output (TypeScript/JS writing SVG and HTML) or React/Next.js components
  • Optional WebGL effects that sit inside the drawing
  • Printing a figure as an A4 PDF as a poster, drawing or handout
  • Publishing to the Anatomy community gallery when you ask for it

Install the skill with a ZIP download or the Claude apps

Download the ZIP from the skill's page on this directory and unzip it. For Claude Code, place the unzipped anatomy folder in ~/.claude/skills/ to make it available to all your projects, or in a project's .claude/skills/ folder to limit it to that project.

If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.

  • Personal install: unzip into ~/.claude/skills/
  • Project install: unzip into the project's .claude/skills/
  • Claude apps: Settings → Capabilities → Skills

Check the requirements before you start

The skill needs Node.js 20.10 or later. Chrome or Chromium is needed for the browser checks. It runs with Claude Code or a compatible agent: Antigravity, OpenCode, Codex or MiniMax Code.

The skill's own scripts use only Node's built-in modules, so there is nothing else to install for the build scripts. The skill runs scripts and does not use the network.

  • Node.js 20.10 or later
  • Google Chrome or Chromium for the checks (set CHROME_PATH if it is not found automatically)
  • Claude Code or a compatible agent

Trigger the skill with natural requests

You do not need to say the skill's name or the word isometric. The skill is written to activate when someone wants an explanatory diagram or figure, a Linear-style or premium technical drawing, an interactive explainer, or an SVG that shows how a system, algorithm or component works.

Describe the idea and the place the figure will appear. Naming a real object helps, because the skill builds its figure around one.

  • "Make an isometric figure showing how a connection pool recycles connections for my docs."
  • "I need an interactive explainer for our landing page showing how a cache key decides when to skip work."
  • "Draw a premium technical-style SVG of a dial gauge reading a value, for a blog post."
  • "Turn this algorithm into a figure in React that I can drop into a Next.js page."
  • "Print the figure we just made as an A4 poster."

Understand what good output looks like

The skill's examples show the intended quality. The figure should read as one clear machine at normal size and still hold real parts when zoomed to 4×. Each part should sit on another part, end on an edge, or fade out rather than stop abruptly.

Ask the agent to open the closest example first if you want to see the target standard. The skill ships eight examples, including a small dial-indicator build of about 300 lines and a production test-rig figure from a real React/Next site.

  • dial-indicator: the smallest example, a dial gauge on a stand
  • desk-computer: framework-free SVG with a keyboard you can type on
  • test-rig: a production figure in React/Next
  • ripple-tank: two WebGL layers registered to the isometric planes
node examples/dial-indicator/build.mjs

Build, print and publish

Each framework-free example is built with a Node script that writes a standalone HTML page next to the script. Add --light for the light theme. The skill can also print a figure to an A4 PDF in poster, drawing or detailed formats.

Publishing to the Anatomy community gallery happens only when you ask for it. Review the figure first, because publishing may share it externally.

  • Build a framework-free example with the build script shown above
  • Add --light to the build command for the light theme
  • Print in poster, drawing or detailed formats
  • Review content before asking for gallery publishing
node examples/<name>/build.mjs --light

Know the safety notes

The skill runs scripts, so read what it runs before you trust it in sensitive projects. It does not use the network. Publishing to the public gallery is the one step that can share your figure beyond your machine, so it should always be a deliberate choice.

The skill is MIT licensed, and the project includes SECURITY.md and CONTRIBUTING.md files for reporting issues and contributing.

  • Scripts run locally with Node.js
  • No network use is listed for the skill
  • Gallery publishing may share your figure externally, so review it first

What people use it for

  • Explaining a system's behaviour in developer documentation with an interactive figure
  • Adding a premium-looking technical illustration to a blog post or article
  • Building a React or Next.js explainer that shows how a component works on a landing page
  • Printing a figure as an A4 poster or handout for a workshop or classroom
  • Creating a WebGL-enhanced figure such as a lamp-lit water tank for a physics lesson

Frequently asked questions

Is the Anatomy agent skill free?

The skill is released under the MIT licence, as stated in its metadata and SKILL.md. Check the skill's page on this directory for the current download details.

What do I need to install the anatomy skill?

You need Node.js 20.10 or later, and Chrome or Chromium for the browser checks. You also need Claude Code or a compatible agent such as Antigravity, OpenCode, Codex or MiniMax Code.

Where do I put the anatomy skill folder?

For Claude Code, unzip it into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder for one project. In the Claude apps you can upload it under Settings → Capabilities → Skills.

Does the anatomy skill use the internet?

The skill's listing says it does not use the network. It does run scripts, so review what they do before using it in sensitive work.

Is this skill a good alternative to a plain flowchart tool?

Not for simple flowcharts or plain labelled diagrams. The skill is built around detailed physical object metaphors and would be overkill for those. Use it when you want a polished, object-based explanatory figure.

Can I get a finished image without running code?

Not directly. The output is generated by building scripts, so you need to run code to produce the figure. Plan for that step if you only want a finished image.

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

Anatomy suits developers writing docs, blog posts or landing pages who want a polished, object-based explanatory figure, and designers who want a premium technical-drawing style in code. Teams building interactive explainers in React or Next.js will also get value from it. If you only need a simple flowchart, a plain labelled diagram, or a finished image without running code, pick a simpler tool.

Download the skill