What this prompt does
This prompt casts the AI as an expert in React forms and asks it to build a reusable, type-safe form library for a [project_type] app using React Hook Form and Zod. It sets up a generic FormProvider in [components_directory] that accepts a Zod schema as a type parameter and infers all field types automatically, supporting [form_mode] validation. That inference is what makes the library type-safe end to end instead of forcing you to hand-write field types per form.
The structure works because forms are repetitive in predictable ways. It builds [field_count] reusable field components wired to form context and styled with [ui_library], a Zod schema library of composable validators (email, password with [password_min_length], phone, URL, currency, date ranges), a useMultiStepForm hook validating each step with partial schemas across [step_count] steps, and server-error mapping that takes [api_format] responses and routes them to fields via setError. A testing utility renders any form with a mock provider. Each field component connects to the form context automatically, displays Zod validation errors, and handles disabled and loading states, so you compose forms from building blocks instead of wiring validation by hand each time. The validators are written as composable Zod refinements — email, password with [password_min_length], phone, URL, currency, date ranges — that combine into form-specific schemas, and choosing [form_mode] controls whether validation runs on blur, on change, or on submit.
When to use it
- You are tired of hand-rolling validation for every form in a project
- You want field types inferred automatically from a Zod schema
- You need a set of reusable, context-connected field components
- You build multi-step forms and want per-step partial-schema validation
- You need server errors mapped back to specific form fields
- You want a testing utility for form components with a mock provider
Example output
The AI returns a generic FormProvider in [components_directory] that infers field types from a Zod schema with [form_mode] validation, [field_count] reusable field components styled with [ui_library], a Zod validator library covering email, password (min [password_min_length]), phone, URL, currency, and date ranges, a useMultiStepForm hook validating [step_count] steps with partial schemas and a progress indicator, server-error mapping from [api_format] responses via setError, and a testing utility with helpers for filling fields and asserting errors.
Pro tips
- Let the Zod resolver infer field types from one schema — duplicating types by hand is exactly what this library removes
- Build validators as composable Zod refinements so form-specific schemas combine them instead of repeating rules
- Use partial schemas per step in
useMultiStepFormso each step validates independently before advancing - Map
[api_format]server errors to fields with setError so backend validation surfaces inline, not as a toast - Pick
[form_mode]deliberately; onBlur feels responsive without the noise of validating on every keystroke - Cover your most complex form with the testing utility first — that is where validation regressions usually hide
