Ein Skill, der Maschinen zeichnet.
Du gibst Claude Code ein Objekt oder eine Idee, der Skill baut daraus eine detaillierte isometrische Zeichnung. Sie ist interaktiv: Du kannst sie zerlegen, und sie reagiert auf Maus und Tastatur.
GITHUB REPO
Zeichnungen, die sich zerlegen lassen.
Anatomy ist ein kostenloser Skill für Claude Code (MIT). Er baut detaillierte, interaktive isometrische Zeichnungen von Maschinen und Systemen, die sich zerlegen lassen und auf Maus und Tastatur reagieren. Gedacht für Website, Doku, Blog und Landingpage.
- Anatomy Skill
- Claude Code
- GitHub
- Einsteiger
FEATURES
Was es kann.
Das Beispiel: ein Raptor-2-Triebwerk.
Im README steht ein Raptor-2-Triebwerk im Teststand. Beim Hover zerlegt es sich in 11 Baugruppen.
Auch Bewegung ist dabei.
Weitere Beispiele aus dem README: ein Arcade-Automat, bei dem eine Münze durch die Rutsche in die Kasse rollt, ein Ripple Tank und eine Drehscheibe im 3D-Modus (beta).
Läuft nicht nur in Claude Code.
Laut README läuft der Skill auch in Codex, OpenCode, Antigravity und MiniMax Code.
Kostenlos und ohne Schlüssel.
MIT-Lizenz, kein API-Key, keine Abhängigkeiten außer Node ab 20.10. Für die Checks brauchst du Chrome. 19.425 Sterne auf GitHub (Stand 23.10.2026), das Repo ist seit 08.10.2026 online.
USE CASES
Wofür du es einsetzt.
Etwas erklären, das man sonst nur beschreibt
Ein System oder eine Maschine, die in Text schwer zu fassen ist, wird zu einer Zeichnung, die man aufklappen kann.
Für Website, Doku, Blog oder Landingpage
Der Skill ist laut README für genau diese Orte gedacht. Du sagst Claude, wo die Zeichnung landen soll: HTML, SVG oder React.
INSTALLATION
Dein Setup zum Kopieren.
npx skills add wheresryan22/anatomy -g -a claude-code
/anatomy explain how a token bucket rate limiter works, interactive
SETUP
Schritt für Schritt startklar.
-
Voraussetzungen prüfen
Du brauchst Claude Code und Node ab Version 20.10. Für die Checks des Skills brauchst du außerdem Chrome. Einen API-Key brauchst du nicht.
Geklappt, wenn: Node und Chrome sind auf deinem Rechner installiert.
-
Skill installieren
Führe den Befehl aus dem Installations-Block aus. Danach kennt Claude Code den Befehl /anatomy.
Geklappt, wenn: Der Befehl läuft ohne Fehlermeldung durch.
-
Die erste Zeichnung bestellen
Tippe /anatomy und nenne die Idee, nicht die Zeichnung. Gib echte Zahlen mit, oder nenn das Objekt direkt, und sag, wo die Zeichnung landen soll (HTML, SVG, React). Rechne mit Zeit: Der Skill arbeitet bewusst langsam, eine Figur ist eine lange Session.
Geklappt, wenn: Claude beginnt an der Zeichnung zu arbeiten.
MASTER-PROMPT
Dein Auftrag zum Kopieren.
Du baust mir mit dem Anatomy-Skill eine interaktive Zeichnung, die richtig beeindruckt. Schritt 1, Installation: Prüfe, ob der Skill da ist (~/.claude/skills/anatomy). Wenn nicht, installiere ihn mit: npx skills add wheresryan22/anatomy -g -a claude-code Er braucht Node.js 20.10 oder neuer und für die Checks Chrome oder Chromium. Prüf beides. Schritt 2, frag mich nacheinander und warte jeweils auf meine Antwort: 1. Was soll die Zeichnung erklären? Eine Idee (z. B. wie mein Angebot entsteht, wie ein Cache funktioniert) oder ein konkretes Gerät (z. B. Espressomaschine, Spielautomat, Motor)? 2. Welche echten Zahlen gehören dazu (Größen, Mengen, Zeiten, Grenzwerte)? 3. Was soll sich bewegen oder zerlegen lassen, wenn man mit der Maus drüberfährt oder klickt? 4. Wo landet sie: eigenständige HTML-Seite, einzelne SVG-Datei oder React/Next.js-Komponente? Hell oder dunkel? 5. Braucht es Effekte, die Linien nicht zeichnen können (Feuer, Wasser, Dampf, Licht)? Dann mit WebGL. Schritt 3, schlag mir zwei bis drei echte, physische Objekte vor, deren Funktionsweise genau meine Idee ist, je mit einem Satz, warum es passt. Ich wähle eins. Schritt 4, bau die Figur mit /anatomy nach den Regeln des Skills: viele kleine, präzise Teile, eine Live-Anzeige, ruhige Bewegung, jede angezeigte Zahl kommt aus demselben Modell, das die Teile bewegt. Lass die Prüfungen des Skills laufen und zoom in jede Verbindung. Nimm dir die Zeit, die es braucht, Qualität vor Tempo. Schritt 5, zeig mir am Ende einen Screenshot, sag mir, wie ich die Datei öffne, und schlag eine Verbesserung vor, die die Zeichnung noch eindrucksvoller macht.
/anatomy erkläre mir, wie [IDEE ODER OBJEKT, z. B. ein Token-Bucket-Rate-Limiter] funktioniert, interaktiv. Echte Zahlen: [ZAHLEN, z. B. 100 Tokens Kapazität, 10 Tokens pro Sekunde] Ziel: [HTML, SVG oder React] Nenne die Idee, nicht die Zeichnung. Es darf lange dauern.
MEINE EINSCHÄTZUNG
Wofür es sich lohnt.
Gut geeignet für
- Wer eine Maschine, ein Gerät oder ein System auf Website, Doku oder Blog zeigen will, statt es nur zu beschreiben
- Wer keinen Aufwand mit API-Keys oder Abhängigkeiten will: nur Node ab 20.10
Weniger geeignet für
- Kein Chart-Tool: Für Diagramme und Zahlenreihen ist es der falsche Skill
- Es zeichnet Maschinen und Geräte, keine Menschen und keine exakten Karten
- Bewusst langsam: Eine Figur ist eine lange Session
Zeig die Maschine, statt sie zu erklären.
Kostenloser Skill, ein Befehl zur Installation, Zeichnungen für Website, Doku, Blog und Landingpage.
FAQ
Häufige Fragen.
Was kostet Anatomy?
Der Skill ist kostenlos (MIT). Du brauchst keinen API-Key, nur Node ab 20.10 und für die Checks Chrome.
Läuft das nur in Claude Code?
Nein. Laut README läuft der Skill auch in Codex, OpenCode, Antigravity und MiniMax Code.
Kann ich damit Diagramme oder Charts bauen?
Nein, es ist kein Chart-Tool. Der Skill zeichnet Maschinen und Geräte, keine Menschen und keine exakten Karten.
