React Hook Form Zod
Ship type-safe React forms with one Zod schema shared on client and server, including shadcn/ui and dynamic field arrays.
Overview
react-hook-form-zod is an agent skill for the Build phase that builds type-safe React forms using React Hook Form and Zod with shared client-server schemas.
Install
npx skills add https://github.com/ovachiever/droid-tings --skill react-hook-form-zodWhat is this skill?
- Single Zod schema with z.infer for DRY client and server validation
- Production-ready patterns for shadcn/ui Form, useFieldArray, and multi-step wizards
- Documents 12 common resolver, async validation, and controlled/uncontrolled pitfalls
- ~60% token savings called out versus ad-hoc form debugging in chat
- Covers useWatch, useController, Controller, and structured formState error handling
- 12 documented issues prevented
Adoption & trust: 557 installs on skills.sh; 44 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You need validated React forms but keep hitting resolver errors, duplicate validation logic, or uncontrolled field warnings across client and server.
Who is it for?
React SaaS UIs using shadcn/ui or similar component libraries that need multi-step or field-array forms with strict typing.
Skip if: Non-React stacks, forms with zero validation, or projects that already standardize on a different form library with locked team conventions.
When should I use this skill?
Building forms with validation, shadcn/ui Form, multi-step wizards, useFieldArray, or fixing resolver and uncontrolled field errors.
What do I get? / Deliverables
You get working forms with inferred TypeScript types, consistent Zod rules end-to-end, and shadcn-compatible patterns without re-debugging the same twelve issues.
- Validated form implementation with shared Zod schema
- Typed form models via z.infer
- Resolved client-side error handling patterns
Recommended Skills
Journey fit
How it compares
Skill package for RHF+Zod wiring and fixes—not an MCP server or a hosted form backend.
Common Questions / FAQ
Who is react-hook-form-zod for?
Solo and indie React developers shipping production forms who want Zod-driven validation and shadcn/ui integration without trial-and-error resolver setup.
When should I use react-hook-form-zod?
During Build on frontend surfaces when adding registration flows, settings forms, wizards, dynamic lists, or when fixing validation and controlled-component warnings.
Is react-hook-form-zod safe to install?
It guides client-side patterns only; review the Security Audits panel on this page and treat any copied dependencies like any third-party npm package.
SKILL.md
READMESKILL.md - React Hook Form Zod
{ "name": "react-hook-form-zod", "description": "Build type-safe validated forms in React using React Hook Form and Zod schema validation. Single schema works on both client and server for DRY validation with full TypeScript type inference via z.infer. Use when: building forms with validation, integrating shadcn/ui Form components, implementing multi-step wizards, handling dynamic field arrays with useFieldArray, or fixing uncontrolled to controlled warnings, resolver errors, async validation issues.", "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 war