Manage React form state with React Hook Form and Zod validation.
npx skills add https://github.com/antonyfmunoz/OS --skill react-hook-form-antonyfmunoz
Please help me install this Agent Skill. Skill: react_hook_form Source: https://github.com/antonyfmunoz/OS/tree/main/skills/tools/react_hook_form Command: npx skills add https://github.com/antonyfmunoz/OS --skill react-hook-form-antonyfmunoz
React Hook Form (RHF) prevents slow, bug-prone form state management by keeping inputs mostly uncontrolled, validating via a single schema source, and cleanly handling server-side errors—so your EOS SaaS forms don’t desync or re-render excessively.
register for native inputs to avoid re-rendering on every keystroke, and use Controller only when refs aren’t available.zodResolver so the same rules produce consistent client validation and user-facing error messages.useFieldArray for repeatable rows (with stable field.id keys) and setError / clearErrors to map API validation back onto the right fields.Use react_hook_form to create a Zod-validated shadcn <Form> that submits via a React Query mutation and shows both client and server field errors correctly.
High-intent search queries and answers about installing and using this skill.
To stop React Hook Form from re-rendering on every keystroke, use the register function for native inputs to keep them uncontrolled, and only use the Controller component when refs are unavailable.
React Hook Form works with shadcn UI components and Zod validation by using the zodResolver to integrate a single schema source, ensuring consistent client validation and user-facing error messages across shadcn Form primitives.
The best way to map server-side validation errors to React Hook Form fields is using the setError and clearErrors functions to inject API validation responses directly onto the correct form fields after a React Query mutation fails.
To prevent dynamic list desync when using useFieldArray in React Hook Form, always use stable field.id keys for repeatable rows to avoid uncontrolled and controlled component issues during list additions or removals.
You can use React Query to populate async default values in React Hook Form by correctly configuring useForm typing with z.input and managing defaultValues, values, or reset to handle asynchronous data injection properly.
Your controlled component desyncs with React Hook Form subscriptions when useWatch is implemented incorrectly or stable field.id keys are missing, causing excessive re-renders and uncontrolled to controlled state transition issues.
Bbeierle12Build React forms with React Hook Form and Zod validation.
codexyzdevBuild type-safe React forms with React Hook Form v7 and Zod v4.
sadamkhan7679Provide type-safe React form components for react-hook-form and shadcn/ui.
Aayush31-AiCreate and validate React/Next.js forms with React Hook Form and Zod.