Claude Code
com o Claudinho
O Claude no terminal: o que o Vagner usa nos vídeos.
Tanstack Router skill
O Claude monta as rotas do seu app React com o TanStack Router evitando os erros comuns de tipo, dado velho na tela e página protegida piscando.
- instalações
- 4.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.
O que ela faz
É um guia do TanStack Router, o roteador com tipagem completa do TypeScript pra apps React (e também Solid), que é a base do TanStack Start. Com ele, o Claude monta rotas por arquivo com o plugin do Vite, na convenção de nomes: parâmetro com $, layout que não aparece na URL com _ e grupos entre parênteses.
Cobre carregamento de dados na rota com loaders, dados lentos chegando depois, search params validados com Zod, links e navegação tipados, redirecionamento, bloqueio de saída, divisão de código, pré-carregamento, rotas com login, página 404, título da página e integração com o TanStack Query.
Fecha com os erros comuns: esquecer de registrar o tipo do roteador; não pôr no loaderDeps os search params que o loader usa, o que deixa dado velho na tela; checar login no componente e não no beforeLoad, o que mostra a tela protegida por um instante; e buscar dados com useEffect em vez do loader.
Nas palavras de quem fez
Type-safe routing for React and Solid applications with first-class search params, data loading, and seamless integration with the React ecosystem.
Quando usar
- Começar um app React com Vite e rotas por arquivo
- Guardar filtros e paginação na URL com search params validados
- Proteger as páginas que só quem fez login pode ver
- Carregar os dados antes de a página abrir
- Corrigir lista que não atualiza quando muda o filtro na URL
Depois de instalar, é só pedir assim
- Configura o TanStack Router com rotas por arquivo nesse app Vite e cria as páginas início, preços e contato
- Protege tudo que está em /painel pra só quem fez login entrar, mandando o resto pro /login
- Põe o filtro e a página da lista de produtos na URL, validados com Zod
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 Router 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 Router, 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 com Node.js, onde o Claude instala o @tanstack/react-router e, pra rotas por arquivo, o plugin do Vite ou a CLI do router. Os exemplos da skill são todos em React. Tudo de código aberto, sem chave de API nem conta paga.
Roda no Codex e no Antigravity?
Roda. A skill é só texto com a documentação e os exemplos, então qualquer agente que leia skills e edite código aproveita.
Ela monta o backend do app?
Não. Ela cobre rotas, navegação e carregamento de dados no front. A parte de servidor fica com o TanStack Start, o framework completo que usa esse router por baixo.
Levar essa skill
1x tanstack-routerR$ 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.
Na mesma prateleira
Ver as 1.731 skills do corredordimillian
swiftui-
O Claude põe o visual de vidro do iOS 26 nas telas do seu app em SwiftUI do jeito que a Apple recomenda, sem quebrar em iPhone com sistema antigo.Auditada5.400 instalações, grátisliquid- glass dpearson2699
swiftui-
As telas do seu app em SwiftUI ganham movimento com a API certa pra cada caso, respeitando quem liga o Reduzir Movimento no iPhone.Auditada5.400 instalações, grátisanimation tanstack-skills
tanstack-
O Claude monta a tabela do seu sistema com filtro, ordenação, paginação e seleção de linhas, sem engessar o visual que você já tem.Auditada5.400 instalações, grátistable callstack
ios-
O Claude abre o app no simulador de iPhone, mexe na tela como uma pessoa e confere se a mudança no código funcionou de verdade.Auditada5.100 instalações, grátissimulator oso95
scroll-
Quem rola a página voa por dentro do seu negócio, cena por cena, num voo de câmera contínuo, como nas páginas de produto da Apple.4.800 instalações, grátisworld swiftui-
Tela que engasga na rolagem ou demora a abrir vira uma lista de causas, correções no código e números de antes e depois que provam a melhora.Auditada4.600 instalações, grátisperformance app-
Você descobre antes da Apple o que pode reprovar o app e chega à revisão com privacidade, pagamento e descrição batendo com o que o app faz.4.500 instalações, grátisstore- review superwall
superwall
Paywall do app integrado, assinaturas criadas na Apple e números de receita consultados sem ficar pulando entre painéis.4.500 instalações, grátis
Mais da loja tanstack-skills
Ver a loja tanstack-skillstanstack-
O Claude monta a busca e o cache de dados do seu app React com TanStack Query v5, com recarga, paginação e atualização otimista no lugar certo.Auditada9.900 instalações, grátisquery tanstack-
O Claude monta cadastro, checkout e formulário de lead que validam cada campo enquanto a pessoa digita e só deixam enviar quando está tudo certo.Auditada4.300 instalações, grátisform tanstack-
Oferece debounce, throttle, limite de taxa, fila e lote independentes de framework com o TanStack PacerAuditada3.900 instalações, grátispacer tanstack-
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átisstart tanstack-
Cria listas grandes virtualizadas a 60 fps em TS/JS, React, Vue, Solid, Svelte, Lit e AngularAuditada2.500 instalações, grátisvirtual tanstack-
Configura o painel de devtools extensível do TanStack para Query, Router e outras bibliotecasAuditada2.300 instalações, grátisdevtools tanstack-
Usa o TanStack Store, armazenamento reativo com adaptadores para React, Vue, Solid, Angular e SvelteAuditada1.800 instalações, grátisstore tanstack-
Cria projetos TanStack Start pela CLI, com mais de 30 integrações, templates próprios e servidor MCPAuditada1.700 instalações, grátiscli tanstack-
O Claude monta chat, resposta em streaming, ferramentas com aprovação e saída estruturada no seu app, trocando de provedor de IA sem reescrever o código.Auditada1.600 instalações, grátisai tanstack-
Configura build, ESLint e publicação com versionamento semântico para pacotes JavaScript e TypeScriptAuditada1.500 instalações, grátisconfig tanstack-
Fornece utilitários sem estilo pra sliders de intervalo em React, Vue, Solid, Svelte e AngularAuditada1.300 instalações, grátisranger