CommunityImagengithub.com

Teardown

Construye un simulador 3D vivo, físicamente impulsado, de una máquina real (motor, robot, engranaje, tren de aterrizaje, turbina, excavadora, reloj, cualquier mecanismo) a partir de sus dimensiones reales publicadas, con un panel de instrumentos donde cada indicador se calcula desde el mismo estado de simulación, más un corte con plano de recorte. Úsalo cuando el usuario solicite construir, simular, reconstruir, animar, desmontar, cortar o

¿Qué es Teardown?

Teardown es una habilidad para agentes de IA que permite construir simuladores 3D interactivos y fieles a la realidad de máquinas y mecanismos complejos a partir de datos publicados. A diferencia de una simple animación, el simulador utiliza un estado físico mínimo integrado (como el ángulo del cigüeñal o la posición de una válvula) para calcular toda la cinemática y los indicadores del panel de control en tiempo real, garantizando coherencia entre la visualización y los datos. La habilidad sigue un flujo de trabajo estricto que incluye investigación de dimensiones reales, modelado de piezas con ayudas del kit, implementación de un panel de instrumentos ligado al estado de simulación, y un plano de recorte para revelar componentes internos. El resultado final es un archivo HTML autónomo, sin dependencias de red, que se puede abrir localmente y que incluye una función de renderizado determinista para generar imágenes fijas de verificación. Es ideal para ingenieros, educadores y entusiastas que quieran demostrar o explorar el funcionamiento de motores, robots, transmisiones y otros mecanismos reales.

Compatible con~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/Felixo-gif/teardown/tree/HEAD/skills/teardown

Installed? Explore more Imagen skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Teardown?

Reconstruyes una máquina real pieza por pieza a partir de números reales, la impulsas desde un estado físico y construyes un panel de ingeniería a su alrededor. El resultado debe leerse como un simulador real, no como una ilustración. Nunca te saltes un paso ni inventes un número sin marcarlo.

Entradas

  • La máquina (un modelo real con nombre es lo mejor: "Chevrolet 350 small-block", "Mantis hexapod", "Airbus A320 main gear").
  • Una foto de referencia de la máquina real. Si el usuario adjuntó una, úsala. Si no, pide una; si no puede proporcionarla, encuentra una foto con licencia libre (Wikimedia Commons, verifica la licencia en la página del archivo) y registra el autor, la licencia y la URL. Mira la foto antes de modelar: proporciones, disposición de las piezas, colores y lo que se mueve.

Flujo de trabajo (hazlo en este orden)

  1. Identifica. Determina la máquina exacta y su variante. Di cuál elegiste en una línea.
  2. Números reales primero, un bloque de datos. Investiga y escribe el bloque DATA antes de cualquier geometría: cada dimensión, masa, relación de transmisión, velocidad, ángulo y tiempo que se usará en la construcción, cada uno con kind (published, derived, estimated) y una fuente numerada. Lee references/research.md. Reglas: prefiere hojas de especificaciones del fabricante, manuales, normas, artículos y registros oficiales; cruza dos fuentes cuando puedas; un número que escalaste de la foto es estimated; un número que calculaste a partir de otros es derived. Muestra este bloque al usuario en el chat como una tabla corta antes de construir.
  3. Empieza desde el kit. Copia kit/template.html a <machine>-live.html en la carpeta de salida y copia kit/three.js junto a él. Edita solo los bloques MACHINE:CSS, MACHINE:DASH y <script id="machine">. El kit te proporciona el escenario, la configuración de three.js, órbita simple, corte, indicadores y el reloj. Lee references/dashboard.md para la API.
  4. Construye las piezas a partir de los números. Cada dimensión de la malla proviene de N.<key> (el bloque de datos) o de una derivación escrita en código junto a ella. Sin números mágicos para nada que tenga una contraparte real. Coincide con las proporciones y formas de las piezas de la foto; utiliza los ayudantes del kit (TD.span, formas extruidas, TD.glow).
  5. Un solo estado físico lo impulsa todo. Define el estado mínimo integrado (ángulo del cigüeñal, distancia recorrida, tiempo, posición de la válvula). step() lo integra; derive() calcula toda la máquina a partir de él con cinemática real (references/kinematics.md): posiciones, ángulos, velocidades, fuerzas, presiones. pose() solo copia los valores derivados a las mallas. No uses Math.sin(time) como decoración en las partes móviles.
  6. Panel de instrumentos basado en el mismo estado. Cada lectura, gráfico, tira y barra lee del objeto derivado S, nunca de su propio temporizador. Los gráficos a lo largo de un ciclo se calculan llamando al mismo solucionador en fases muestreadas. Incluye: el número principal, la etiqueta de fase/carrera actual, al menos un gráfico vs ángulo o fase con un cursor móvil, un selector por pieza, el bloque de datos con fuentes, la foto de referencia con crédito y controles. Diseño y elección de indicadores: references/dashboard.md.
  7. Corte. Añade el corte con plano de recorte (TD.cutaway) a través de la pieza que oculta la acción, cáscaras huecas para que solo la sección de la pared muestre el color de la tapa, fantasma lo que está delante y haz visible la acción oculta (destello de combustión, columna de aceite, engranaje). references/cutaway.md.
  8. Apariencia. Aplica references/look.md (oscuro sci-fi por defecto, variante de ingeniería clara bajo petición).
  9. Autocomprobación renderizando imágenes fijas. Ejecuta node kit/stills.mjs <ruta-absoluta-html> 0.5,2,4 <directorio-abs>/check-%.png (necesita playwright; si no, abre la página en las herramientas del navegador y llama a __render). Lee cada PNG. Corrige hasta que: no haya errores en la consola, la máquina esté encuadrada y legible, el corte muestre el interior, los indicadores difieran visiblemente entre imágenes fijas (el script marca los paneles idénticos), y deterministic: yes. Luego revisa references/qa.md. Elimina los PNG de verificación.
  10. Entrega. Ejecuta node kit/inline.mjs <machine>-live.html para empaquetar three.js y las imágenes en <machine>-live.standalone.html, un único archivo sin conexión. Responde con: los archivos, el bloque de datos (números + fuentes), el crédito de la foto y lo que es estimado en lugar de publicado.

Contrato estricto para el archivo de salida

  • Se abre desde el disco sin red; three.js es un script clásico que expone window.THREE (sin módulos ES, sin CDN).
  • window.__render(t): t en segundos, determinista, sin reloj de pared; reinicia los controles a los valores por defecto, reintegra el estado desde 0 en pasos fijos y dibuja un fotograma. El TD.run del kit hace esto por ti; no lo evites.
  • Se reproduce en vivo con requestAnimationFrame cuando se abre normalmente; los controles cambian el estado y todos los indicadores lo siguen.
  • Escenario de escritorio 1600x1000, escalado para ajustarse a cualquier ventana.
  • El bloque de datos, las fuentes y el crédito de la foto son visibles en la página.

Reglas de honestidad

  • Nunca presentes un número estimado como publicado. Etiquétalo.
  • Si los números publicados discrepan, elige uno, muestra el otro en la nota y dilo.
  • Si un comportamiento está modelado de forma simplificada (cargas estáticas, gas ideal, sin fricción), dilo en la respuesta en una línea.

Skills relacionados