What is react-hook-form-zod?

A guide for building React forms with React Hook Form and Zod, including shared client-and-server validation and TypeScript types.

Use it for validated forms, multi-step wizards, dynamic field lists, server checks, and large forms written in TypeScript.

It helps prevent invalid data, mismatched validation rules, uncontrolled-field warnings, and common complex-form errors.

react-hook-form-zod — Skill for Claude Code and Codex by fellipeutaka

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add fellipeutaka/leon --skill react-hook-form-zod

Clone the repo

git clone --depth 1 https://github.com/fellipeutaka/leon

Made for: Claude Code, Codex.

Or install react-hook-form-zod, the plugin that ships this one along with the rest of its 1 skill.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/fellipeutaka/leon/react-hook-form-zod/github.svg)](https://agentmods.dev/skills/fellipeutaka/leon/react-hook-form-zod)

Your own site

<a href="https://agentmods.dev/skills/fellipeutaka/leon/react-hook-form-zod"><img src="https://agentmods.dev/badge/skills/fellipeutaka/leon/react-hook-form-zod/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/fellipeutaka/leon/react-hook-form-zod"><img src="https://agentmods.dev/badge/skills/fellipeutaka/leon/react-hook-form-zod.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 69 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 3,904 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00069	$0.03904
Opus 5.5	$0.00028	$0.01562
Sonnet 5.5	$0.00014	$0.00781
Haiku 4.5	$0.00007	$0.00390

Measured 2mo ago against content hash 7daa0078e915, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

react-hook-form-zod scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

The scan reads SKILL.md. This mod also ships 2 executable files (scripts/check-versions.sh, templates/server-validation.ts), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/react-hook-form-zod/SKILL.md · 418 lines

How it starts

The opening of the file, as written. The whole thing — 418 lines — stays where its author put it; the contents beside it link to each section on GitHub.

React Hook Form + Zod Validation

Status: Production Ready ✅ Last Verified: 2026-01-20 Latest Versions: [email protected], [email protected], @hookform/[email protected]

Quick Start

npm install [email protected] [email protected] @hookform/[email protected]

Basic Form Pattern:

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

// zodResolver infers types — no need for z.infer<typeof schema> on useForm
const form = useForm({
  resolver: zodResolver(schema),
  defaultValues: { email: '', password: '' }, // REQUIRED to prevent uncontrolled warnings
})

const onSubmit = form.handleSubmit((value) => {
  console.log(value)
})

<form onSubmit={onSubmit}>
  <input {...form.register('email')} />
  {form.formState.errors.email && <span role="alert">{form.formState.errors.email.message}</span>}
</form>

Server Validation (CRITICAL - never skip):

// SAME schema on server
const data = schema.parse(await req.json())

Key Patterns

useForm Options (validation modes):

mode: 'onSubmit' (default) - Best performance
mode: 'onBlur' - Good balance
mode: 'onChange' - Live feedback, more re-renders
shouldUnregister: true - Remove field data when unmounted (use for multi-step forms)

Zod Refinements (cross-field validation):

z.object({ password: z.string(), confirm: z.string() })
  .refine((data) => data.password === data.confirm, {
    message: "Passwords don't match",
    path: ['confirm'], // CRITICAL: Error appears on this field
  })

Zod Transforms:

z.string().transform((val) => val.toLowerCase()) // Data manipulation
z.string().transform(parseInt).refine((v) => v > 0) // Chain with refine

Zod v4.3.0+ Features:

// Exact optional (can omit field, but NOT undefined)
z.string().exactOptional()

// Exclusive union (exactly one must match)
z.xor([z.string(), z.number()])

// Import from JSON Schema
z.fromJSONSchema({ type: "object", properties: { name: { type: "string" } } })

Read the full file on GitHub · 418 lines

Files

What ships with it

21 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 418 lines · 69 tokens per session scan A 7daa0078e915

Subscribe to this mod's changes

react-hook-form-zod is a skill published in the GitHub repository fellipeutaka/leon (5 stars, last pushed yesterday), licensed MIT. It adds 69 tokens to every session and 3,904 once invoked, about $0.0003 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Frontend Languages React TypeScript

react-hook-form-zod next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
react-hook-form-zodfellipeutaka/leon	Skill	5	yesterday	MIT	A	69	Claude Code, Codex
custom-featuresTanStack/table	Skill	29k	4d ago	MIT	A	35	Claude Code, Codex
fast-typescript-checkinternet-development/www-sacred	Skill	1.6k	2d ago	MIT	A	84	Claude Code, Codex
port-sacred-terminal-ui-to-typescript-cliinternet-development/www-sacred	Skill	1.6k	2d ago	MIT	A	0	Claude Code, Codex
adding-personhog-rpcPostHog/posthog	Skill	41k	yesterday	none	A	88	Claude Code, Codex
splitting-oversized-modulesPostHog/posthog	Skill	41k	yesterday	none	A	197	Claude Code, Codex
writing-dataclassesPostHog/posthog	Skill	41k	yesterday	none	A	157	Claude Code, Codex