Anatomypor wheresryan22

Anatomy Skill.

Explica una idea técnica como una máquina que el lector pueda entender. Anatomy guía a tu agente de programación a través de geometría isométrica en SVG, metáforas físicas y lecturas que concuerdan con las piezas en movimiento.

SVG isométrico
Explicaciones técnicas
Figuras interactivas

Descargar OpenDesign Ver guía de uso

Revisión de la fuente · anatomySKILL.md

Tarea Ilustración técnica Produce • Una figura SVG, una página HTML independiente o componentes de React • Una metáfora física con valores basados en un modelo e interacción opcional • Evidencia de revisión de geometría y de navegador cuando se ejecutan las comprobaciones Antes de empezar El kit requiere Node.js 20.10+ y Chrome o Chromium para las comprobaciones. La CLI de skills tiene su propio requisito de Node; el README indica 22.20+ para la CLI 1.7.1.

Resumen editorial · fuente revisada 2026-10-12 · no es un ejemplo generado

01 Qué hace

Explica el sistema mediante un mecanismo físico

Anatomy usa un objeto reconocible para explicar una relación técnica. La descripción de esta página se basa en su fuente, no en una figura que hayamos generado.

Flujo de trabajo basado en la fuenteNo es una prueba de ejecución

El enfoque de trabajo

Una cola puede convertirse en un mecanismo que retiene y libera objetos; un umbral puede convertirse en un indicador con un límite marcado. Lo útil es la correspondencia: qué se mueve, qué mide y qué debe aprender quien lo ve. La habilidad pide al agente que establezca ese modelo antes de dibujar las piezas.

El kit incluido construye formas isométricas sólidas con caras sombreadas y un orden de profundidad explícito. Una figura puede entregarse como SVG, HTML independiente o componentes de React. Las versiones interactivas conectan controles, movimiento y lecturas con el mismo modelo; WebGL opcional añade efectos como agua o luz dentro de la escena SVG.

Entregables esperados

Una figura SVG editable, una página HTML independiente o componentes de React
Un pie de figura y, en las figuras interactivas, controles y lecturas basadas en el modelo
Comprobaciones de geometría y capturas del navegador, cuando se ejecutan en el entorno de destino

Ver el brief de ejemplo

Del brief a la revisión

01
Asocia la idea a un objeto
Aporta el comportamiento real y elige un mecanismo que lo explique. Define qué significa cada movimiento y cada lectura antes de añadir detalles decorativos.
02
Planifica las piezas y la cámara
Enumera la estructura de soporte, el mecanismo en funcionamiento y los controles. Elige una vista que muestre la relación en lugar de ocultarla tras la carcasa.
03
Construye la geometría y el comportamiento
Usa el kit para las formas sólidas y el orden de profundidad. Calcula la geometría estática una sola vez; conecta las piezas interactivas y los valores mostrados al mismo modelo.
04
Inspecciona la figura en contexto
Ejecuta las comprobaciones de geometría y de líneas pertinentes y luego inspecciona las capturas del navegador en ambos temas. Una auditoría correcta no demuestra que la explicación sea exacta ni que la composición sea legible.

02 Cuándo usarla

Cuándo usarla

Usa Anatomy cuando una analogía física facilite entender una idea técnica. Está más especializada que un generador general de diagramas o ilustraciones.

Buena opción

Documentación que explica un mecanismoMuestra cómo se comporta una cola, un umbral, un control o un componente mediante una relación física visible.
Figuras técnicas editorialesCrea una figura detallada para una entrada de blog o una página de aterrizaje en la que el propio objeto lleve la explicación.
Explicaciones interactivasPermite que el lector cambie un parámetro y vea cómo se actualizan juntos el movimiento y los valores, teniendo en cuenta el teclado y el movimiento reducido.

Límites que conviene revisar

No es una herramienta general de diagramas de flujoPara un proceso que se explica mejor con cajas etiquetadas y flechas, este enfoque de objeto físico puede añadir complejidad innecesaria.
El 3D es una beta opcionalLa fuente fijada limita su evidencia del 3D a un ejemplo y una figura de prueba. La geometría densa en movimiento necesita sus propias comprobaciones de rendimiento; no se garantiza un resultado fluido.
Las comprobaciones necesitan un navegadorNode.js 20.10+ ejecuta el kit; se necesita Chrome o Chromium para las comprobaciones del navegador. Instalar la habilidad no hace que esas comprobaciones pasen ni aporta todas las dependencias del proyecto.

Aporta estos datos

El comportamiento que se va a explicarProporciona los estados, umbrales o ecuaciones reales, además de lo que el público ya sabe. Indica como hipotéticos los valores hipotéticos.
Una metáfora físicaDescribe el objeto, qué se mueve y qué significa ese movimiento. Comparte referencias visuales para el acabado o los materiales, no para pedir que se copie una figura existente.
Un alcance de salida e interacciónElige SVG, HTML independiente o componentes de React; especifica el tamaño, el tema y si realmente se necesita interacción, WebGL o 3D experimental.

03 Decisiones que importan

Decisiones que importan

Las lecturas comparten el modelo de movimiento
Un número solo es útil si refleja el mismo estado que el mecanismo. La habilidad pide un modelo común para el movimiento, el pie de figura y los valores mostrados.
El orden de profundidad forma parte del dibujo
Los sólidos, tuberías y piezas móviles que se superponen necesitan un orden coherente de delante hacia atrás. La auditoría incluida comprueba la geometría; los extremos de línea requieren una comprobación aparte.
La interacción tiene una versión estática
El flujo de trabajo documentado incluye control por teclado, pausa fuera de pantalla y movimiento reducido. Si se usa WebGL, el SVG debe seguir entendiéndose sin él.

04 Prueba un brief concreto

Prueba un brief concreto

El brief de ejemplo de abajo no se ha probado. Revisa la configuración de la habilidad antes de usarlo.

Revisa la configuración

El comando de abajo instala la habilidad en un proyecto y te permite elegir un agente. Consulta el README original antes de ejecutarlo.

Comando de instalación documentado

npx skills add wheresryan22/anatomy

El kit necesita Node.js 20.10+; el README indica Node.js 22.20+ para la CLI de skills 1.7.1. Las comprobaciones del navegador requieren Chrome o Chromium. En Claude Code o OpenCode, invoca /anatomy; en Codex, usa $anatomy.

Empieza con un solo mecanismo

Usa un modelo pequeño y definido explícitamente antes de intentar una escena densa. El brief de abajo es un ejemplo sin probar, no una figura terminada proporcionada.

Brief de ejemplo

Usa Anatomy para explicar una cola acotada como un pequeño mecanismo físico en una figura HTML independiente. La cola contiene como máximo 5 elementos: enqueue añade uno cuando hay espacio, dequeue quita uno cuando no está vacía, y las operaciones rechazadas dejan el recuento sin cambios. Primero propón el objeto y explica qué significa su movimiento. Usa estas reglas hipotéticas, no datos de rendimiento inventados. Haz que los controles sean accesibles con teclado y que el recuento y el movimiento procedan de un solo modelo. Admite temas claro y oscuro, un viewport de 390 px y movimiento reducido. No añadas WebGL ni 3D. Muestra el diseño estático antes de añadir interacción e informa de qué comprobaciones de geometría, de líneas y de navegador ejecutaste realmente.

Revisa la explicación y el dibujo

Inspecciona el resultado frente al modelo y a la evidencia del navegador. Anota las comprobaciones que no se pudieron ejecutar.

El recuento, el movimiento y los estados vacío/lleno concuerdan con las reglas de la cola indicadas.
La figura sigue siendo legible en una pantalla estrecha y sin movimiento; sus controles funcionan con teclado.
Se revisan ambos temas y las comprobaciones de geometría y de líneas aplicables; se nombran las comprobaciones no ejecutadas.

OpenDesign ofrece un espacio de trabajo de diseño local para agentes de programación. Este listado no significa que la habilidad esté incluida ni que sus herramientas externas, credenciales y dependencias de software vengan incluidas.

Descargar OpenDesign Leer la guía de inicio rápido

05 Fuente y licencia

Fuente y licencia

Esta página describe la revisión fija de la fuente enlazada abajo. El comportamiento y los requisitos originales pueden cambiar.

Propietario de la fuente: wheresryan22
Repositorio: wheresryan22/anatomy
Archivo de la habilidad: SKILL.md
Licencia: MIT
Versión revisada: 2026-10-12 · 689dcf966e63

Resumen editorial de la fuente

Anatomy combina un método de explicación con objetos físicos con un kit isométrico de SVG, interacción opcional y comprobaciones de geometría y de navegador definidas por la fuente. Este es un resumen editorial de la fuente fijada, no un informe de ejecución.

Resumen original de OpenDesign, basado en la fuente enlazada. Las estrellas del repositorio son una señal de popularidad con fecha, no el uso de la habilidad ni una puntuación de calidad.

06 Preguntas antes de empezar

Preguntas antes de empezar

¿Anatomy requiere React?

No. La fuente admite JavaScript sin framework o TypeScript que produce SVG y HTML, además de componentes de React y Next.js. Elige la salida que encaje con el proyecto anfitrión.

¿Necesito WebGL o 3D para una figura Anatomy?

No. SVG es la salida principal. WebGL es opcional para efectos como agua, fuego o luz; la geometría 3D giratoria es una opción beta aparte. Solicita solo los modos que necesite la explicación.

¿La habilidad es lo mismo que el paquete anatomy-figures?

No. Anatomy es la habilidad de creación y el kit de herramientas. El paquete anatomy-figures, documentado por separado, ofrece figuras ya hechas. Instalar uno no debe describirse como instalar el otro.

Anatomy

Haz visible una idea técnica

Empieza por el comportamiento real, elige una metáfora física e inspecciona la figura en el contexto previsto. Revisa la fuente y la configuración antes de ejecutar la habilidad.

Descargar OpenDesign Explorar habilidades de diseño