Webgl skill

O Claude escreve shaders e efeitos 3D no navegador que não derrubam a página: tratam a perda do contexto, limitam memória e têm plano B sem WebGL.

por martinholovsky

instalações: 555
estrelas no GitHub: 48
No skills.sh desde: janeiro de 2026
Licença: Unlicense

Atualizada no GitHub em 6 de dezembro de 2025. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

martinholovsky
webgl
O Claude escreve shaders e efeitos 3D no navegador que não derrubam a página: tratam a perda do contexto, limitam memória e têm plano B sem WebGL.Auditada555 instalações, grátis

O que ela faz

A skill foi escrita pros efeitos do HUD 3D de um assistente no estilo JARVIS: shaders holográficos com linhas de varredura e brilho nas bordas, pós-processamento como bloom e glitch, partículas e visualização de dados em tempo real, tudo em WebGL 2 com TypeScript.

O foco é não derrubar a página: compilar e ligar shaders conferindo erro, tratar a perda do contexto da GPU e recriar os recursos, limitar a memória de textura em 256 MB e pôr teto em chamadas de desenho e triângulos, com alternativa pra navegador sem WebGL.

Pra desempenho, reaproveita buffers, agrupa desenhos por material, usa textura comprimida, renderização instanciada pras partículas e VAOs. O fluxo é teste primeiro, com Vitest, e só termina com testes, checagem de tipos e build passando.

Nas palavras de quem fez

WebGL shaders and effects for JARVIS 3D HUD…

martinholovsky, no SKILL.md

Quando usar

Criar um fundo animado ou efeito holográfico pra um site
Montar partículas ou um painel de dados em tempo real no navegador
Corrigir uma tela WebGL que trava ou some quando a GPU perde o contexto
Deixar um efeito 3D mais leve em computador fraco

Depois de instalar, é só pedir assim

Cria um shader holográfico com linhas de varredura pro fundo do topo do site
Essa animação WebGL some do nada e não volta, trata a perda de contexto da GPU
Otimiza essas partículas com renderização instanciada e põe limite de memória

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

Gen Agent Trust HubPassou
SocketPassou
SnykPassou

Perguntas

Como instalar a Webgl no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Webgl, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a webgl skill precisa pra funcionar?

De um projeto web em TypeScript e de navegador com WebGL 2 (Chrome 56+, Firefox 51+, Safari 15+, Edge 79+). Os exemplos usam composables no estilo do Vue e testes com Vitest. Não depende de chave de API nem de serviço pago.

Ela serve pra qualquer projeto 3D?

Serve como base, mas foi feita pro HUD do projeto JARVIS do autor, e parte dos exemplos é dele. Ela não usa biblioteca como Three.js: trabalha direto na API do WebGL 2, com shaders escritos à mão.

Roda no Codex e no Antigravity?

Sim. É orientação em texto com exemplos de código, sem script próprio, então qualquer agente que lê skills no formato SKILL.md aproveita. Os padrões mais avançados e os exemplos de segurança ficam numa pasta de referências que vem junto.

Levar essa skill

1x webglR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/martinholovsky/claude-skills-generator

Aprenda a usar

Claude Design: como usar, até no plano grátis
O Claude Design cria tela de site, protótipo e slide conversando, e agora vem até no plano grátis. Veja onde abrir, como usar e como levar pro Claude Code.