Webgl

shader-dev é uma skill prática de shaders GLSL para visuais em tempo real no estilo ShaderToy. Use a skill shader-dev para criar ou depurar ray marching, cenas com SDF, iluminação, partículas, movimento de fluidos, pós-processamento e shader-dev para UI Design com menos tentativa e erro do que com um prompt genérico.

A skill threejs-textures para Desenvolvimento Frontend cobre carregamento de texturas, mapeamento UV, colorSpace, wrapping, filtering e environment maps para que imagens renderizem corretamente em materiais do Three.js.

threejs-shaders é um guia prático para escrever shaders em Three.js com GLSL, ShaderMaterial, uniforms, deformação de vértices e efeitos de fragmento. Use-o no desenvolvimento frontend quando precisar de uma base funcional de shader, escolhas de material mais claras e menos tentativa e erro do que um prompt genérico.

threejs-materials é um skill de materiais para Three.js voltado a escolher, configurar e depurar materiais de mesh. Use-o para PBR realista, flat shading sem iluminação, visuais toon e de debug, estilos guiados por textura e shaders personalizados. É útil para equipes de Frontend Development que precisam tomar decisões sobre materiais com mais rapidez e consistência.

Skill threejs-postprocessing para Desenvolvimento Frontend: adicione pipelines com EffectComposer, bloom, depth of field, blur, color grading e passes personalizados em screen space. Use este guia para configurar a cadeia de renderização, ajustar os efeitos e integrar o composer a uma cena Three.js já existente.

A skill threejs-loaders ajuda você a carregar assets do Three.js corretamente, incluindo modelos GLTF/GLB, texturas, ambientes HDR e outros recursos assíncronos. Use esta skill threejs-loaders em Frontend Development quando precisar de carregamento confiável, tratamento de progresso e menos bugs antes da cena ficar pronta.

threejs-lighting é uma skill prática de iluminação em Three.js para Frontend Development. Ela ajuda você a escolher tipos de luz, configurar sombras, adicionar iluminação de ambiente e corrigir cenas que parecem chapadas, escuras demais ou superexpostas. Use o guia threejs-lighting quando precisar de uma iluminação de cena mais rápida e consistente.

threejs-geometry ajuda você a escolher e montar geometria do Three.js para cenas reais: formas nativas, BufferGeometry, meshes customizadas e instancing. Use o skill threejs-geometry em Frontend Development quando precisar do construtor certo, da ordem correta dos parâmetros e de uma saída pensada para desempenho.

O threejs-fundamentals ajuda desenvolvedores front-end a montar e depurar a configuração central de apps em Three.js: cena, câmera, renderer, luzes, meshes, transforms e hierarquia de objetos. Use este guia do threejs-fundamentals para corrigir telas em branco, posicionar objetos corretamente e publicar uma primeira cena limpa.

Skill threejs-animation para sistemas de movimento em Three.js: keyframes, animation clips, mixers, actions, reprodução esquelética, morph targets e motion procedural. Use em Frontend Development quando precisar reproduzir animações GLTF, combinar clips ou criar loops de animação limpos com menos tentativa e erro.