react-form-validatorlisted

# React Form Validator Auto-enforces React Hook Form + Zod validation pattern for ALL forms in Next.js/React applications. ## Activation Triggers This skill activates when: - Creating form components - Using `<form>`, `<input>`, form elements - Mentioning "form", "validation", "submit", "input" - Handling form state or submission - Creating login, signup, or data entry forms ## Required Form Pattern (MANDATORY) ALL forms MUST use: - ✅ **React Hook Form** for form state management - ✅ **Zod** for schema validation - ✅ **TypeScript** types inferred from Zod schema - ✅ **Error handling** with accessible error messages - ✅ **Loading states** during submission ## Auto-Validation Process ### Step 1: Detect Form Without Pattern When detecting a form being created: ```tsx // ❌ WRONG - Uncontrolled form, no validation function LoginForm() { const handleSubmit = (e) => { e.preventDefault() const email = e.target.email.value // No validation! const password = e.target.password.value // Submit... } return ( <form onSubmit={handleSubmit}> <input name="email" type="email" /> <input name="password" type="password" /> <button>Login</button> </form> ) } ``` ### Step 2: Identify Missing Requirements Detect: - ❌ No React Hook Form - ❌ No Zod validation - ❌ No TypeScript types - ❌ No error display - ❌ No loading state ### Step 3: Auto-Fix to Correct Pattern **After (Correct Pattern):** ```tsx 'use client' import { useForm } from 'r