Skip to content
Get packs

Anatomy Isometric Figures

Builds detailed isometric SVG explainer figures of physical machines, with optional WebGL effects and A4 PDF export.

Source Download skill
Repository
wheresryan22/anatomy
Stars
23,983
Licence
MIT
Files
6 files

What it does

Once installed, the agent can turn a technical idea into an interactive isometric illustration shaped like a real physical object, such as a test rig, dial gauge, or lock, built from many small parts with shading and calm animation. The output is standalone SVG and HTML code (framework-free or React/Next.js), can include WebGL effects like fire or water, can be printed as an A4 PDF, and can be published to the Anatomy community gallery when asked.

Great for

  • Developers writing docs, blog posts or landing pages who want a polished explanatory diagram
  • Designers wanting a premium technical-drawing style figure in code
  • Teams building interactive explainers for a website in React or Next.js

Skip it if

  • Simple flowcharts or plain labelled diagrams, since the skill is built around detailed physical object metaphors and would be overkill
  • Users who need a finished image without running code, because the output is generated by building scripts
  • Publishing to the public gallery may share your figure externally, so review content before asking for that step

Try asking

  • “Make an interactive isometric SVG of a dial gauge showing how a sensor reading changes”
  • “Create an isometric explainer figure of a pin-tumbler lock for my blog post about caching”
  • “Build a React isometric illustration of a plotter explaining shared GPU context, with a fire shader on the exhaust”
  • “Print the rocket engine figure as an A4 PDF handout”
Step-by-step guide: how to use Anatomy Isometric FiguresInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

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

    anatomy.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

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

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip anatomy.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

  • Open the closest of the eight bundled examples first (for example dial-indicator for a small figure or test-rig for a production-quality one) and ask the agent to follow its structure
  • Run node build.mjs --audit on examples to check geometry before relying on a figure
  • Ask for a light theme with --light if the figure will sit on a white page

What's inside

  • CHANGELOG.md
  • CODE_OF_CONDUCT.md
  • CONTRIBUTING.md
  • README.md
  • SECURITY.md
  • SKILL.md

Redistributed unmodified from wheresryan22/anatomy 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.