Graphics

shader-dev es un skill práctico de shaders GLSL para efectos visuales en tiempo real al estilo ShaderToy. Usa el skill shader-dev para crear o depurar ray marching, escenas SDF, iluminación, partículas, movimiento de fluidos, postprocesado y shader-dev para diseño de interfaces, con menos conjeturas que con un prompt genérico.

La skill threejs-textures para desarrollo frontend cubre carga de texturas, mapeado UV, colorSpace, wrapping, filtering y mapas de entorno para que las imágenes se rendericen correctamente en materiales de Three.js.

threejs-shaders es una guía práctica para escribir shaders de Three.js con GLSL, `ShaderMaterial`, uniforms, deformación de vértices y efectos de fragmento. Úsala en desarrollo frontend cuando necesites una base funcional para shaders, una elección de materiales más clara y menos ensayo y error que con un prompt genérico.

threejs-materials es una skill de materiales para Three.js orientada a elegir, configurar y depurar materiales de malla. Úsala para PBR realista, sombreado plano sin iluminación, toon y vistas de depuración, estilos guiados por texturas y shaders personalizados. Resulta útil para equipos de desarrollo frontend que necesitan decisiones de materiales más rápidas y coherentes.

Skill de threejs-postprocessing para desarrollo frontend: añade pipelines de EffectComposer, bloom, profundidad de campo, blur, gradación de color y pases personalizados en espacio de pantalla. Usa esta guía para configurar la cadena de renderizado, ajustar los efectos e integrar el renderizado con composer en una escena existente de Three.js.

threejs-loaders te ayuda a cargar correctamente recursos de Three.js, incluidos modelos GLTF/GLB, texturas, entornos HDR y otros recursos asíncronos. Usa esta skill de threejs-loaders para Frontend Development cuando necesites cargas fiables, control del progreso y menos fallos al preparar la escena.

threejs-lighting es una skill práctica de iluminación en Three.js para Frontend Development. Te ayuda a elegir tipos de luz, configurar sombras, añadir iluminación ambiental y corregir escenas que se ven planas, demasiado oscuras o sobreexpuestas. Usa la guía threejs-lighting cuando necesites una iluminación de escena más rápida y consistente.

threejs-geometry te ayuda a elegir y construir geometría de Three.js para escenas reales: formas integradas, BufferGeometry, mallas personalizadas e instancing. Usa la skill threejs-geometry para Frontend Development cuando necesites el constructor correcto, el orden de parámetros adecuado y una salida optimizada para el rendimiento.

threejs-fundamentals ayuda a desarrolladores frontend a crear y depurar la configuración básica de una app en Three.js: escena, cámara, renderer, luces, mallas, transformaciones y jerarquía de objetos. Usa esta guía de threejs-fundamentals para corregir lienzos en blanco, colocar objetos correctamente y publicar una primera escena limpia.

Skill threejs-animation para sistemas de movimiento en Three.js: keyframes, animation clips, mixers, actions, reproducción esquelética, morph targets y movimiento procedimental. Úsala en Frontend Development cuando necesites reproducir animaciones GLTF, mezclar clips o construir bucles de animación limpios con menos margen de error.

makepad-2.0-vector es una skill de gráficos vectoriales de Makepad 2.0 para diseño de UI tipo SVG. Úsala para crear iconos nítidos, badges, ilustraciones, degradados, filtros, transformaciones y elementos vectoriales animados con `Vector{}` o `Svg{}`. La guía te ayuda a instalar makepad-2.0-vector y a obtener resultados listos para implementar con menos incertidumbre.

makepad-2.0-shaders es una skill de Frontend Development para escribir y depurar código de shaders de Makepad 2.0. Usa esta skill makepad-2.0-shaders para bloques `pixel: fn()` y `vertex: fn()`, formas `Sdf2d`, dibujo personalizado de widgets, alfa premultiplicado y orientación práctica de instalación y uso.