Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Antigravity Design Expert skill
O Claude monta landing pages e painéis com cards que flutuam, vidro fosco, profundidade e entrada animada conforme a pessoa rola a página.
- instalações
- 772
- estrelas no GitHub
- 48,5 mil
- No skills.sh desde
- março de 2026
- Licença
- MIT
Atualizada no GitHub em 24 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
A skill dá ao Claude um estilo visual chamado design antigravidade: elementos que parecem flutuar, com sombras suaves e espalhadas, camadas em profundidade, vidro fosco com desfoque de 12 px e bordas semitransparentes, e grades de cards inclinadas em perspectiva isométrica.
Por padrão, ela monta em React ou Next.js com Tailwind, anima com GSAP e ScrollTrigger e faz o 3D com React Three Fiber ou transformações de CSS. Os cards entram em cascata, com 0,1 segundo entre um e outro, sobem levemente girados quando a pessoa rola e o fundo anda mais devagar que a frente.
Ela manda escrever componentes reaproveitáveis, desligar toda animação pra quem pediu menos movimento no sistema, não mexer na rolagem nem na navegação por teclado e não animar sombra e desfoque o tempo todo, que pesam no navegador.
Nas palavras de quem fez
Core UI/UX engineering skill for building highly interactive, spatial, weightless, and glassmorphism-based web interfaces using GSAP and 3D CSS.
Quando usar
- Landing page de produto digital com visual mais caprichado
- Painel com cards em perspectiva 3D
- Seção de recursos que entra animada ao rolar
- Refazer uma tela chapada com mais profundidade
Depois de instalar, é só pedir assim
- Refaz a seção de benefícios da minha landing com cards de vidro flutuando e entrada em cascata
- Monta um painel com os cards inclinados em perspectiva isométrica, em Next.js com Tailwind
- Põe parallax no fundo do topo e garante que tudo para pra quem desligou animação
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 Antigravity Design Expert 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 Antigravity Design Expert, 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.
Tem a ver com o Google Antigravity?
Não. A skill não fala do Google Antigravity: antigravidade aqui é o nome do estilo visual, de elementos que parecem não ter peso. É texto com regras de design e roda no Claude Code, no Codex e também no Antigravity, como em qualquer agente que lê skill.
O que a antigravity-design-expert skill precisa pra funcionar?
De um projeto web, de preferência em React ou Next.js, onde o Claude possa instalar o GSAP e o Tailwind. Não pede chave de API nem conta paga. Se o seu site usa outra base, é só dizer na conversa que ela segue a sua.
Ela cria imagens ou modelos 3D?
Não. O efeito 3D sai do código, com perspectiva de CSS ou React Three Fiber. Foto, ilustração e modelo 3D detalhado precisam vir de outro lugar.
Levar essa skill
1x antigravity-design-expertR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/sickn33/agentic-awesome-skills
Aprenda a usar
- O que é o Google Antigravity (IDE) e como usar
O Google Antigravity é a IA do Google que trabalha direto na pasta do seu computador. O que é, os quatro jeitos de usar, se é grátis e se roda o MazyOS.
- Antigravity Download: instalar no PC e VS Code
Passo a passo para fazer o download do Google Antigravity no Windows, Mac e Linux, instalar o comando agy no terminal e a extensão oficial no VS Code.
Na mesma prateleira
Ver as 1.414 skills do corredorheyman333
apple-
O Claude redesenha as telas do seu app pra parecerem feitas pela Apple: limpas, calmas, com fonte do sistema e componentes que quem usa iPhone já conhece.Auditada865 instalações, grátisui- designer davila7
draw-
O Claude desenha e arruma diagramas do draw.io, alinha caixas e setas pelo código e entrega o PNG pronto pra slide ou documento.Auditada842 instalações, grátisio existential-birds
tailwind-
O Claude monta o Tailwind 4 sem arquivo de configuração, com as cores, fontes, espaçamentos e animações da sua marca definidos direto no CSS.Auditada812 instalações, grátisv4 prisma-labs-dev
hig
O Claude responde com o que a Apple pede de fato, como área de toque de 44 pontos e Dynamic Type, antes de você mandar o app pra revisão.Auditada791 instalações, grátismindrally
anime-
O Claude anima seu site com Anime.js do jeito certo: movimento que não engasga, sequências bem amarradas e respeito a quem prefere menos animação.Auditada736 instalações, grátisjs wearescientist
awesome-
O Claude escolhe o estilo de uma marca grande que combina com o seu produto e redesenha as telas com as cores, fontes e espaçamentos dela.Auditada658 instalações, grátisdesign- md prowler-cloud
tailwind-
O Claude estiliza seus componentes com as classes do Tailwind e do tema, sem cor solta no meio do código, e o visual fica fácil de manter.Auditada612 instalações, grátis4 dominikmartn
nothing-
O Claude desenha telas e painéis monocromáticos, guiados pela tipografia, com modo claro e escuro caprichados e nenhum enfeite sobrando.Auditada596 instalações, grátisdesign
Mais da loja sickn33
Ver a loja sickn33sickn33
docker-
O Claude põe seu app num contêiner menor, mais rápido de montar e mais seguro, e revisa o Docker que você já tem com uma lista de checagem.Auditada27,3 mil instalações, grátisexpert nodejs-
Ensina princípios de Node.js: escolha de framework, padrões assíncronos, segurança e arquiteturaAuditada13,8 mil instalações, grátisbest- practices typescript-
O Claude resolve os erros chatos de TypeScript, deixa o build mais rápido e confere com typecheck e teste antes de dizer que terminou.Auditada12,6 mil instalações, grátisexpert clean-
Aplica os princípios do Clean Code, do Uncle Bob, para transformar código que funciona em código limpoAuditada12,5 mil instalações, grátiscode api-
Aplica padrões de API segura: autenticação, autorização, validação de entrada e limite de requisiçõesAuditada8.900 instalações, grátissecurity- best- practices nextjs-
O Claude organiza seu site em Next.js com componente no servidor por padrão, cache certo e as telas de carregamento e erro que costumam faltar.Auditada7.400 instalações, grátisbest- practices browser-
Cria checagens confiáveis de navegador com locators semânticos, esperas limitadas e dados de teste isolados6.700 instalações, grátisautomation nextjs-
Integra o Supabase Auth ao Next.js App RouterAuditada6.600 instalações, grátissupabase- auth 3d-
Constrói e depura cenas 3D na web e configuradores de produto com Three.js, React Three Fiber e Spline5.200 instalações, grátisweb- experience i18n-
Aplica padrões de internacionalização e localização: strings fixas, traduções, arquivos de idioma e RTLAuditada4.200 instalações, grátislocalization prisma-
Atua como especialista em Prisma ORM: schema, migrações, consultas otimizadas, relações e bancosAuditada4.200 instalações, grátisexpert playwright-
Automatiza o navegador com Playwright, rodando scripts a partir da pasta onde a skill foi instalada3.900 instalações, grátisskill