React Form Patterns

Standard stack: React Hook Form + Zod. Keep schema and UI behavior aligned.

Use This Skill When

• Building new forms with validation.
• Refactoring unstable form state logic.
• Implementing multi-step, dynamic, or async-validated forms.

Core Contract

1. Keep schema as source of truth (Zod).
2. Use typed form values inferred from schema.
3. Validate at client and server boundaries.
4. Separate field rendering from submit side effects.
5. Keep form loading/error states explicit.

Implementation Workflow