🎯

react-hook-form-zod

🎯Skill

from jezweb/claude-skills

What it does

Provides React Hook Form integration patterns with Zod schema validation for type-safe, performant form handling

Overview

A Claude Code skill for building type-safe validated forms using React Hook Form v7 and Zod v4. It provides patterns for single-schema validation that works on both client and server, with full TypeScript inference via z.infer, covering everything from basic forms to multi-step wizards and complex cross-field validation.

Key Features

Unified Client-Server Validation - Single Zod schema works on both client (via zodResolver) and server (via schema.parse), ensuring consistent validation across the stack
Complete Registration Patterns - Covers both the register function for standard HTML inputs and Controller for third-party components like date pickers and custom selects
Cross-Field Validation - Zod refinements with proper path targeting for dependent field validation like password confirmation
Zod v4 Features - Support for exact optionals, exclusive unions (z.xor), JSON Schema imports, and transforms with chained refinements
Performance Optimization - Guidance on validation modes (onSubmit, onBlur, onChange), uncontrolled component patterns, and preventing unnecessary re-renders

Who is this for?

This skill is designed for React developers who need to build validated forms with proper TypeScript type safety. It is especially valuable for teams building applications with complex form requirements like multi-step wizards, cross-field validation, or server-side validation who want a single source of truth for their form schemas.

📦

Same repository

jezweb/claude-skills(196 items)

react-hook-form-zod

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add jezweb/claude-skills --skill react-hook-form-zod

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add jezweb/claude-skills --skill react-hook-form-zod

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/react-hook-form-zod/SKILL.md

SKILL.md

1,236Installs

253

Last UpdatedJan 26, 2026

View on GitHub Back to Skills

More from this repository10

🎯

tailwind-v4-shadcn🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tanstack-query🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

shadcn-ui🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

tailwind-theme-builder🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.

🎯

fastapi🎯Skill

Provides FastAPI development patterns including async endpoints, dependency injection, Pydantic models, authentication, and API documentation best practices

🎯

color-palette🎯Skill

Skill for generating complete, accessible color palettes from a single brand hex, creating 11-shade scales, semantic tokens, dark mode variants, and WCAG contrast checking for Tailwind v4

🎯

tanstack start🎯Skill

Provides TanStack Start patterns for building full-stack React applications with server-side rendering, routing, and data loading

🎯

favicon-gen🎯Skill

Generates favicon files in multiple sizes and formats for web projects, from a collection of 87 production-ready skills for Cloudflare, React, and AI integrations.

🎯

zustand-state-management🎯Skill

Provides Zustand state management patterns for React including store creation, selectors, middleware, and best practices for scalable client-side state

🎯

ux-audit🎯Skill

A collection of production-ready Claude Code skills covering Tailwind CSS v4, shadcn/ui integration, and modern web development patterns.