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, a failure message, 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)