Spec a small form hook with async checks

Vibe codingMedium25 min

Your task

Your checkout widget runs inside partners' web pages and must stay under 30 KB, so the team writes its own form hook instead of adding a library. The form has an email, a gift card code that the server checks, and a postcode. A coding agent will write useForm in TypeScript.

Write the spec you would hand the agent.

What you know:

  • React 18, TypeScript in strict mode, no new dependencies
  • the gift card check is GET /api/giftcards/:code, and it can take 2 seconds on a slow network
  • a field's error must not show before the user has left that field once, unless they press Pay
  • the Pay button posts { email, giftCard, postcode } once

Then, in a few sentences: what does "make a form hook with validation" get wrong?