Prepared Docs

Quick Reference

Use @prepared911/ui-forms + Zod:

useZodForm for typed, schema-driven validation (onBlur by default)
Form* wrappers instead of manual register + error wiring
Exported schema builders (emailSchema, phoneSchema, …) for common masked fields
Localized validation: build the schema with formatMessage so each Zod message is already translated

Avoid:

New forms built with raw register and manual errors.field?.message
Raw English strings or i18n keys as Zod message values (only ui-forms.schema.* keys are resolved for you)
Mixing FormInput and register on the same field
Browser-native validation (Form sets noValidate by default)

Design guidance, shell selection, and field maps live in Forms (Blocks).

Basic form

With Prepared patterns

Wire GraphQL mutations, logging, and reset on success:

Shared schemas

Share Zod schemas between client and server:

Sectioned forms

Settings autosave

SettingsRow reads useFormContext — wrap rows in Form (not a submit shell):

Dynamic form fields

Use useFieldArray with FormInput and explicit control:

Async validation

Debounced field submit

Multi-step forms

Keep separate useZodForm instances per step or merge schemas at the final submit. Store partial data in component state between steps; reset each step form with defaultValues from accumulated data.

File uploads

Testing forms

Forms (Blocks) — design usage, shells, and field map
Forms API — props, previews, and schema builders
State Management — form state with contextual stores
Writing Hooks — custom hooks for form logic
Unit Testing — RTL patterns

Reference Files

react-forms SKILL.md — foundational RHF + Zod patterns; prefer ui-forms wrappers for new work
Package README: turbo/packages/ui-forms/README.md

Working on features / Making a Feature

Working on features / Writing Hooks

Quick Reference

Basic form

With Prepared patterns

Shared schemas

Modal and drawer forms

Debounced field submit

Multi-step forms

File uploads

Testing forms

Quick Reference

Use @prepared911/ui-forms + Zod:

useZodForm for typed, schema-driven validation (onBlur by default)
Form* wrappers instead of manual register + error wiring
Exported schema builders (emailSchema, phoneSchema, …) for common masked fields
Localized validation: build the schema with formatMessage so each Zod message is already translated

Avoid:

New forms built with raw register and manual errors.field?.message
Raw English strings or i18n keys as Zod message values (only ui-forms.schema.* keys are resolved for you)
Mixing FormInput and register on the same field
Browser-native validation (Form sets noValidate by default)