This skill provides comprehensive knowledge for building type-safe, validated forms in React using React Hook Form and Zod schema validation. Use when: building forms with validation in React, integrating Zod schema validation with React Hook Form, using shadcn/ui Form or Field components, implementing client and server-side validation with a single schema, handling complex validation scenarios (nested objects, arrays, conditional fields, async validation), building multi-step forms or wizards, implementing dynamic form fields with useFieldArray, optimizing form performance and re-renders, ensuring accessible form error handling, or debugging form validation issues. Keywords: react-hook-form, useForm, zod validation, zodResolver, @hookform/resolvers, form schema, register, handleSubmit, formState, useFieldArray, useWatch, useController, Controller, shadcn form, Field component, client server validation, nested validation, array field validation, dynamic fields, multi-step form, async validation, zod refine, z.infer, form error handling, uncontrolled to controlled, resolver not found, schema validation error
Status: Production Ready ✅ Last Updated: 2025-10-23 Production Tested: Multiple production applications Token Savings: ~60% Errors Prevented: 12 documented issues
Claude Code automatically discovers this skill when you mention:
This skill provides comprehensive knowledge for building type-safe, validated forms in React using React Hook Form + Zod:
This skill prevents 12 documented issues:
| Issue | Source | Prevention | |-------|--------|------------| | Zod v4 type inference errors | #13109 | Correct type patterns for Zod v4 | | 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 | Zod API | Clear usage guidelines | | Multiple resolver conflicts | Configuration error | Single resolver pattern |
✅ Use when:
❌ Don't use when:
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
// 1. Define Zod schema
const formSchema = z.object({
email: z.string().email('Invalid email address'),
password: z.string().min(8, 'Password must be at least 8 characters'),
})
// 2. Infer TypeScript type
type FormData = z.infer<typeof formSchema>
function LoginForm() {
// 3. Setup form with zodResolver
const { register, handleSubmit, formState: { errors } } = useForm<FormData>({
resolver: zodResolver(formSchema),
defaultValues: { email: '', password: '' },
})
// 4. Handle submission
const onSubmit = (data: FormData) => {
console.log('Valid data:', data)
}
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('email')} />
{errors.email && <span>{errors.email.message}</span>}
<input type="password" {...register('password')} />
{errors.password && <span>{errors.password.message}</span>}
<button type="submit">Login</button>
</form>
)
}
Latest Tested Versions (as of 2025-10-23):
Installation:
npm install react-hook-form@7.65.0 zod@4.1.12 @hookform/resolvers@5.2.2
Manual Setup (without skill):
With Skill:
Savings: ~60% (6,000 tokens saved)
This skill has been tested in:
Found an issue or have a suggestion? Open an issue at: https://github.com/jezweb/claude-skills/issues
License: MIT Maintainer: Jeremy Dawes (jeremy@jezweb.net) Repository: https://github.com/jezweb/claude-skills
npx skills add jackspace/react-hook-form-zod下载完整 Skill 目录，包含 SKILL.md 及所有相关文件
Search for places (restaurants, cafes, etc.) via Google Places API proxy on localhost.
Interact with GitHub using the `gh` CLI. Use `gh issue`, `gh pr`, `gh run`, and `gh api` for issues, PRs, CI runs, and advanced queries.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Start voice calls via the OpenClaw voice-call plugin.
Notion API for creating and managing pages, databases, and blocks.
Gemini CLI for one-shot Q&A, summaries, and generation.
Category:developer