Tanstack Form skill

O que ela faz

Ensina o Claude a usar o TanStack Form, biblioteca de formulários com tipos do TypeScript. A skill mostra o uso no React (pacote @tanstack/react-form); a biblioteca também existe pra Vue, Angular, Solid, Lit e Svelte. Explica como criar o formulário, cada campo e o botão de enviar que só libera quando tudo está válido.

Cobre validação na digitação, ao sair do campo e no envio, checagem assíncrona com espera (esse usuário já existe?), regras com Zod ou Valibot, campo que depende de outro (confirmar senha), listas que crescem e encolhem e erro devolvido pelo servidor no Next.js ou no TanStack Start.

Fecha com dez boas práticas e os erros comuns: esquecer o preventDefault e a página recarregar, não ligar o onBlur, devolver null em vez de undefined, validação assíncrona disparando a cada tecla e assinar o estado inteiro do formulário em vez de só o pedaço que importa.

Nas palavras de quem fez

Quando usar

• Criar um formulário de cadastro ou de captura de lead com validação
• Checar se o e-mail ou o usuário já existe enquanto a pessoa digita
• Fazer um formulário com lista de itens que a pessoa adiciona e remove
• Validar o formulário no servidor do Next.js
• Avisar que há alteração não salva

Depois de instalar, é só pedir assim

• Usa a skill do tanstack-form e faz o cadastro com nome, e-mail, senha e confirmação de senha, validando com Zod
• Checa se o e-mail já está cadastrado enquanto a pessoa digita, esperando meio segundo
• Monta um formulário de pedido em que dá pra adicionar e remover produtos

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