🎯

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(161 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,229Installs

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.

🎯

fastapi🎯Skill

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

🎯

zustand-state-management🎯Skill

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

🎯

tailwind-patterns🎯Skill

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

🎯

nextjs🎯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.

🎯

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

🎯

tailwind-theme-builder🎯Skill

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

🎯

motion🎯Skill

Skill for building React animations with Motion (formerly Framer Motion), covering gestures, scroll effects, spring physics, layout animations, and SVG with bundle sizes from 2.3KB to 34KB