kit-otimizar-3dlisted

Otimiza cena three.js, React Three Fiber ou WebGL cru para celular e máquina fraca — tiering de dispositivo, prewarm no loader para nada compilar no meio do scroll, render loop só quando visível, teto de DPR e de partícula/bloom, transformação de scroll na GPU, textura comprimida, e cena fora do bundle para robô. Use quando o usuário disser "otimiza o 3D", "a cena trava no celular", "está engasgando no scroll", "micro travadas", "deixa leve no mobile", "reduz o custo do WebGL", "o hero 3D está pesado", "optimise the 3D", "jank on scroll", ou antes de entregar qualquer projeto que carregue cena WebGL. Use também, sem esperar o pedido, ao montar seção com three.js ou R3F para cliente — máquina de cliente não é máquina de dev.
harebeats/cannonball · ★ 12 · Web & Frontend · score 77

Install: claude install-skill harebeats/cannonball

# Otimizar cena 3D ## Antes de qualquer comando: resolva o `SKILL_DIR` Todo comando abaixo roda um script que viaja junto desta skill, em `SKILL_DIR/scripts/`. Defina `SKILL_DIR` como o **caminho absoluto da pasta que contém ESTE SKILL.md que você acabou de ler** — o seu harness informou esse caminho no resultado da leitura. Funciona em qualquer hospedeiro, sem depender de variável de ambiente de nenhum agente específico: ``` ~/.claude/plugins/cache/cannonball/cannonball/<v>/skills/<nome>/SKILL.md ~/.codex/skills/<nome>/SKILL.md ~/.gemini/skills/<nome>/SKILL.md ~/.agents/skills/<nome>/SKILL.md ``` Em todos, `SKILL_DIR` é a pasta do `SKILL.md`, e `SKILL_DIR/scripts/` está ao lado. > Adaptada da `optimize-3d-scene` de > [textura-agency/next16-claude-starter](https://github.com/textura-agency/next16-claude-starter), > em domínio público. O conteúdo técnico é do autor original; o que mudou aqui > foi trocar as referências ao workspace privado dele por > `references/patterns.md` (que já traz o código todo) e ligar o passo final ao > ciclo de armadilhas do cannonball. Toda cena three.js paga o mesmo imposto: o celular renderiza os mesmos fragmentos que uma workstation, o primeiro quadro depois que um shader aparece compila no meio do scroll, e o render loop segue rodando atrás de três seções de texto que ninguém está olhando. Esta skill corrige isso numa ordem fixa — do mais barato e de maior impacto para o resto. Cada passo vale igual para **WebGL cru** e para three.js; só