mithulpranav24012008/3d-studio

3D Studio

Executa um conjunto de skills 3D web como um único fluxo de trabalho. A requisição está em $ARGUMENTS. Se seu agente deixou esse espaço reservado sem preenchimento, a requisição é o que o usuário escreveu junto com esta skill.

1. Escolher as skills

Cada uma delas é uma skill separada. Carregue-a da forma como seu agente carrega skills, exatamente com o nome mostrado: a ferramenta Skill no Claude Code, ou lendo seu SKILL.md no Codex e Antigravity. Suas instruções então se aplicam junto com este fluxo de trabalho. A seção 4 lista onde encontrar as pastas.

Sempre carregue estas três: taste-skill (direção de arte; pode estar instalada como design-taste-frontend), apple-design (movimento físico fluido, materiais e profundidade), threejs-fundamentals (cena, câmera, renderizador, loop).

Adicione uma linha quando a requisição precisar:

A requisição envolve	Carregar
Qualquer coisa que se move	animate, threejs-animation
Formas construídas em código, instanciamento, muitos objetos	threejs-geometry
Superfícies, madeira, metal, brilho	threejs-materials, threejs-textures
Iluminação, sombras, reflexos	threejs-lighting
Clique, arrastar, orbitar, selecionar partes	threejs-interaction
Efeitos visuais personalizados	threejs-shaders, threejs-postprocessing
Carregar ou comprimir arquivos de modelo 3D	threejs-loaders, threejs-asset-pipeline
Modelagem ou exportação do Blender	blender-mcp (primeiro verifique se o Blender está instalado)
Um projeto React	threejs-react-three-fiber, r3f-fundamentals
Lentidão, travamentos, tela em branco, memória	threejs-performance, threejs-debug-profiler
Figuras isométricas, diagramas ou explicadores mostrando como algo funciona, ou um pôster A4 impresso de um	anatomy
Um filme ou vídeo renderizado	Remotion, veja a seção 3

Juntas, essas skills somam milhares de linhas, e carregar todas consome memória de trabalho que a construção precisa. É por isso que a tabela é o padrão.

• Com --all, carregue todas as skills da tabela independentemente da requisição.
• Com --plan, liste as skills que você carregaria e o motivo, não carregue mais nada e pare.

Diga em uma linha quais skills você está carregando. Se uma skill não carregar, nomeie-a e continue com as outras, sem parar.

Carregue cada skill no ponto em que este fluxo de trabalho precisar dela. Se uma skill começar com uma etapa de configuração ou pedir uma saudação que interrompa o trabalho, pule essa parte.

2. Trabalhe nesta ordem

1. Decida a ideia. Siga taste-skill para a direção de arte: leia o briefing, desenhe uma direção, escreva o texto. A ideia deve vir do assunto.
2. Mantenha a lógica fora do 3D. Qualquer coisa com regras reais (aritmética, uma simulação, precificação) vai em módulos simples sem Three.js, cobertos por testes, para que possa ser confiável sem renderizar nada.
3. Construa o 3D como uma função do estado. O código de geometria posiciona partes a partir de uma pose e não sabe nada sobre as regras. Um movimento deve ser uma função pura de seu progresso, para que possa rodar para trás, ser revertido no meio do caminho ou pular para o final em caso de movimento reduzido.
4. Renderize sob demanda. Desenhe apenas quando algo se moveu, e nunca fora da tela, para que uma página ociosa não custe nada e um telefone permaneça frio.
5. Torne-o totalmente utilizável. Ele precisa de botões reais ao lado do canvas, uso por teclado, movimento reduzido, um fallback sem WebGL e um layout que funcione na largura de um telefone.

3. Remotion

Nenhuma skill Remotion faz parte deste conjunto, então use o pacote remotion diretamente no projeto.

• Renderize importando o mesmo código de construção de cena que o site usa, para que filme e site não possam divergir.
• Cada frame deve ser uma função pura do número do frame. Não use temporizadores ou molas que dependam de frames anteriores.
• Renderize com remotion render <entry> <composition> <out.mp4> --gl=angle --codec=h264 --crf=24.
• Uma cena alterada não altera um filme já renderizado. Re-renderize-o ou informe ao usuário que ele está desatualizado.

4. Verifique antes de considerar concluído

As verificações usam scripts dentro de duas das skills. Encontre a pasta de cada skill procurando por seu nome, nesta ordem, em .claude/skills/ e .agents/skills/ no projeto, depois em ~/.claude/skills/, ~/.agents/skills/ e ~/.gemini/config/skills/. Abaixo, <anatomy> e <taste> representam essas pastas. <taste> é nomeado como taste-skill ou design-taste-frontend.

Use node <anatomy>/scripts/drive.mjs <url> --actions steps.json para dirigir um navegador real com cliques e arrastos reais. Ambos os scripts precisam de Node 22 ou superior e um Chrome, Edge ou Chromium instalado.

• Imagens estáticas e fluxos são execuções separadas. Uma ação shot pode congelar a animação até a próxima captura. Tire imagens estáticas com --reduced, que pula para o estado final, e teste fluxos animados com verificações eval e sem capturas de tela no meio da execução. Se um frame sair em branco ou desatualizado, tire-o novamente antes de tratá-lo como um bug.
• Teste os controles reais. Prefira clicar nos botões reais em vez de definir o estado diretamente, e inclua reversão e interrupção no meio da animação.
• Verifique o design. Execute node <taste>/scripts/inspect.mjs <url> --widths 1440,390, depois veja as capturas de tela você mesmo. Passar no inspetor é o mínimo, não a nota.
• Execute os testes e leia o console. Em seguida, repita o fluxo principal na build de produção, não apenas no servidor de desenvolvimento.

Relate o que foi verificado e, claramente, o que não foi: dispositivos reais, som e movimento vistos em velocidade total geralmente estão fora de alcance aqui.

5. Instalando algo novo

Se uma skill da tabela estiver faltando, o usuário pode instalar o conjunto inteiro com npx github:mithulpranav24012008/3d-studio. Para qualquer outra skill ou ferramenta que a tarefa precisar, dê ao usuário o comando e deixe-o executá-lo, para que veja o resumo de segurança. Não use -y para pular a confirmação.