react-hook-form-zod
Type-safe validated forms with React Hook Form v7 and Zod v4, single schema for client and server.
- Combines uncontrolled registration with Zod schema validation and full TypeScript inference via
z.infer; supports dynamic fields, multi-step wizards, and conditional validation patterns - Includes resolver setup, error handling, useFieldArray for dynamic lists, and Controller integration for third-party components
- Documents 20 known issues and workarounds, including large-form performance optimization (300+ fields), Zod v4 optional field bugs, and SSR hydration mismatches
- Covers shadcn/ui integration, server-side validation patterns, and upcoming v8 breaking changes (field.id → field.key, watch callback removal)
React Hook Form + Zod Validation
Status: Production Ready ✅ Last Verified: 2026-01-20 Latest Versions: react-hook-form@7.71.1, zod@4.3.5, @hookform/resolvers@5.2.2
Quick Start
npm install react-hook-form@7.70.0 zod@4.3.5 @hookform/resolvers@5.2.2
More from jezweb/claude-skills
tailwind-v4-shadcn
|
2.7Kshadcn-ui
Install and configure shadcn/ui components for React projects. Guides component selection, installation order, dependency management, customisation with semantic tokens, and common UI recipes (forms, data tables, navigation, modals). Use after tailwind-theme-builder has set up the theme infrastructure, when adding components, building forms, creating data tables, or setting up navigation.
2.5Ktanstack-query
|
2.5Ktailwind-theme-builder
Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.
2.3Kfastapi
|
2.0Kcolor-palette
Generate complete, accessible colour palettes from a single brand hex. Produces 11-shade scale (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS output, WCAG contrast checks. Use whenever the user supplies a brand hex and asks for a palette, mentions setting up a design system, wants Tailwind theme colours from a brand colour, or asks to check colour accessibility / contrast.
1.9K