Aceternity UI skill

O Claude monta topo com fundo animado, cards 3D, rolagem com parallax e texto que se digita na sua página em Next.js, sem tropeçar na instalação.

por secondsky

instalações: 1.500
estrelas no GitHub: 236
No skills.sh desde: janeiro de 2026
Licença: MIT

Atualizada no GitHub em 25 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

secondsky
aceternity-ui
O Claude monta topo com fundo animado, cards 3D, rolagem com parallax e texto que se digita na sua página em Next.js, sem tropeçar na instalação.Auditada1.500 instalações, grátis

O que ela faz

A skill dá ao Claude o mapa do Aceternity UI, uma coleção de mais de 100 componentes animados pra React e Next.js feitos com Tailwind e Framer Motion, separados por tipo: fundos (feixes de luz, aurora, meteoros, holofote), cards com efeito 3D, rolagem com parallax, texto animado, botões, menus, carrosséis, linha do tempo e loaders.

Ele sabe instalar do jeito certo: inicia o shadcn no projeto, registra o endereço do Aceternity no components.json e adiciona cada componente por comando. O componente vira um arquivo seu em components/ui, pra editar à vontade. Se o comando falhar, instala motion, clsx e tailwind-merge e copia o código à mão.

Também traz os erros que mais aparecem e a correção de cada um: motion faltando, função cn não definida, animação parada por falta de 'use client', classe do Tailwind que não pega e modo escuro que não liga, tanto no Tailwind 4 quanto no 3.

Nas palavras de quem fez

100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI…

secondsky, no SKILL.md

Quando usar

Montar o topo de uma landing page com fundo animado
Mostrar produtos, planos ou portfólio em cards com efeito 3D
Contar a história do produto com rolagem e parallax
Pôr depoimentos num carrossel animado
Consertar um componente do Aceternity que não anima

Depois de instalar, é só pedir assim

Monta o topo da minha landing page com o Background Beams do Aceternity e um título com efeito de digitação
Coloca os três planos de preço em cards 3D do Aceternity
Instala o Aceternity UI nesse projeto Next.js e cria uma seção de recursos com Sticky Scroll Reveal

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 Aceternity UI 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 Aceternity UI, 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 aceternity-ui skill precisa pra funcionar?

De um projeto Next.js 13 ou mais novo com Tailwind (o Claude cria se não houver), do Node.js 20 ou mais novo e do shadcn, que roda por npx. Não pede chave de API nem conta paga.

Serve pra site que não é Next.js?

A skill é feita pra Next.js com React e Tailwind. Os componentes usam Framer Motion e rodam no navegador, por isso pedem 'use client' no topo do arquivo. Pra site fora do React, como WordPress, ela não serve.

Roda no Codex e no Antigravity?

Roda: é uma skill em SKILL.md com comandos de terminal (npx shadcn) e exemplos de código, que qualquer agente que mexe em arquivos e roda comandos consegue usar.

Levar essa skill

1x aceternity-uiR$ 0,00

TotalR$ 0,00

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

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.