Anatomypar wheresryan22

Anatomy Skill.

Expliquez une idée technique comme une machine que le lecteur peut comprendre. Anatomy guide votre agent de code à travers la géométrie isométrique SVG, les métaphores physiques et des affichages cohérents avec les pièces en mouvement.

SVG isométrique
Explications techniques
Figures interactives

Télécharger OpenDesign Voir le guide d’utilisation

Revue de la source · anatomySKILL.md

Tâche Illustration technique Produit • Une figure SVG, une page HTML autonome ou des composants React • Une métaphore physique avec des valeurs pilotées par un modèle et une interaction facultative • Des preuves de géométrie et de revue dans le navigateur lorsque les vérifications sont exécutées Avant de commencer Le kit requiert Node.js 20.10+ ainsi que Chrome ou Chromium pour les vérifications. La CLI skills a sa propre exigence Node ; le README indique 22.20+ pour la CLI 1.7.1.

Résumé éditorial · source examinée 2026-10-12 · pas un exemple généré

01 Ce qu’il fait

Expliquer le système par un mécanisme physique

Anatomy utilise un objet reconnaissable pour expliquer une relation technique. Cette description repose sur sa source, et non sur une figure que nous aurions générée.

Flux de travail issu de la sourcePas un benchmark d’exécution

L’approche de travail

Une file d’attente peut devenir un mécanisme qui retient et libère des objets ; un seuil peut devenir une jauge avec une limite marquée. L’essentiel est la correspondance : ce qui bouge, ce que cela mesure et ce que le spectateur doit comprendre. Le skill demande à l’agent d’établir ce modèle avant de dessiner les pièces.

Le kit inclus construit des formes isométriques solides avec des faces ombrées et un ordre de profondeur explicite. Une figure peut être livrée en SVG, en HTML autonome ou en composants React. Les versions interactives relient commandes, mouvement et affichages au même modèle ; WebGL facultatif ajoute des effets comme l’eau ou la lumière dans la scène SVG.

Livrables attendus

Une figure SVG modifiable, une page HTML autonome ou des composants React
Une légende et, pour les figures interactives, des commandes et des affichages pilotés par le modèle
Des vérifications de géométrie et des captures du navigateur, lorsqu’elles sont exécutées dans l’environnement cible

Voir l’exemple de brief

Du brief à la revue

01
Associer l’idée à un objet
Fournissez le comportement réel et choisissez un mécanisme qui l’explique. Définissez ce que signifient chaque mouvement et chaque affichage avant d’ajouter des détails décoratifs.
02
Planifier les pièces et la caméra
Listez la structure porteuse, le mécanisme en fonctionnement et les commandes. Choisissez un point de vue qui révèle la relation au lieu de la cacher derrière l’enveloppe.
03
Construire la géométrie et le comportement
Utilisez le kit pour les formes solides et l’ordre de profondeur. Calculez une seule fois la géométrie statique ; reliez les pièces interactives et les valeurs affichées au même modèle.
04
Examiner la figure en contexte
Exécutez les vérifications pertinentes de géométrie et de lignes, puis examinez les captures du navigateur dans les deux thèmes. Un audit réussi ne prouve ni que l’explication est exacte ni que la composition est lisible.

02 Quand l’utiliser

Quand l’utiliser

Utilisez Anatomy lorsqu’une analogie physique facilite la compréhension d’une idée technique. Il est plus spécialisé qu’un générateur général de diagrammes ou d’illustrations.

Bien adapté

Documentation qui explique un mécanismeMontrez le comportement d’une file d’attente, d’un seuil, d’une commande ou d’un composant à travers une seule relation physique visible.
Figures techniques éditorialesCréez une figure détaillée pour un article de blog ou une page d’accueil où l’objet lui-même porte l’explication.
Explications interactivesLaissez le lecteur modifier un paramètre et voir le mouvement et les valeurs se mettre à jour ensemble, en tenant compte du clavier et de la réduction des animations.

Limites à vérifier

Pas un outil général d’organigrammesPour un processus mieux expliqué par des boîtes étiquetées et des flèches, cette approche par objet physique peut ajouter une complexité inutile.
La 3D est une bêta facultativeLa source épinglée limite ses preuves en 3D à un exemple et à une figure de test. Une géométrie dense en mouvement exige ses propres vérifications de performance ; un rendu fluide n’est pas garanti.
Les vérifications nécessitent un navigateurNode.js 20.10+ exécute le kit ; Chrome ou Chromium est nécessaire pour les vérifications dans le navigateur. Installer le skill ne fait pas réussir ces vérifications et ne fournit pas toutes les dépendances du projet.

Apportez ces éléments

Le comportement à expliquerFournissez les états, seuils ou équations réels, ainsi que les connaissances préalables du public. Indiquez clairement les valeurs hypothétiques comme telles.
Une métaphore physiqueDécrivez l’objet, ce qui bouge et ce que ce mouvement signifie. Partagez des références visuelles pour la finition ou les matériaux, et non pour demander de copier une figure existante.
Un périmètre de sortie et d’interactionChoisissez SVG, HTML autonome ou composants React ; précisez la taille, le thème et si l’interaction, WebGL ou la 3D expérimentale sont réellement nécessaires.

03 Les décisions qui comptent

Les décisions qui comptent

Les affichages partagent le modèle de mouvement
Un nombre n’est utile que s’il reflète le même état que le mécanisme. Le skill demande un modèle commun pour le mouvement, la légende et les valeurs affichées.
L’ordre de profondeur fait partie du dessin
Les solides, tuyaux et pièces mobiles qui se chevauchent ont besoin d’un ordre cohérent de l’avant vers l’arrière. L’audit inclus vérifie la géométrie ; les terminaisons de ligne exigent une vérification distincte.
L’interaction a une version fixe
Le flux documenté inclut le contrôle au clavier, la mise en pause hors écran et la réduction des animations. Si WebGL est utilisé, le SVG doit rester compréhensible sans lui.

04 Essayer un brief ciblé

Essayer un brief ciblé

L’exemple de brief ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

La commande ci-dessous installe le skill dans un projet et vous permet de choisir un agent. Consultez le README amont avant de l’exécuter.

Commande d’installation documentée

npx skills add wheresryan22/anatomy

Le kit nécessite Node.js 20.10+ ; le README indique Node.js 22.20+ pour la CLI skills 1.7.1. Les vérifications dans le navigateur requièrent Chrome ou Chromium. Dans Claude Code ou OpenCode, invoquez /anatomy ; dans Codex, utilisez $anatomy.

Commencer par un seul mécanisme

Utilisez un petit modèle explicitement défini avant de tenter une scène dense. Le brief ci-dessous est un exemple non testé, et non une figure finie fournie.

Exemple de brief

Utilisez Anatomy pour expliquer une file d’attente bornée sous la forme d’un petit mécanisme physique dans une figure HTML autonome. La file contient au plus 5 éléments : enqueue en ajoute un s’il y a de la place, dequeue en retire un si elle n’est pas vide, et les opérations rejetées laissent le nombre inchangé. Proposez d’abord l’objet et expliquez ce que signifie son mouvement. Utilisez ces règles hypothétiques, et non des données de benchmark inventées. Rendez les commandes accessibles au clavier et pilotez le nombre et le mouvement à partir d’un seul modèle. Prenez en charge les thèmes clair et sombre, une fenêtre de 390 px et la réduction des animations. N’ajoutez ni WebGL ni 3D. Présentez d’abord le design statique avant d’ajouter l’interaction, puis indiquez quelles vérifications de géométrie, de lignes et de navigateur vous avez réellement exécutées.

Vérifier l’explication et le dessin

Comparez le résultat avec le modèle et les preuves issues du navigateur. Consignez les vérifications qui n’ont pas pu être exécutées.

Le nombre, le mouvement et les états vide/plein sont conformes aux règles de file d’attente énoncées.
La figure reste lisible sur un écran étroit et sans mouvement ; ses commandes fonctionnent au clavier.
Les deux thèmes et les vérifications de géométrie et de lignes applicables sont examinés ; toute vérification non exécutée est mentionnée.

OpenDesign fournit un espace de conception local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec le produit, ni que ses outils externes, identifiants et dépendances logicielles sont inclus.

Télécharger OpenDesign Lire le guide de démarrage rapide

05 Source et licence

Source et licence

Cette page décrit la révision de source épinglée liée ci-dessous. Le comportement et les prérequis en amont peuvent changer.

Propriétaire de la source: wheresryan22
Dépôt: wheresryan22/anatomy
Fichier du skill: SKILL.md
Licence: MIT
Instantané examiné: 2026-10-12 · 689dcf966e63

Résumé éditorial de la source

Anatomy associe une méthode d’explication par objet physique à un kit isométrique SVG, une interaction facultative et des vérifications de géométrie et de navigateur définies par la source. Il s’agit d’un résumé éditorial de la source épinglée, non d’un rapport d’exécution.

Résumé original de OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un indicateur de popularité daté, non une mesure d’utilisation du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

Anatomy nécessite-t-il React ?

Non. La source prend en charge JavaScript ou TypeScript sans framework, qui produit SVG et HTML, ainsi que des composants React et Next.js. Choisissez la sortie adaptée au projet hôte.

Ai-je besoin de WebGL ou de 3D pour une figure Anatomy ?

Non. SVG est la sortie principale. WebGL est facultatif pour des effets comme l’eau, le feu ou la lumière ; la géométrie 3D en rotation est une option bêta distincte. Ne demandez que les modes dont l’explication a besoin.

Le skill est-il identique au paquet anatomy-figures ?

Non. Anatomy est le skill de création et son kit d’outils. Le paquet anatomy-figures, documenté séparément, fournit des figures prêtes à l’emploi. Installer l’un ne doit pas être présenté comme installer l’autre.

Anatomy

Rendre visible une idée technique

Partez du comportement réel, choisissez une métaphore physique et examinez la figure dans son contexte prévu. Consultez la source et la configuration avant d’exécuter le skill.

Télécharger OpenDesign Parcourir les skills de design