Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
React Native Best Practices skill
O Claude mede onde o app React Native engasga, aplica a correção certa e mede de novo pra provar que melhorou.
- instalações
- 30,2 mil
- estrelas no GitHub
- 1.683
- No skills.sh desde
- janeiro de 2026
- Licença
- MIT
Atualizada no GitHub em 8 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
Baseada no guia de otimização de React Native da Callstack, cobre seis frentes em ordem de prioridade: travadas e renderização demais, tamanho do pacote, tempo de abertura, desempenho nativo, memória e animações. São 29 arquivos de referência com código.
Trabalha num ciclo: mede antes, corrige, mede de novo e confere o ganho, como FPS de 45 pra 60 ou pacote de 2,1 MB pra 1,6 MB. Se o número não melhorou, desfaz e tenta a próxima. Não sugere useMemo nem mudança no gerenciamento de estado sem uma medição que mostre o problema.
Usa o React DevTools pelo agent-device ou à mão, o source-map-explorer pro tamanho do pacote e os perfis do Xcode e do Android Studio. As correções vão de trocar ScrollView por FlashList e cortar imports em barril até ligar o R8 no Android e alinhar bibliotecas em 16 KB pro Google Play.
Nas palavras de quem fez
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving…
Quando usar
- O app trava ao rolar uma lista ou abrir uma tela
- O app demora pra abrir no celular do cliente
- O app ficou pesado demais pra baixar
- O uso de memória cresce até o app fechar sozinho
- Ajustar as bibliotecas ao alinhamento de 16 KB que o Google Play cobra
Depois de instalar, é só pedir assim
- O feed do meu app React Native trava ao rolar. Mede, acha a causa e corrige
- Analisa o tamanho do pacote do app e me diz o que dá pra cortar
- Mede o tempo de abertura do app no Android e propõe o que fazer pra ele abrir mais rápido
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 React Native Best Practices 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 React Native Best Practices, 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 precisa pra funcionar?
Um projeto React Native e um aparelho ou emulador pra medir. Pros perfis nativos, Xcode no Mac e Android Studio. O agent-device ajuda a medir sozinho, mas sem ele dá pra usar o React Native DevTools à mão. Sem chave de API nem conta paga.
Ela faz o app do zero?
Não. É só desempenho: medir, achar o gargalo e corrigir. Tela, navegação e visual ficam com outras skills.
Roda no Codex e no Antigravity?
Sim. São um SKILL.md e referências em texto, então funciona em qualquer agente que leia skills. Os comandos de medição rodam no seu terminal.
Levar essa skill
1x react-native-best-practicesR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/callstackincubator/agent-skills
Aprenda a usar
- Criar site com IA: o passo a passo no Claude Code
Como eu crio site com IA pros clientes sem saber programar: no Claude Code, no Codex ou de graça no Antigravity. O passo a passo, sem cara de template.
Na mesma prateleira
Ver as 1.731 skills do corredoravdlee
swiftui-
O Claude escreve e revisa telas SwiftUI seguindo as regras da Apple, troca API velha pela atual e acha o que deixa o app lento.Auditada35,1 mil instalações, grátisexpert- skill twostraws
swiftui-
O Claude revisa seu app SwiftUI e entrega a lista do que corrigir, com linha, regra, código de antes e depois e o que atacar primeiro.Auditada35,1 mil instalações, grátispro Expo
expo-
O Claude monta folhas que sobem de baixo, seletores, sliders e menus nativos no seu app Expo, com o mesmo código rodando no iPhone, no Android e na web.OficialAuditada31,8 mil instalações, grátisui expo-
O Claude monta telas de app Expo com a cara de cada sistema, que seguem o modo escuro sozinhas e só são entregues depois de testar o caminho principal.Oficial31,6 mil instalações, grátisnative- ui expo-
O Claude organiza as telas do seu app em Expo Router do jeito que o próprio time do Expo recomenda, com abas, pilhas e modais nativos.OficialAuditada27,9 mil instalações, grátisrouter expo-
O Claude atualiza o Expo do seu app seguindo o passo a passo do time do Expo e arruma as dependências que quebram no caminho.OficialAuditada27,7 mil instalações, grátisupgrade antfu
nuxt
O Claude escreve e corrige seu app em Nuxt 5 já no padrão novo: pasta app/, Nitro v3, rotas tipadas e Vite 8.Auditada24,1 mil instalações, grátisfeature-sliced
feature-
O Claude para de espalhar arquivo em pasta aleatória e decide onde cada código mora no seu front-end, seguindo o método FSD.Auditada23,6 mil instalações, grátissliced- design
Mais da loja Callstack Incubator
Ver a loja Callstack IncubatorCallstack Incubator
upgrading-
Atualiza apps React Native para versões novas com os diffs do template, dependências e código nativoOficialAuditada12,7 mil instalações, grátisreact- native github-
Cada PR ou push gera o app de iOS e de Android na nuvem do GitHub, e o Claude baixa os arquivos com um comando, sem build no seu computador.Oficial10,9 mil instalações, grátisactions github
Ensina padrões de GitHub com o gh CLI: pull requests, PRs empilhados, revisão de código, branches e automaçãoOficial8.600 instalações, grátisvalidate-
Valida as skills do repositório contra a especificação do agentskills.io e as boas práticas do Claude CodeOficialAuditada7.300 instalações, grátisskills react-
Migra aos poucos apps nativos de iOS ou Android pra React Native ou Expo com o react-native-brownfieldOficialAuditada5.200 instalações, grátisnative- brownfield- migration react-
Monta telas de navegação com React Navigation: stacks, tabs, drawers, cabeçalhos e bottom sheetsOficialAuditada4.800 instalações, grátisnavigation create-
Cria bibliotecas React Native com o create-react-native-library, avulsas ou como módulos nativos locaisOficialAuditada4.300 instalações, grátisreact- native- library react-
Usa o React DevTools no terminal para depurar app React ou React Native e inspecionar props, state e hooksOficialAuditada2.600 instalações, grátisdevtools react-
Revisa apps React Native para TV: foco com D-pad, layout para tela grande, DRM e performanceOficialAuditada2.300 instalações, grátisnative- tv- best- practices assess-
Avalia se e como migrar um produto mobile existente para React Native, auditando os repositóriosOficialAuditada2.100 instalações, grátisreact- native- migration writing-
Define o estilo da documentação pra usuário: tom, escopo, estrutura e o que deixar de foraOficialAuditada900 instalações, grátisuser- docs rozenite-
Usa a CLI do Rozenite para inspecionar dados do React Native DevTools e plugins de um app rodandoOficial471 instalações, grátisagent