Magic UI skill

O que ela faz

A skill orienta o Claude a usar o Magic UI, uma coleção de componentes animados pra React e Next.js com Tailwind. Ela instala cada peça pelo registro do shadcn (npx shadcn add @magicui/nome), encaixa na seção certa e ajusta por propriedade e classe, sem reescrever o componente por dentro.

Ela já sabe o que usar em cada lugar: marquee e avatar-circles pra faixa de logos e depoimentos, globe e warp-background pro topo, blur-fade e word-rotate pra texto que entra animado, shiny-button e shimmer-button pro botão de chamada, e particles ou dot-pattern de fundo. Tem receitas de topo, faixa de prova social e grade de recursos.

Antes de terminar, confere acesso pelo teclado, contraste do texto sobre o fundo animado, estouro lateral no celular e peso da animação. A regra é começar com um componente principal e um de apoio, sem empilhar muito movimento na mesma tela.

Nas palavras de quem fez

Quando usar

• Dar movimento ao topo de uma landing page
• Montar uma faixa de logos de clientes ou de depoimentos que rola sozinha
• Destacar o botão de compra com efeito de brilho
• Trocar animação feita à mão por componente pronto
• Resolver erro de instalação ou de import do @magicui

Depois de instalar, é só pedir assim

• Coloca uma faixa de logos de clientes rolando na minha landing page com o Magic UI
• Refaz o topo da página com um fundo animado e um botão com brilho, sem atrapalhar a leitura
• O componente do Magic UI que instalei não aparece animado, descobre o porquê

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