React Hook Form Zod

This combines React Hook Form and Zod into a single validation pattern that works on both client and server. You define your schema once with Zod, get full TypeScript inference with z.infer, and wire it up with zodResolver. It's production ready with the latest versions and covers the common pain points: uncontrolled input warnings, multi-step forms, dynamic field arrays with useFieldArray, and async validation. The real win is DRY validation across your stack. Same schema validates the form in the browser and the API request on your server, so you're not writing validation logic twice or keeping two sets of rules in sync.

skills.sh installs: 724
GitHub stars: 56
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add ovachiever/droid-tings --skill react-hook-form-zod --agent claude-code

Installs into .claude/skills of the current project.

Files

React Hook Form + Zod Validation

Status: Production Ready ✅ Last Updated: 2025-11-20 Dependencies: None (standalone) Latest Versions: react-hook-form@7.66.1, zod@4.1.12, @hookform/resolvers@5.2.2

Quick Start (10 Minutes)

1. Install Packages

npm install react-hook-form@7.66.1 zod@4.1.12 @hookform/resolvers@5.2.2

Why These Packages:

react-hook-form: Performant, flexible form library with minimal re-renders
zod: TypeScript-first schema validation with type inference
@hookform/resolvers: Adapter to connect Zod (and other validators) to React Hook Form

2. Create Your First Form

import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'

// 1. Define validation schema
const loginSchema = 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 from schema
type LoginFormData = z.infer<typeof loginSchema>

SKILL.md on GitHub