
// Agentes e skills //
Boas práticas de Next.js
roda no Claude Code
Uma skill para o Claude Code que faz o Claude montar, ou revisar, um aplicativo Next.js do jeito que aguenta produção. Serve a quem está começando um projeto e a quem já tem um no ar e desconfia do que construiu. O Claude escreve o código e os testes; colar segredo no painel da hospedagem e refazer o deploy de produção é seu. A regra central: cada decisão sai da memória de quem programa e vai para um lugar que falha sozinho. Componente é de servidor até precisar ser de cliente, toda ação começa pela guarda, o cache compartilhado só guarda o que qualquer visitante pode ver, e o que depende da requisição fica atrás de Suspense. Ela começa lendo a versão do Next e o projeto, e descobre por onde entrar: tudo é componente de cliente, ação sem guarda, dado antigo no ar ("publiquei e não apareceu"), build que pede Suspense, rota frágil ou "posso subir?". O que ela entrega: leitura em módulo só de servidor e mutação em ação de servidor, com regra pura testada ao lado; cache público com etiquetas, a tabela de prazos por perfil e a diferença entre expirar numa ação e revalidar numa rota; o caso da escrita feita por fora do site (um script que grava direto no banco), com a rota de revalidação que resolve; dado dinâmico e Suspense, com a tabela de sintomas do build; navegação com links tipados, filtros na URL e os três estados de toda rota (carregamento, vazio e erro); rota ou ação, webhook que só repassa o corpo cru, proxy que só renova a sessão e variáveis públicas separadas dos segredos. Vêm seis fichas de consulta, sete moldes em TypeScript e um conferidor, o conferir.py, que só lê o projeto e acusa componente de cliente importando módulo de servidor, ação sem guarda, função em cache que lê cookie, página sem carregamento ou sem erro e segredo lido fora do módulo indicado. Limites: cobre o App Router; Pages Router, React sem Next e React Native ficam de fora. Os fatos sobre a API foram conferidos na documentação instalada do Next 16.4.0, com Cache Components ligado; cache, proxy e tela de erro mudaram entre as versões 14, 15 e 16, e a skill manda o Claude conferir na versão do seu projeto antes de copiar. Sem Cache Components, as partes de cache e de Suspense seguem outro modelo. Os moldes passaram no verificador de tipos contra o Next 16.4 e o teste de fronteira rodou em Vitest, mas nenhum molde foi executado num build nem num servidor: o teste final é no seu projeto. O que as fichas marcam como "a conferir" não foi verificado, e o molde de webhook usa HMAC-SHA256, enquanto o formato real é de cada serviço. O conferidor lê texto, não segue a cadeia de imports e pode dar falso alarme; não achar não prova que não há. Para banco e login, use a skill irmã app-com-supabase; para pagamento, assinatura-com-stripe. Requisitos: Python 3.8 ou mais novo, só para o conferidor, que usa só a biblioteca padrão, não acessa a rede, não abre arquivos .env e nunca imprime o valor de uma variável. Para instalar, descompacte o .zip em ~/.claude/skills/.
- Roda no Claude Code
- Intermediário
Uma skill para o Claude Code que faz o Claude montar, ou revisar, um aplicativo Next.js do jeito que aguenta produção. Serve a quem está começando um projeto e a quem já tem um no ar e desconfia do que construiu. O Claude escreve o código e os testes; colar segredo no painel da hospedagem e refazer o deploy de produção é seu. A regra central: cada decisão sai da memória de quem programa e vai para um lugar que falha sozinho. Componente é de servidor até precisar ser de cliente, toda ação começa pela guarda, o cache compartilhado só guarda o que qualquer visitante pode ver, e o que depende da requisição fica atrás de Suspense. Ela começa lendo a versão do Next e o projeto, e descobre por onde entrar: tudo é componente de cliente, ação sem guarda, dado antigo no ar ("publiquei e não apareceu"), build que pede Suspense, rota frágil ou "posso subir?". O que ela entrega: leitura em módulo só de servidor e mutação em ação de servidor, com regra pura testada ao lado; cache público com etiquetas, a tabela de prazos por perfil e a diferença entre expirar numa ação e revalidar numa rota; o caso da escrita feita por fora do site (um script que grava direto no banco), com a rota de revalidação que resolve; dado dinâmico e Suspense, com a tabela de sintomas do build; navegação com links tipados, filtros na URL e os três estados de toda rota (carregamento, vazio e erro); rota ou ação, webhook que só repassa o corpo cru, proxy que só renova a sessão e variáveis públicas separadas dos segredos. Vêm seis fichas de consulta, sete moldes em TypeScript e um conferidor, o conferir.py, que só lê o projeto e acusa componente de cliente importando módulo de servidor, ação sem guarda, função em cache que lê cookie, página sem carregamento ou sem erro e segredo lido fora do módulo indicado. Limites: cobre o App Router; Pages Router, React sem Next e React Native ficam de fora. Os fatos sobre a API foram conferidos na documentação instalada do Next 16.4.0, com Cache Components ligado; cache, proxy e tela de erro mudaram entre as versões 14, 15 e 16, e a skill manda o Claude conferir na versão do seu projeto antes de copiar. Sem Cache Components, as partes de cache e de Suspense seguem outro modelo. Os moldes passaram no verificador de tipos contra o Next 16.4 e o teste de fronteira rodou em Vitest, mas nenhum molde foi executado num build nem num servidor: o teste final é no seu projeto. O que as fichas marcam como "a conferir" não foi verificado, e o molde de webhook usa HMAC-SHA256, enquanto o formato real é de cada serviço. O conferidor lê texto, não segue a cadeia de imports e pode dar falso alarme; não achar não prova que não há. Para banco e login, use a skill irmã app-com-supabase; para pagamento, assinatura-com-stripe. Requisitos: Python 3.8 ou mais novo, só para o conferidor, que usa só a biblioteca padrão, não acessa a rede, não abre arquivos .env e nunca imprime o valor de uma variável. Para instalar, descompacte o .zip em ~/.claude/skills/.
Como usar
01
Copie o prompt
Use o botão Copiar prompt aqui na página.
02
Cole na sua IA
Abra o Claude Code na pasta do projeto e cole o prompt.
03
Instale a skill baixada
Instale o arquivo baixado no Claude e chame a skill em qualquer conversa.
Vem no pacote
- Prompt pra copiar e colar
- Skill em .zip pra instalar no Claude