Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Vercel React Best Practices skill
O agente escreve e revisa seu código React e Next.js seguindo 70 regras de desempenho da Vercel, das que mais pesam às de detalhe.
- instalações
- 838,7 mil
- estrelas no GitHub
- 33 mil
- No skills.sh desde
- janeiro de 2026
- Licença
- Sem licença declarada
Atualizada no GitHub em 14 de outubro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.
O que ela faz
A vercel-react-best-practices é o guia de desempenho que a engenharia da Vercel mantém pra React e Next.js. São 70 regras em 8 grupos, em ordem de impacto, que o agente consulta quando escreve um componente, busca dados, revisa ou refatora código.
As que mais pesam atacam a espera em cadeia (chamadas que podiam rodar juntas e rodam uma depois da outra) e o tamanho do pacote que o navegador baixa. Depois vêm servidor, busca de dados no navegador, re-render desnecessário, renderização, JavaScript e padrões avançados.
Cada regra tem um arquivo próprio com o porquê, um exemplo errado e o certo. Exemplos: usar Promise.all em chamadas independentes, importar direto do arquivo em vez de passar por um arquivo-índice, carregar ferramentas de análise só depois que a página abriu.
Nas palavras de quem fez
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
Quando usar
- Seu site em Next.js demora pra abrir e você quer saber por quê
- Revisar um código React antes de publicar
- Criar páginas novas no Next.js já do jeito certo
- Cortar o JavaScript que a página manda pro navegador
- A tela trava ao digitar ou rolar por excesso de re-render
Depois de instalar, é só pedir assim
- Revisa a página inicial do meu Next.js pelas regras de desempenho da Vercel e me lista o que corrigir primeiro
- Essa página demora pra carregar: acha as chamadas que estão esperando uma pela outra e põe pra rodar juntas
- Diminui o JavaScript que a página de produto manda pro navegador, sem mudar o visual
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 Vercel React 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 Vercel React 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.
Precisa ter conta na Vercel?
Não. As regras são sobre o código React e Next.js, não sobre a hospedagem. Não pede chave de API nem conta paga.
Serve pra site que não é em React?
Não é pra isso. As regras são de React e Next.js; num site em WordPress ou em outro framework, sobram só algumas dicas de JavaScript.
Roda no Codex e no Antigravity?
Roda. São um SKILL.md e arquivos de regras em texto, que esses agentes também leem.
Levar essa skill
1x vercel-react-best-practicesR$ 0,00
TotalR$ 0,00
Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/vercel-labs/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 corredorVercel Labs
vercel-
O Claude para de empilhar props como isEditing e isThread e monta componentes que se combinam, mais fáceis de manter por gente e por IA.OficialAuditada418,1 mil instalações, grátiscomposition- patterns leonxlnx
image-
O agente desenha cada seção do site em imagem, lê a fonte, o espaço, a cor e os botões dela e só então escreve o código, fiel ao que desenhou.385,9 mil instalações, grátisto- code vercel-
O Claude escreve e revisa seu app em React Native ou Expo seguindo regras que deixam lista, animação e navegação fluidas no celular.OficialAuditada254,5 mil instalações, grátisreact- native- skills emilkowalski
animate-
O Claude escreve a animação do seu app Expo decidindo antes se ela deve existir, e entrega código pensado pra rodar liso até em Android antigo.Auditada137,5 mil instalações, grátisexpo Anthropic
web-
O Claude cria uma interface com vários componentes, estado e navegação e entrega tudo num arquivo HTML só, sem servidor pra configurar.Oficial112,6 mil instalações, grátisartifacts- builder Cloudflare
web-
O Claude grava o carregamento real da página, mede LCP, CLS e a resposta do servidor e diz exatamente o que corrigir, com o ganho estimado de cada mudança.Oficial110 mil instalações, grátisperf Google Labs
stitch-
O Claude gera cada página no Stitch, encaixa no site com a navegação ligada e deixa escrito qual é a próxima, pro ciclo continuar.OficialAuditada56,4 mil instalações, grátisloop vuejs-ai
vue-
Componentes Vue com estado previsível e cada parte cuidando de uma coisa, num código que outra pessoa, ou o próprio Claude, entende e altera depois.Auditada42,8 mil instalações, grátisbest- practices
Mais da loja Vercel Labs
Ver a loja Vercel Labsfind-
Em vez de fazer tudo do zero, o Claude acha uma skill já testada pra tarefa, mostra de onde ela vem e instala com um comando.Oficial4 milhões de instalações, grátisskills agent-
O Claude abre o Chrome, navega, clica, preenche e testa o seu site sozinho, e você recebe os prints e os dados no fim.Oficial1,2 milhão de instalações, grátisbrowser web-
Você aponta os arquivos do site e recebe a lista do que fere as boas práticas de interface, com o arquivo e a linha de cada problema.Oficial784,3 mil instalações, grátisdesign- guidelines deploy-
Você pede pra pôr o projeto no ar e recebe o link da Vercel; se o projeto tem Git, fica ligado pra cada push publicar de novo sozinho.Oficial169,7 mil instalações, grátisto- vercel vercel-
Cria animações nativas entre estados da interface com a View Transition API do ReactOficialAuditada167,6 mil instalações, grátisreact- view- transitions vercel-
Publica e gerencia projetos na Vercel pela CLI usando token de acesso, sem login interativoOficial135,8 mil instalações, grátiscli- with- tokens vercel-
O Claude lê as métricas de produção do seu projeto na Vercel e devolve recomendações em ordem pra baixar a conta e acelerar as rotas que pesam.OficialAuditada110,6 mil instalações, grátisoptimize writing-
O Claude lê seus textos de documentação e devolve a lista do que fere o guia de escrita da Vercel, linha por linha.Oficial106,4 mil instalações, grátisguidelines Vercel Labs
ai-
O Claude coloca chat, agente ou geração de texto no seu app conferindo a documentação da versão instalada, em vez de chutar de memória.Oficial66,1 mil instalações, grátissdk react
Renderiza specs em JSON como árvores de componentes React com o @json-render/reactOficialAuditada16,3 mil instalações, grátiscore
Define schemas, catálogos e geração de prompts de IA pro json-render com o @json-render/coreOficialAuditada15 mil instalações, grátiscodegen
Gera código a partir de specs de UI do json-render, com exportadores próprios e serialização de propsOficialAuditada8.900 instalações, grátis