Repolode
Enviar
wheresryan22

wheresryan22/anatomy

Un Claude Agent Skill que crea ilustraciones interactivas isométricas en SVG, WebGL y 3D de máquinas para explicar ideas técnicas.

Ver en GitHubSitio web
Estrellas
14,993
Forks
1,145
Issues abiertos
46
Último commit
hace 3 días

¿Qué es?

Anatomy es una habilidad para agentes que pide a Claude que explique una idea técnica inventando un objeto físico cuyo funcionamiento refleje el concepto y luego lo construya como una figura isométrica. Una clave de caché que omite el trabajo cuando nada ha cambiado podría convertirse en una cerradura de tambor de pines que solo gira cuando todos los pines coinciden. El resultado está compuesto por muchas piezas pequeñas sombreadas, dentro de una tarjeta enmarcada con un título, una indicación y una lectura en tiempo real, y responde a la interacción con el puntero y el teclado.

Las figuras pueden ser de tres tipos: SVG puro, SVG con una capa de shaders WebGL para fuego, agua, luz y vapor, y un modo 3D beta en el que las piezas móviles se vuelven a proyectar en cada fotograma. El resultado puede ser una página HTML independiente, un archivo SVG único o componentes de React y Next.js. El kit solo usa módulos integrados de Node, y el repositorio incluye ocho figuras de ejemplo con sus scripts de compilación.

La habilidad también incluye comprobaciones con Chrome sin interfaz gráfica que toman capturas de pantalla y ejecutan una auditoría de geometría para detectar piezas que se atraviesan entre sí. Funciona con Claude Code, y OpenCode, Codex y Antigravity cargan el mismo formato.

Funciones clave

  • 01Convierte un concepto técnico en una máquina física representada como una figura isométrica.
  • 02Genera figuras SVG con sombreado de cuatro tonos y una lectura en tiempo real.
  • 03Añade capas de shaders WebGL para fuego, agua, luz y vapor.
  • 04Ofrece un modo 3D beta en el que las piezas móviles se vuelven a sombrear en cada fotograma.
  • 05Exporta HTML independiente, un único archivo SVG o componentes de React/Next.js.
  • 06Ejecuta una auditoría de geometría y comprobaciones con capturas de pantalla en Chrome sin interfaz gráfica.

Casos de uso

  • Crear ilustraciones explicativas para documentación técnica o una publicación de blog.
  • Crear una explicación interactiva para una página de destino o un curso.
  • Ilustrar cómo funciona un sistema, como un limitador de solicitudes o un pool de conexiones.
  • Incrustar un componente React que visualice un proceso en un sitio de Next.js.

Temas

#agent-skill#svg#isometric#webgl#claude#visualization#documentation#react#open-source#vizualization

Preguntas frecuentes

¿Qué es anatomy?
Un Claude Agent Skill que crea ilustraciones interactivas isométricas en SVG, WebGL y 3D de máquinas para explicar ideas técnicas. Anatomy es una habilidad para agentes que pide a Claude que explique una idea técnica inventando un objeto físico cuyo funcionamiento refleje el concepto y luego lo construya como una figura isométrica. Una clave de caché que omite el trabajo cuando nada ha cambiado podría convertirse en una cerradura de tambor de pines que solo gira cuando todos los pines coinciden. El resultado está compuesto por muchas piezas pequeñas sombreadas, dentro de una tarjeta enmarcada con un título, una indicación y una lectura en tiempo real, y responde a la interacción con el puntero y el teclado.
¿anatomy es gratuito? ¿Qué licencia tiene?
anatomy es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿anatomy sigue mantenido?
Mantenimiento activo. El último commit de anatomy fue el 15 oct 2026.
¿Para qué puedo usar anatomy?
Crear ilustraciones explicativas para documentación técnica o una publicación de blog. Crear una explicación interactiva para una página de destino o un curso. Ilustrar cómo funciona un sistema, como un limitador de solicitudes o un pool de conexiones. Incrustar un componente React que visualice un proceso en un sitio de Next.js.
¿Dónde consigo anatomy?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/wheresryan22/anatomy

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados