Vercel React Native Skills skill

O que ela faz

É um manual de boas práticas da Vercel pra apps de celular feitos em React Native e Expo. As regras vêm em oito grupos, ordenados pelo impacto: desempenho de listas, animação, navegação, padrões de tela, estado, renderização, monorepo e configuração.

Na prática, o Claude passa a usar FlashList em lista grande, evitar que cada item seja redesenhado à toa, animar só transform e opacity com Reanimated, preferir a navegação nativa, usar expo-image nas imagens, menus e modais nativos e tratar a área segura da tela. Cada regra tem um arquivo com exemplo de código errado e certo.

Também cobre armadilhas que quebram a tela: texto fora do componente Text, condição com && que dá problema na renderização e dependência nativa no pacote errado do monorepo. Existe ainda um documento único com todas as regras expandidas, pra quando o Claude precisa da leitura completa.

Nas palavras de quem fez

Quando usar

• Começar um app em Expo já seguindo as regras desde o primeiro componente
• Lista de produtos ou de mensagens que engasga ao rolar
• Animação que trava em celular mais fraco
• Revisar o código do app antes de mandar pra loja
• Organizar um monorepo com o app e o site juntos

Depois de instalar, é só pedir assim

• Revisa a tela de lista de produtos do meu app em Expo e aplica as regras de desempenho de lista
• Cria a tela de perfil em React Native com foto, menu nativo e a área segura certa no iPhone
• A animação do botão de comprar trava no Android, corrige seguindo as regras de 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