Better Forms

Formulário é conversa: pergunta, erro, sucesso. Não é o wrapper (RHF, Conform). Schema na borda: typescript-strict. Mutação Next: nextjs-server-actions. Tokens/estados: better-web-interface. Identidade: frontend-design.

Preserve a lib do repo. Esta skill é UX + HTML, não “instale RHF”.

Regras inegociáveis

• <label> visível ligado ao controle (for / wrap). Placeholder não é label.
• Erro junto ao campo + aria-invalid + aria-describedby (erro e ajuda). Um resumo no topo só se o form for longo.
• Um submit primário. Verbo (“Enviar mensagem”, “Salvar”). Pending: disable duplo-submit, texto/spinner no botão.
• autocomplete correto (email, name, current-password, street-address). inputmode em tel/número.
• Ordem de tab = ordem visual. Enter submete o form focado, não um botão secundário escondido.
• Validação: schema único (Zod etc.) no client e no server. Não só required no HTML.

Anatomia