Trechos do capítulo "Formulários, validação e busca de dados"
alexandrecaramaschi.com/educacao/frontends-com-vibecoding

Dois pedidos prontos para colar no agente: um formulário de cadastro acessível
e uma lista que trata os quatro estados de uma busca de dados. A página explica
o que cada exigência evita; aqui está o material bruto.

================================================================================

### O que faz: pede um formulário de cadastro com validação e acessibilidade como requisito, não como detalhe
### Onde entra: conversa com o agente, ao criar qualquer formulário do produto
### Cuidado: validação no cliente não substitui a do servidor; o mesmo esquema precisa ser reaplicado do outro lado

Prompt para o agente (use como modelo):

Crie um componente FormCadastro em React 19 + TypeScript + Tailwind v4.

Validação:
- Use react-hook-form com @hookform/resolvers/zod e um schema Zod em arquivo
  separado (cadastro.schema.ts). O TIPO do form deve sair de z.infer do schema.
- Campos: nome (min 2), email, senha (min 8), telefone (só dígitos, 10-11),
  checkbox "aceito os termos" obrigatório.
- mode: 'onTouched'.

Acessibilidade (obrigatório, não opcional):
- Cada input tem <label htmlFor> ligado por id.
- No erro: aria-invalid="true", aria-describedby apontando para o <p> da mensagem,
  e o <p> com role="alert".
- Ao submeter com erros, mova o foco para o PRIMEIRO campo inválido.
- O erro NUNCA é sinalizado só por cor: sempre há texto da mensagem.

Estados:
- Botão desabilitado com texto 'Enviando…' enquanto isSubmitting.
- Estado de sucesso (mensagem com role="status") e de erro de servidor.

NÃO confie só no cliente: deixe um comentário marcando onde a mesma validação
Zod será reaplicada no servidor (Server Action).

================================================================================

### O que faz: pede uma lista que trata explicitamente carregando, erro, vazio e sucesso
### Onde entra: qualquer tela que busca dados de uma API
### Cuidado: sem o estado vazio declarado, a tela sem itens vira uma página em branco sem explicação

Crie um componente React 19 + TypeScript + Tailwind chamado ListaPedidos que
busca pedidos de uma API e trata EXPLICITAMENTE os quatro estados:

1. Carregando: um skeleton com motion-safe:animate-pulse (3 linhas cinza).
2. Erro: um bloco com role="alert", a mensagem do erro e um botão
   "Tentar de novo" que refaz a busca. Trate erro de rede e status != 2xx.
3. Vazio: quando a lista vier sem itens, mostre um texto explicativo
   ("Nenhum pedido ainda") em vez de uma tela em branco.
4. Sucesso: a lista, com key vinda do id (nunca do índice).

Use TanStack Query v5 (useQuery). VALIDE a resposta com um schema Zod antes
de usar; não confie no formato. Aplique timeout de 8s e retry de até 2x para
erros de rede. Contraste AA em todos os textos e foco visível no botão.