Agent skill · software engineering · secondsky
react-hook-form-zod
Type-safe React forms with React Hook Form and Zod validation. Use for form schemas, field arrays, multi-step forms, or encountering validation errors, resolver issues, nested field problems.
Why this skill is useful
Provides specific integration patterns and validation schemas for React Hook Form and Zod that the AI wouldn't reliably generate on its own.
What it needs
Requires @hookform/resolvers, react-hook-form, zod installed locally. About 9k tokens when loaded. Last updated 2026-08-06. 204 stars on the source repository.
What this skill does
React Hook Form + Zod Validation Status: Production Ready ✅ Last Updated: 2025-11-21 Dependencies: None (standalone) Latest Versions: react-hook-form@7.84.0, zod@4.3.6, @hookform/resolvers@5.2.2 --- Quick Start (10 Minutes) 1. Install Packages Why These Packages: react-hook-form: Performant, flexible forms with minimal re-renders zod: TypeScript-first schema validation with type inference @hookform/resolvers: Adapter connecting Zod to React Hook Form 2. Create Your First Form CRITICAL: Always set defaultValues to prevent "uncontrolled to controlled" warnings Use zodResolver(schema) to connect Zod validation Type form with z.infer<typeof schema> for full type safety Validate on both client AND server (never trust client validation alone) Template: See templates/basic-form.tsx for complete working example 3. Add Server-Side Validation Why Server Validation: Client validation can be bypassed (inspect element, Postman, curl) Server validation is your security layer Same Zod schema = single source of truth Template: See templates/server-validation.tsx --- Core Concepts useForm Hook Validation Modes: onSubmit - Validate on submit (best performance) onChange - Validate on every change (live feedback) onBlur - Validate when field loses focus (good balance) all - Validate on submit, blur, and change Reference: See references/rhf-api-reference.md for complete API Zod Schema Basics Reference: See references/zod-schemas-guide.md for complete patterns --- Critical Rules Always Do ✅ Always set defaultValues - Prevents "uncontrolled to controlled" warnings ✅ Use zodResolver for validation - Connects Zod schemas to React Hook Form ✅ Infer types from schema - Use z.infer<typeof schema> for type safety ✅ Validate on server too - Client validation can be bypassed ✅ Use .register() for native inputs - Simple and performant ✅ Use Controller for custom components - For component libraries (MUI, Chakra, etc.) ✅ Handle errors accessibly - Use role="alert" for screen readers ✅ Reset form af …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills secondsky/react-hook-form-zod