Tanstack Start skill

O Claude monta o seu app React com TanStack Start do jeito certo: páginas renderizadas no servidor, login nas rotas e deploy onde você hospeda.

por tanstack-skills

instalações: 3.900
estrelas no GitHub: 36
No skills.sh desde: fevereiro de 2026
Licença: MIT

Atualizada no GitHub em 31 de janeiro de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

tanstack-skills
tanstack-start
O Claude monta o seu app React com TanStack Start do jeito certo: páginas renderizadas no servidor, login nas rotas e deploy onde você hospeda.Auditada3.900 instalações, grátis

O que ela faz

Ensina o Claude a trabalhar com o TanStack Start, um framework React completo (front e back no mesmo projeto) construído sobre o TanStack Router e o Vite. Cobre a criação do projeto, a estrutura de pastas com uma rota por arquivo e a configuração no app.config.ts.

Mostra como escrever server functions, funções que rodam no servidor e que a página chama como se fossem locais, com validação dos dados pelo Zod: GET pra buscar, POST pra gravar. Traz middleware pra login e permissão de admin, rotas de API e streaming, que mostra primeiro o essencial e carrega o resto depois.

Na publicação, lista os destinos prontos: servidor Node próprio, Vercel, Netlify, Cloudflare Pages, AWS Lambda, Deno e Bun. Fecha com boas práticas e os erros mais comuns, como importar código de servidor na página ou devolver dado que não dá pra serializar.

Nas palavras de quem fez

Full-stack React framework powered by TanStack Router with SSR, streaming, server functions, and deployment to any hosting provider.

tanstack-skills, no SKILL.md

Quando usar

Começar um app ou SaaS em React com front e back no mesmo projeto
Proteger páginas que só usuário logado ou admin pode abrir
Criar uma rota de API pra receber dados de um formulário ou de outro sistema
Fazer a página carregar mais rápido mostrando primeiro o principal
Publicar o app na Vercel, na Netlify ou na Cloudflare

Depois de instalar, é só pedir assim

Cria um projeto novo com TanStack Start, com página inicial, página de posts e uma rota de API
Coloca um middleware de login: quem não estiver logado vai pra /login
Configura o projeto pra publicar na Vercel

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 Tanstack Start 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 Tanstack Start, 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?

Node.js. O projeto pode nascer do zero com npx @tanstack/cli create ou receber os pacotes à mão (@tanstack/react-start e o plugin do router), com o Vite. Não pede chave de API nem conta paga.

O TanStack Start já está pronto pra produção?

A skill foi escrita na fase RC (release candidate), a etapa antes da versão final, com configuração no app.config.ts e o Vinxi. Versões mais novas mudaram parte disso, então vale pedir pro Claude conferir a documentação oficial antes de seguir os exemplos.

Roda no Codex e no Antigravity?

Sim. É um guia de referência com exemplos de código; qualquer assistente que lê e edita os arquivos do projeto aproveita.

Levar essa skill

1x tanstack-startR$ 0,00

TotalR$ 0,00

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/tanstack-skills/tanstack-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.