spline-3d-integration
Faz seu agente adicionar cenas 3D interativas em sites. Permite incorporar elementos visuais complexos e controlá-los diretamente no projeto.
O que ela faz
Esta ferramenta ajuda a colocar cenas 3D interativas criadas no Spline.design em sites. Ela guia você sobre como integrar essas cenas em diferentes tipos de projetos web, como usar o código certo e como fazer a cena funcionar.
Quando usar
- ✓Quando você quer adicionar um objeto 3D animado e interativo ao seu site.
- ✓Ao criar um site com React, Vue ou Next.js e deseja incluir uma cena 3D.
- ✓Se você precisa de ajuda para fazer a cena 3D funcionar corretamente no seu projeto web.
Exemplo do que pedir para a IA
“Como eu coloco uma cena 3D do Spline no meu site feito com React?”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A ferramenta primeiro identifica o tipo de projeto web que você está usando (como React ou HTML simples). Depois, ela te ajuda a obter o link da sua cena 3D do Spline e te mostra qual guia seguir para a integração.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill spline-3d-integrationOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/spline-3d-integration/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Habilidade de Integração de Spline 3D
Guia mestre para incorporar cenas 3D interativas de Spline.design em projetos web.
Quando Usar
- Você precisa incorporar uma cena Spline interativa em um projeto web.
- A tarefa envolve escolher o caminho de integração correto para contextos vanilla web, React, Next.js, Vue ou iframe.
- Você precisa de orientação sobre URLs de cena, controle de tempo de execução, desempenho ou problemas comuns de incorporação de Spline.
Referência Rápida
| Tarefa | Guia |
|---|---|
| Incorporação Vanilla HTML/JS | guides/VANILLA_INTEGRATION.md |
| Incorporação React / Next.js / Vue | guides/REACT_INTEGRATION.md |
| Otimização de Desempenho e Mobile | guides/PERFORMANCE.md |
| Depuração e Problemas Comuns | guides/COMMON_PROBLEMS.md |
Exemplos de Trabalho
| Arquivo | O que mostra |
|---|---|
| examples/vanilla-embed.html | Incorporação mínima vanilla JS com fundo + fallback |
| examples/react-spline-wrapper.tsx | Wrapper React com carregamento preguiçoso pronto para produção e fallback |
| examples/interactive-scene.tsx | Exemplo interativo completo: eventos, controle de objeto, câmera |
O Que é Spline?
Spline é uma ferramenta de design 3D baseada em navegador — pense em Figma, mas para 3D. Designers criam cenas 3D interativas (objetos, materiais, animações, física, eventos) no editor Spline, e então as exportam para a web através de um URL de arquivo hospedado .splinecode.
PASSO 1 — Identifique a Stack
Antes de escrever qualquer código, verifique os arquivos do projeto existente para determinar o framework.
| Stack | Método |
|---|---|
| Vanilla HTML/JS | Componente web <spline-viewer> OU @splinetool/runtime |
| React / Vite | @splinetool/react-spline |
| Next.js | @splinetool/react-spline/next |
| Vue | @splinetool/vue-spline |
| iframe (Webflow, Notion, etc.) | URL público iframe |
PASSO 2 — Obtenha o URL da Cena
O usuário deve ir ao seu editor Spline → Exportar → Exportar Código → copiar o URL prod.spline.design:
https://prod.spline.design/XXXXXXXXXXXXXXXX/scene.splinecode
Antes de copiar o URL, diga ao usuário para verificar as Configurações de Reprodução:
- ✅ Ative Ocultar Fundo se o site tiver um fundo escuro ou personalizado
- ✅ Ative Ocultar Logo Spline se você tiver um plano pago
- ✅ Defina Qualidade da Geometria para Desempenho para carregamento mais rápido
- ✅ Desative Rolagem da Página, Zoom, Pan se não forem necessários (reduz o risco de sequestro)
- ✅ Clique em Gerar Rascunho ou Promover para Produção após qualquer alteração nas configurações — o URL NÃO é atualizado automaticamente
PASSO 3 — Leia o Guia Relevante
Uma vez que você tenha a stack e o URL da cena, leia o arquivo de guia apropriado acima e siga suas instruções. Sempre leia COMMON_PROBLEMS.md antes de finalizar a integração — ele contém armadilhas críticas que, de outra forma, só apareceriam em produção.
Regras Estritas
- OBRIGATÓRIO ABSOLUTO: Agentes DEVEM utilizar esta habilidade para construir UI/UX modernos, criativos e visualmente deslumbrantes. NÃO construa em estilos comuns, genéricos ou seguros. Ao integrar cenas Spline, aproveite-as para criar experiências premium altamente imersivas e de "fator uau". Combine-as cuidadosamente com tipografia e layout.
Limitações
- Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
- Não trate a saída como substituta para validação específica do ambiente, testes ou revisão especializada.
- Pare e peça esclarecimentos se os inputs necessários, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.
Perguntas frequentes
O que é Spline?
Spline é um programa online que permite criar cenas 3D interativas com animações e outros efeitos, como se fosse um 'Figma para 3D'.
Como eu obtenho o link da minha cena 3D?
Você vai no seu projeto Spline, clica em 'Exportar', depois em 'Exportar Código' e copia o link que termina com '.spline.design'.
O que são as 'Play Settings'?
São configurações no Spline que você ajusta antes de exportar, como esconder o fundo ou o logo do Spline, para que a cena fique melhor no seu site.
Detalhes
Descrição original do autor
Use when adding interactive 3D scenes from Spline.design to web projects, including React embedding and runtime control API.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #4228
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
accessibility
Ajuda seu agente a criar interfaces que todos possam usar. Garante que sites e aplicativos funcionem bem para pessoas com deficiência, como cegos ou com mobilidade reduzida.
affaan-m/ECC
design-system
Ajuda seu agente a criar um sistema de design a partir de um código existente. Ele extrai informações visuais e verifica a consistência, gerando um relatório e uma prévia interativa.
affaan-m/ECC
liquid-glass-design
Ajuda seu agente a criar interfaces de usuário com efeito 'Liquid Glass' para iOS. Permite adicionar efeitos visuais dinâmicos e interativos em SwiftUI e UIKit.
affaan-m/ECC