React Hook Form Zod
Implement type-safe React forms with React Hook Form v7 and Zod v4 schemas shared on client and server, including wizards and field arrays.
Overview
react-hook-form-zod is an agent skill for the Build phase that implements type-safe React forms using React Hook Form v7 and Zod v4 with shared client and server schemas.
Install
npx skills add https://github.com/jezweb/claude-skills --skill react-hook-form-zodWhat is this skill?
- Single Zod schema with `z.infer` for end-to-end TypeScript on client and server
- Covers multi-step wizards, useFieldArray, useWatch, useController, and shadcn/ui Form components
- Documents 12 common failure modes (resolver errors, uncontrolled warnings, large-form performance)
- React Hook Form v7 + Zod v4 + `@hookform/resolvers` production-ready patterns
- Auto-triggers on react-hook-form, zodResolver, and validation-schema keywords
- 12 documented issues/errors prevented
- ~60% token savings (documented)
- React Hook Form v7 and Zod v4 target versions
Adoption & trust: 1.2k installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need reliable form validation in React without duplicate types, resolver mismatches, or uncontrolled component warnings breaking submit flows.
Who is it for?
Solo builders on React or Next.js adding signup, settings, checkout, or wizard flows with shadcn-style UI components.
Skip if: Non-React stacks, forms with no schema validation, or projects still on legacy Zod v3 APIs without a planned upgrade path.
When should I use this skill?
Building forms, multi-step wizards, or fixing uncontrolled warnings, resolver errors, useFieldArray issues, or large-form performance with React Hook Form and Zod.
What do I get? / Deliverables
You get working form components, a shared Zod schema, typed handlers, and fixes for common RHF/Zod pitfalls ready to drop into your app or API layer.
- Zod schema shared across client and server
- Typed useForm setup with error handling
- Field array or wizard step patterns integrated with UI components
Recommended Skills
Journey fit
Form UX and validation architecture are core Build work on the frontend before you ship polished flows to users. The skill targets React UI patterns—useForm, resolvers, Controller, useFieldArray—not backend-only API design in isolation.
How it compares
Opinionated form stack recipe (RHF + Zod), not a generic HTML form tutorial or backend-only OpenAPI generator.
Common Questions / FAQ
Who is react-hook-form-zod for?
React and Next.js solo builders who want one Zod schema driving both interactive forms and server validation with full TypeScript inference.
When should I use react-hook-form-zod?
During Build (frontend) when you create or fix forms—multi-step wizards, useFieldArray, zodResolver errors, shadcn Form wiring, or large-form performance issues.
Is react-hook-form-zod safe to install?
Check the Security Audits panel on this Prism page; the skill is documentation-heavy and does not require secrets, but verify dependency versions match your project before applying snippets.
SKILL.md
READMESKILL.md - React Hook Form Zod
{ "name": "react-hook-form-zod", "description": "Build type-safe validated forms using React Hook Form v7 and Zod v4. Single schema works on client and server with full TypeScript inference via z.infer. Use when building forms, multi-step wizards, or fixing uncontrolled warnings, resolver errors, useFieldArray issues, performance problems with large forms.", "version": "1.0.0", "author": { "name": "Jeremy Dawes", "email": "jeremy@jezweb.net" }, "license": "MIT", "repository": "https://github.com/jezweb/claude-skills", "keywords": [] } # React Hook Form + Zod Validation **Status**: Production Ready ✅ **Last Updated**: 2025-11-20 **Production Tested**: Multiple production applications **Token Savings**: ~60% **Errors Prevented**: 12 documented issues --- ## Auto-Trigger Keywords Claude Code automatically discovers this skill when you mention: ### Primary Keywords - react-hook-form - useForm - zod validation - form validation - zodResolver - @hookform/resolvers - rhf - form schema - zod schema - react forms ### Secondary Keywords - register form - handleSubmit - formState errors - form validation react - useFieldArray - useWatch - useController - Controller component - form errors - validation schema - client side validation - server side validation - form error handling - validation errors react ### Framework Integration - shadcn form - shadcn/ui form - Form component shadcn - Field component shadcn - next.js form validation - react form validation - vite form validation ### Zod-Specific - z.object - z.string - z.number - z.array - z.infer - zod refine - zod transform - zod error messages - schema validation ### Error-Based Keywords - "resolver not found" - "zod type inference" - "form validation failed" - "schema validation error" - "useForm types" - "zod infer" - "nested validation" - "array field validation" - "dynamic fields" - "uncontrolled to controlled" - "default values required" - "field not updating" - "resolver is not a function" - "schema parse error" --- ## What This Skill Does This skill provides comprehensive knowledge for building type-safe, validated forms in React using React Hook Form + Zod: - **Complete React Hook Form API** - useForm, register, Controller, useFieldArray, useWatch, useController - **Zod Schema Patterns** - All data types, refinements, transforms, error customization - **shadcn/ui Integration** - Form and Field component patterns - **Client + Server Validation** - Dual validation with single source of truth - **Advanced Patterns** - Dynamic fields, multi-step forms, async validation, nested objects, arrays - **Error Handling** - Accessible error display, custom formatting, server error mapping - **Performance Optimization** - Form modes, validation strategies, re-render optimization - **TypeScript Type Safety** - Full type inference from Zod schemas - **Accessibility** - WCAG compliance, ARIA attributes, keyboard navigation --- ## Known Issues Prevented This skill prevents **12** documented issues: | Issue | Source | Prevention | |-------|--------|------------| | Zod v4 type inference errors | [#13109](https://github.com/react-hook-form/react-hook-form/issues/13109) (Closed) | Correct type patterns for Zod v4; resolved in v7.66.x+ | | Uncontrolled to controlled warning | React docs | Always set defaultValues | | Nested object validation errors | Common issue | Proper error path handling | | Array field re-renders | Performance issue | useFieldArray optimization | | Async validation race conditions | Common pattern | Debouncing and cancellation | | Server error mapping | Integration issue | Error structure alignment | | Default values not applied | Common mistake | Proper initialization | | Controller field not updating | Common issue | Correct render function usage | | useFieldArray key warnings | React warnings | Proper key prop usage | | Schema refinement error paths | Zod behavior | Custom path specification | | Transform vs preprocess confusion |