Anatomyvon wheresryan22

Anatomy Skill.

Erklären Sie eine technische Idee als Maschine, die Leserinnen und Leser verstehen können. Anatomy führt Ihren Coding-Agenten durch isometrische SVG-Geometrie, physische Metaphern und Anzeigen, die mit den beweglichen Teilen übereinstimmen.

Isometrisches SVG
Technische Erklärungen
Interaktive Abbildungen

OpenDesign herunterladen Nutzungsanleitung ansehen

Quellenprüfung · anatomySKILL.md

Aufgabe Technische Illustration Ergebnis • Eine SVG-Abbildung, eine eigenständige HTML-Seite oder React-Komponenten • Eine physische Metapher mit modellgesteuerten Werten und optionaler Interaktion • Nachweise aus Geometrie- und Browserprüfungen, wenn die Prüfungen ausgeführt werden Bevor Sie beginnen Das Kit benötigt Node.js 20.10+ sowie Chrome oder Chromium für die Prüfungen. Die Skills-CLI hat eine eigene Node-Anforderung; die README nennt 22.20+ für CLI 1.7.1.

Redaktionelle Zusammenfassung · Quelle geprüft 2026-10-12 · kein generiertes Beispiel

01 Was er leistet

Das System durch einen physischen Mechanismus erklären

Anatomy nutzt ein vertrautes Objekt, um eine technische Beziehung zu erklären. Die Beschreibung hier beruht auf der Quelle, nicht auf einer von uns erzeugten Abbildung.

Quellenbasierter WorkflowKein Ausführungs-Benchmark

Die Arbeitsweise

Eine Warteschlange kann zu einem Mechanismus werden, der Objekte hält und freigibt; ein Schwellenwert zu einer Anzeige mit markierter Grenze. Entscheidend ist die Zuordnung: was sich bewegt, was es misst und was die Betrachter lernen sollen. Der Skill lässt den Agenten dieses Modell festlegen, bevor die Teile gezeichnet werden.

Das enthaltene Kit baut feste isometrische Formen mit schattierten Flächen und expliziter Tiefenreihenfolge. Eine Abbildung kann als SVG, eigenständiges HTML oder als React-Komponenten ausgeliefert werden. Interaktive Versionen verbinden Steuerelemente, Bewegung und Anzeigen mit demselben Modell; optional ergänzt WebGL Effekte wie Wasser oder Licht innerhalb der SVG-Szene.

Erwartete Ergebnisse

Eine bearbeitbare SVG-Abbildung, eine eigenständige HTML-Seite oder React-Komponenten
Eine Bildunterschrift und, bei interaktiven Abbildungen, Steuerelemente und modellgesteuerte Anzeigen
Geometrieprüfungen und Browser-Aufnahmen, sofern sie in der Zielumgebung ausgeführt werden

Beispiel-Brief ansehen

Vom Brief zur Prüfung

01
Die Idee einem Objekt zuordnen
Liefern Sie das tatsächliche Verhalten und wählen Sie einen Mechanismus, der es erklärt. Legen Sie fest, was jede Bewegung und jede Anzeige bedeutet, bevor Sie dekorative Details hinzufügen.
02
Teile und Kamera planen
Listen Sie Tragstruktur, Arbeitsmechanismus und Steuerelemente auf. Wählen Sie eine Ansicht, die die Beziehung sichtbar macht, statt sie hinter dem Gehäuse zu verbergen.
03
Geometrie und Verhalten aufbauen
Nutzen Sie das Kit für feste Formen und Tiefenreihenfolge. Berechnen Sie statische Geometrie einmal; verbinden Sie interaktive Teile und angezeigte Werte mit demselben Modell.
04
Die Abbildung im Kontext prüfen
Führen Sie die relevanten Geometrie- und Linienprüfungen aus und prüfen Sie dann Browser-Aufnahmen in beiden Themes. Ein erfolgreiches Audit belegt weder, dass die Erklärung korrekt ist, noch dass die Komposition lesbar ist.

02 Wann er sich eignet

Wann er sich eignet

Verwenden Sie Anatomy, wenn eine physische Analogie eine technische Idee leichter verständlich macht. Der Skill ist spezialisierter als ein allgemeiner Diagramm- oder Illustrationsgenerator.

Gut geeignet

Dokumentation, die einen Mechanismus erklärtZeigen Sie anhand einer sichtbaren physischen Beziehung, wie sich eine Warteschlange, ein Schwellenwert, ein Steuerelement oder eine Komponente verhält.
Redaktionelle technische AbbildungenErstellen Sie eine detaillierte Abbildung für einen Blogbeitrag oder eine Landingpage, in der das Objekt selbst die Erklärung trägt.
Interaktive ErklärungenLassen Sie Leser einen Parameter ändern und Bewegung und Werte gemeinsam aktualisiert sehen, unter Berücksichtigung von Tastaturbedienung und reduzierter Bewegung.

Zu prüfende Grenzen

Kein allgemeines Flussdiagramm-WerkzeugFür einen Prozess, der sich am besten mit beschrifteten Kästen und Pfeilen erklären lässt, kann dieser Ansatz mit physischen Objekten unnötige Komplexität hinzufügen.
3D ist eine optionale BetaDie festgelegte Quelle beschränkt ihre 3D-Belege auf ein Beispiel und eine Testabbildung. Dichte bewegte Geometrie braucht eigene Performance-Prüfungen; ein flüssiges Ergebnis ist nicht garantiert.
Prüfungen benötigen einen BrowserNode.js 20.10+ führt das Kit aus; für Browserprüfungen wird Chrome oder Chromium benötigt. Die Installation des Skills lässt diese Prüfungen weder bestehen noch liefert sie alle Abhängigkeiten des Projekts.

Diese Eingaben mitbringen

Das zu erklärende VerhaltenNennen Sie die tatsächlichen Zustände, Schwellenwerte oder Gleichungen sowie das Vorwissen des Publikums. Kennzeichnen Sie hypothetische Werte als hypothetisch.
Eine physische MetapherBeschreiben Sie das Objekt, was sich bewegt und was diese Bewegung bedeutet. Teilen Sie visuelle Referenzen für Oberfläche oder Materialien, nicht als Aufforderung, eine bestehende Abbildung zu kopieren.
Umfang von Ausgabe und InteraktionWählen Sie SVG, eigenständiges HTML oder React-Komponenten; legen Sie Größe und Theme fest und ob Interaktion, WebGL oder experimentelles 3D tatsächlich nötig ist.

03 Entscheidende Punkte

Entscheidende Punkte

Anzeigen teilen sich das Bewegungsmodell
Eine Zahl ist nur nützlich, wenn sie denselben Zustand wie der Mechanismus widerspiegelt. Der Skill verlangt ein gemeinsames Modell für Bewegung, Bildunterschrift und angezeigte Werte.
Die Tiefenreihenfolge gehört zur Zeichnung
Überlappende Körper, Rohre und bewegte Teile brauchen eine konsistente Reihenfolge von vorne nach hinten. Das enthaltene Audit prüft die Geometrie; Linienenden erfordern eine separate Prüfung.
Interaktion hat eine statische Fassung
Der dokumentierte Workflow umfasst Tastatursteuerung, Pausieren außerhalb des sichtbaren Bereichs und reduzierte Bewegung. Wenn WebGL verwendet wird, sollte die SVG auch ohne verständlich bleiben.

04 Einen fokussierten Brief ausprobieren

Einen fokussierten Brief ausprobieren

Der folgende Beispiel-Brief wurde nicht getestet. Prüfen Sie die Einrichtung des Skills, bevor Sie ihn verwenden.

Einrichtung prüfen

Der folgende Befehl installiert den Skill in ein Projekt und lässt Sie einen Agenten auswählen. Prüfen Sie die Upstream-README, bevor Sie ihn ausführen.

Dokumentierter Installationsbefehl

npx skills add wheresryan22/anatomy

Das Kit benötigt Node.js 20.10+; die README nennt Node.js 22.20+ für die Skills-CLI 1.7.1. Browserprüfungen erfordern Chrome oder Chromium. In Claude Code oder OpenCode rufen Sie /anatomy auf; in Codex verwenden Sie $anatomy.

Mit einem Mechanismus beginnen

Verwenden Sie ein kleines, klar definiertes Modell, bevor Sie eine dichte Szene versuchen. Der folgende Brief ist ein ungetestetes Beispiel, keine mitgelieferte fertige Abbildung.

Beispiel-Brief

Verwende Anatomy, um eine begrenzte Warteschlange als kleinen physischen Mechanismus in einer eigenständigen HTML-Abbildung zu erklären. Die Warteschlange fasst höchstens 5 Elemente: Enqueue fügt eines hinzu, wenn Platz ist, Dequeue entfernt eines, wenn sie nicht leer ist, und abgelehnte Operationen lassen die Anzahl unverändert. Schlage zuerst das Objekt vor und erkläre, was seine Bewegung bedeutet. Verwende diese hypothetischen Regeln, keine erfundenen Benchmark-Daten. Mache die Steuerelemente per Tastatur bedienbar und steuere Anzahl und Bewegung aus einem Modell. Unterstütze helle und dunkle Themes, einen Viewport von 390 px und reduzierte Bewegung. Füge weder WebGL noch 3D hinzu. Zeige zuerst das statische Design, bevor du Interaktion ergänzt, und berichte dann, welche Geometrie-, Linien- und Browserprüfungen du tatsächlich ausgeführt hast.

Erklärung und Zeichnung prüfen

Prüfen Sie das Ergebnis anhand des Modells und der Browser-Nachweise. Halten Sie Prüfungen fest, die nicht ausgeführt werden konnten.

Anzahl, Bewegung und die Zustände „leer“ und „voll“ stimmen mit den genannten Warteschlangenregeln überein.
Die Abbildung bleibt auf einem schmalen Bildschirm und ohne Bewegung lesbar; ihre Steuerelemente funktionieren mit der Tastatur.
Beide Themes sowie zutreffende Geometrie- und Linienprüfungen wurden geprüft; nicht ausgeführte Prüfungen sind benannt.

OpenDesign bietet einen lokalen Design-Arbeitsbereich für Coding-Agenten. Dieser Eintrag bedeutet nicht, dass der Skill mitgeliefert wird oder dass seine externen Werkzeuge, Zugangsdaten und Software-Abhängigkeiten enthalten sind.

OpenDesign herunterladen Schnellstart lesen

05 Quelle und Lizenz

Quelle und Lizenz

Diese Seite beschreibt die unten verlinkte, festgelegte Quellversion. Verhalten und Anforderungen im Upstream können sich ändern.

Quellen-Eigentümer: wheresryan22
Repository: wheresryan22/anatomy
Skill-Datei: SKILL.md
Lizenz: MIT
Geprüfter Stand: 2026-10-12 · 689dcf966e63

Redaktionelle Zusammenfassung der Quelle

Anatomy verbindet eine Erklärmethode mit physischen Objekten, ein isometrisches SVG-Kit, optionale Interaktion und in der Quelle definierte Geometrie- und Browserprüfungen. Dies ist eine redaktionelle Zusammenfassung der festgelegten Quelle, kein Ausführungsbericht.

Originalzusammenfassung von OpenDesign auf Grundlage der verlinkten Quelle. Repository-Sterne sind ein datiertes Beliebtheitssignal, weder Skill-Nutzung noch Qualitätswert.

06 Fragen vor dem Start

Fragen vor dem Start

Benötigt Anatomy React?

Nein. Die Quelle unterstützt frameworkfreies JavaScript oder TypeScript, das SVG und HTML erzeugt, sowie React- und Next.js-Komponenten. Wählen Sie die Ausgabe, die zum Host-Projekt passt.

Brauche ich WebGL oder 3D für eine Anatomy-Abbildung?

Nein. SVG ist die Kernausgabe. WebGL ist optional für Effekte wie Wasser, Feuer oder Licht; rotierende 3D-Geometrie ist eine separate Beta-Option. Fordern Sie nur die Modi an, die die Erklärung braucht.

Ist der Skill dasselbe wie das Paket anatomy-figures?

Nein. Anatomy ist der Authoring-Skill samt Toolkit. Das separat dokumentierte Paket anatomy-figures liefert vorgefertigte Abbildungen. Die Installation des einen sollte nicht als Installation des anderen beschrieben werden.

Anatomy

Eine technische Idee sichtbar machen

Beginnen Sie mit dem tatsächlichen Verhalten, wählen Sie eine physische Metapher und prüfen Sie die Abbildung in ihrem vorgesehenen Umfeld. Prüfen Sie Quelle und Einrichtung, bevor Sie den Skill ausführen.

OpenDesign herunterladen Design-Skills durchstöbern