3D Studio

¿Qué hace 3D Studio?

Ejecuta un conjunto de habilidades web 3D como un solo flujo de trabajo. La solicitud está en $ARGUMENTS. Si tu agente dejó ese marcador de posición sin completar, la solicitud es lo que el usuario escribió junto con esta habilidad.

1. Elegir las habilidades

Cada una de estas es una habilidad separada. Cárgala de la forma en que tu agente carga habilidades, exactamente bajo el nombre que se muestra: la herramienta Skill en Claude Code, o leyendo su SKILL.md en Codex y Antigravity. Sus instrucciones se aplican entonces junto con este flujo de trabajo. La sección 4 enumera dónde encontrar las carpetas.

Carga siempre estas tres: taste-skill (dirección artística; puede estar instalada como design-taste-frontend), apple-design (movimiento físico fluido, materiales y profundidad), threejs-fundamentals (escena, cámara, renderizador, bucle).

Agrega una fila cuando la solicitud lo necesite:

La solicitud involucra	Cargar
Algo que se mueve	animate, threejs-animation
Formas construidas en código, instanciación, muchos objetos	threejs-geometry
Superficies, madera, metal, brillo	threejs-materials, threejs-textures
Iluminación, sombras, reflejos	threejs-lighting
Hacer clic, arrastrar, orbitar, seleccionar partes	threejs-interaction
Efectos visuales personalizados	threejs-shaders, threejs-postprocessing
Cargar o comprimir archivos de modelos 3D	threejs-loaders, threejs-asset-pipeline
Modelado o exportación desde Blender	blender-mcp (primero verifica que Blender esté instalado)
Un proyecto React	threejs-react-three-fiber, r3f-fundamentals
Lentitud, tartamudeo, un lienzo en blanco, memoria	threejs-performance, threejs-debug-profiler
Figuras isométricas, diagramas o explicaciones que muestren cómo funciona algo, o un póster A4 impreso de uno	anatomy
Una película o video renderizado	Remotion, ver sección 3

Juntas, estas habilidades suman miles de líneas, y cargarlas todas consume la memoria de trabajo que la construcción necesita. Por eso la tabla es la opción predeterminada.

• Con --all, carga todas las habilidades de la tabla independientemente de la solicitud.
• Con --plan, enumera las habilidades que cargarías y por qué, no cargues nada más y detente.

Di en una línea qué habilidades estás cargando. Si una habilidad no se carga, nómbrala y continúa con las demás en lugar de detenerte.

Carga cada habilidad en el punto que este flujo de trabajo la necesite. Si una habilidad comienza con un paso de configuración o pide un saludo que interrumpiría el trabajo, salta esa parte.

2. Trabajar en este orden

1. Decide la idea. Sigue taste-skill para la dirección artística: lee el brief, dibuja una dirección, escribe el texto. La idea debe venir del tema.
2. Mantén la lógica fuera del 3D. Todo lo que tenga reglas reales (aritmética, una simulación, precios) va en módulos simples sin Three.js, cubiertos por pruebas, para que se pueda confiar en ellos sin renderizar nada.
3. Construye el 3D como función del estado. El código de geometría coloca piezas desde una pose y no sabe nada de las reglas. Un movimiento debe ser una función pura de su progreso, para que pueda ejecutarse hacia atrás, revertirse a mitad de camino o saltar al final para movimiento reducido.
4. Renderiza bajo demanda. Dibuja solo cuando algo se movió, y nada en absoluto fuera de pantalla, para que una página inactiva no cueste nada y un teléfono se mantenga frío.
5. Hazlo completamente utilizable. Necesita botones reales junto al lienzo, uso con teclado, movimiento reducido, un fallback sin WebGL y un diseño que funcione en ancho de teléfono.

3. Remotion

Ninguna habilidad de Remotion forma parte de este conjunto, así que usa el paquete remotion directamente en el proyecto.

• Renderiza importando el mismo código de construcción de escena que usa el sitio, para que la película y el sitio no puedan divergir.
• Cada fotograma debe ser una función pura del número de fotograma. No uses temporizadores o resortes que dependan de fotogramas anteriores.
• Renderiza con remotion render <entrada> <composición> <salida.mp4> --gl=angle --codec=h264 --crf=24.
• Una escena cambiada no cambia una película ya renderizada. Vuelve a renderizarla o dile al usuario que está desactualizada.

4. Verificar antes de darlo por terminado

Las verificaciones usan scripts dentro de dos de las habilidades. Encuentra la carpeta de cada habilidad buscando su nombre, en este orden, en .claude/skills/ y .agents/skills/ en el proyecto, luego ~/.claude/skills/, ~/.agents/skills/ y ~/.gemini/config/skills/. A continuación, <anatomy> y <taste> representan esas carpetas. <taste> se llama taste-skill o design-taste-frontend.

Usa node <anatomy>/scripts/drive.mjs <url> --actions steps.json para conducir un navegador real con clics y arrastres reales. Ambos scripts necesitan Node 22 o posterior y un Chrome, Edge o Chromium instalado.

• Fotos fijas y flujos son ejecuciones separadas. Una acción shot puede congelar la animación hasta la siguiente captura. Toma fotos fijas con --reduced, que salta al estado final, y prueba flujos animados con verificaciones eval y sin capturas de pantalla en medio de la ejecución. Si un fotograma sale en blanco o desactualizado, tómalo de nuevo antes de tratarlo como un error.
• Prueba los controles reales. Prefiere hacer clic en los botones reales sobre configurar el estado directamente, e incluye reversiones e interrupciones a mitad de la animación.
• Verifica el diseño. Ejecuta node <taste>/scripts/inspect.mjs <url> --widths 1440,390, luego mira las capturas de pantalla tú mismo. Pasar el inspector es el mínimo, no la calificación.
• Ejecuta las pruebas y lee la consola. Luego repite el flujo principal en la compilación de producción, no solo en el servidor de desarrollo.

Informa qué se verificó y, claramente, qué no: dispositivos reales, sonido y movimiento vistos a velocidad completa suelen estar fuera de alcance aquí.

5. Instalar algo nuevo

Si falta una habilidad de la tabla, el usuario puede instalar todo el conjunto con npx github:mithulpranav24012008/3d-studio. Para cualquier otra habilidad o herramienta que la tarea necesite, dale al usuario el comando y deja que lo ejecute, para que vea su resumen de seguridad. No uses -y para omitir la confirmación.