Anatomydi wheresryan22

Anatomy Skill.

Spiega un'idea tecnica come una macchina che il lettore può capire. Anatomy guida il tuo agente di programmazione attraverso la geometria isometrica in SVG, le metafore fisiche e valori coerenti con le parti in movimento.

SVG isometrico
Spiegazioni tecniche
Figure interattive

Scarica OpenDesign Vedi la guida all'uso

Revisione della fonte · anatomySKILL.md

Attività Illustrazione tecnica Produce • Una figura SVG, una pagina HTML autonoma o componenti React • Una metafora fisica con valori guidati dal modello e interazione opzionale • Evidenze di revisione della geometria e del browser, quando i controlli vengono eseguiti Prima di iniziare Il kit richiede Node.js 20.10+ e Chrome o Chromium per i controlli. La CLI delle skill ha un proprio requisito Node; il README indica 22.20+ per la CLI 1.7.1.

Sintesi editoriale · fonte esaminata 2026-10-12 · non è un esempio generato

01 Cosa fa

Spiegare il sistema con un meccanismo fisico

Anatomy usa un oggetto riconoscibile per spiegare una relazione tecnica. La descrizione qui si basa sulla sua fonte, non su una figura da noi generata.

Flusso di lavoro basato sulla fonteNon è un benchmark di esecuzione

Il metodo di lavoro

Una coda può diventare un meccanismo che trattiene e rilascia oggetti; una soglia può diventare un indicatore con un limite segnato. La parte utile è la corrispondenza: cosa si muove, cosa misura e cosa deve imparare chi guarda. La skill chiede all'agente di stabilire questo modello prima di disegnare le parti.

Il kit incluso costruisce solide forme isometriche con facce ombreggiate e ordine di profondità esplicito. Una figura può essere distribuita come SVG, HTML autonomo o componenti React. Le versioni interattive collegano controlli, movimento e valori allo stesso modello; WebGL opzionale aggiunge effetti come acqua o luce all'interno della scena SVG.

Risultati attesi

Una figura SVG modificabile, una pagina HTML autonoma o componenti React
Una didascalia e, per le figure interattive, controlli e valori guidati dal modello
Controlli sulla geometria e acquisizioni del browser, se eseguiti nell'ambiente di destinazione

Vedi il brief di esempio

Dal brief alla revisione

01
Associa l'idea a un oggetto
Fornisci il comportamento reale e scegli un solo meccanismo che lo spieghi. Definisci cosa significano ogni movimento e ogni valore mostrato prima di aggiungere dettagli decorativi.
02
Pianifica le parti e la camera
Elenca la struttura di supporto, il meccanismo di lavoro e i controlli. Scegli una vista che metta in evidenza la relazione invece di nasconderla dietro l'involucro.
03
Costruisci geometria e comportamento
Usa il kit per le forme solide e l'ordine di profondità. Calcola una sola volta la geometria statica; collega le parti interattive e i valori mostrati allo stesso modello.
04
Esamina la figura nel suo contesto
Esegui i controlli pertinenti su geometria e linee, poi esamina le acquisizioni del browser in entrambi i temi. Un audit riuscito non dimostra che la spiegazione sia accurata o che la composizione sia leggibile.

02 Quando usarla

Quando usarla

Usa Anatomy quando un'analogia fisica rende più facile capire un'idea tecnica. È più specializzata di un generatore generico di diagrammi o illustrazioni.

Quando è adatta

Documentazione che spiega un meccanismoMostra come si comporta una coda, una soglia, un controllo o un componente attraverso un'unica relazione fisica visibile.
Figure tecniche editorialiCrea una figura dettagliata per un articolo di blog o una landing page in cui sia l'oggetto stesso a portare la spiegazione.
Spiegazioni interattivePermetti al lettore di cambiare un parametro e vedere movimento e valori aggiornarsi insieme, tenendo conto di tastiera e movimento ridotto.

Limiti da verificare

Non è uno strumento generico per diagrammi di flussoPer un processo che si spiega meglio con riquadri etichettati e frecce, questo approccio basato su oggetti fisici può aggiungere complessità inutile.
Il 3D è una beta opzionaleLa fonte fissata limita le prove del 3D a un esempio e a una figura di test. Una geometria densa in movimento richiede controlli di prestazioni propri; un risultato fluido non è garantito.
I controlli richiedono un browserNode.js 20.10+ esegue il kit; per i controlli nel browser servono Chrome o Chromium. Installare la skill non fa superare quei controlli né fornisce tutte le dipendenze del progetto.

Cosa portare

Il comportamento da spiegareFornisci stati, soglie o equazioni reali, oltre alle conoscenze già possedute dal pubblico. Indica come ipotetici i valori ipotetici.
Una sola metafora fisicaDescrivi l'oggetto, cosa si muove e cosa significa quel movimento. Condividi riferimenti visivi per finitura o materiali, non per chiedere di copiare una figura esistente.
Output e ambito dell'interazioneScegli SVG, HTML autonomo o componenti React; specifica dimensioni, tema e se servono davvero interazione, WebGL o 3D sperimentale.

03 Decisioni importanti

Decisioni importanti

I valori mostrati condividono il modello del movimento
Un numero è utile solo se riflette lo stesso stato del meccanismo. La skill richiede un modello comune per movimento, didascalia e valori mostrati.
L'ordine di profondità fa parte del disegno
Solidi sovrapposti, tubi e parti in movimento richiedono un ordine coerente dal fronte al retro. L'audit incluso controlla la geometria; le terminazioni delle linee richiedono un controllo separato.
L'interazione ha una versione statica
Il flusso documentato include controllo da tastiera, pausa fuori schermo e movimento ridotto. Se si usa WebGL, la SVG deve restare comprensibile anche senza.

04 Prova un brief mirato

Prova un brief mirato

Il brief di esempio qui sotto non è stato testato. Controlla la configurazione della skill prima di usarlo.

Controlla la configurazione

Il comando qui sotto installa la skill in un progetto e ti permette di scegliere un agente. Controlla il README originale prima di eseguirlo.

Comando di installazione documentato

npx skills add wheresryan22/anatomy

Il kit richiede Node.js 20.10+; il README indica Node.js 22.20+ per la CLI delle skill 1.7.1. I controlli nel browser richiedono Chrome o Chromium. In Claude Code o OpenCode invoca /anatomy; in Codex usa $anatomy.

Parti da un solo meccanismo

Usa un modello piccolo e definito esplicitamente prima di tentare una scena densa. Il brief qui sotto è un esempio non testato, non una figura finita fornita.

Brief di esempio

Usa Anatomy per spiegare una coda limitata come un piccolo meccanismo fisico in una figura HTML autonoma. La coda contiene al massimo 5 elementi: enqueue ne aggiunge uno quando c'è spazio, dequeue ne rimuove uno quando non è vuota, e le operazioni rifiutate lasciano invariato il conteggio. Prima proponi l'oggetto e spiega cosa significa il suo movimento. Usa queste regole ipotetiche, non dati di benchmark inventati. Rendi i controlli accessibili da tastiera e guida conteggio e movimento da un unico modello. Supporta temi chiaro e scuro, un viewport di 390 px e il movimento ridotto. Non aggiungere WebGL né 3D. Mostra il design statico prima di aggiungere l'interazione, poi indica quali controlli su geometria, linee e browser hai effettivamente eseguito.

Verifica la spiegazione e il disegno

Esamina il risultato rispetto al modello e alle evidenze del browser. Registra i controlli che non è stato possibile eseguire.

Il conteggio, il movimento e gli stati vuoto/pieno concordano con le regole della coda indicate.
La figura resta leggibile su uno schermo stretto e senza movimento; i suoi controlli funzionano con la tastiera.
Entrambi i temi e i controlli applicabili su geometria e linee sono stati esaminati; gli eventuali controlli non eseguiti sono indicati.

OpenDesign offre uno spazio di lavoro di design locale per agenti di programmazione. Questa scheda non significa che la skill sia inclusa nel pacchetto né che i suoi strumenti esterni, le credenziali e le dipendenze software siano compresi.

Scarica OpenDesign Leggi la guida rapida

05 Fonte e licenza

Fonte e licenza

Questa pagina descrive la revisione della fonte fissata collegata qui sotto. Il comportamento e i requisiti originali possono cambiare.

Autore della fonte: wheresryan22
Repository: wheresryan22/anatomy
File della skill: SKILL.md
Licenza: MIT
Snapshot esaminato: 2026-10-12 · 689dcf966e63

Sintesi editoriale della fonte

Anatomy combina un metodo di spiegazione con oggetti fisici, un kit SVG isometrico, interazione opzionale e controlli di geometria e browser definiti dalla fonte. Questa è una sintesi editoriale della fonte fissata, non un rapporto di esecuzione.

Sintesi originale di OpenDesign, basata sulla fonte collegata. Le stelle del repository sono un indicatore di popolarità datato, non l'uso della skill né un punteggio di qualità.

06 Domande prima di iniziare

Domande prima di iniziare

Anatomy richiede React?

No. La fonte supporta JavaScript senza framework o TypeScript che produce SVG e HTML, oltre a componenti React e Next.js. Scegli l'output adatto al progetto ospite.

Servono WebGL o il 3D per una figura Anatomy?

No. SVG è l'output principale. WebGL è opzionale per effetti come acqua, fuoco o luce; la geometria 3D rotante è un'opzione beta separata. Richiedi solo le modalità necessarie alla spiegazione.

La skill è la stessa cosa del pacchetto anatomy-figures?

No. Anatomy è la skill di creazione con il suo toolkit. Il pacchetto anatomy-figures, documentato separatamente, fornisce figure già pronte. Installare l'uno non va descritto come installare l'altro.

Anatomy

Rendi visibile un'idea tecnica

Parti dal comportamento reale, scegli una metafora fisica ed esamina la figura nel contesto previsto. Controlla la fonte e la configurazione prima di eseguire la skill.

Scarica OpenDesign Sfoglia le skill di design