Automate React form handling with React Hook Form, Zod, and tRPC.
npx skills add https://github.com/retrip-ai/agent-skills --skill form-patterns-retrip-ai
Please help me install this Agent Skill. Skill: form-patterns Source: https://github.com/retrip-ai/agent-skills/tree/main/skills/form-patterns Command: npx skills add https://github.com/retrip-ai/agent-skills --skill form-patterns-retrip-ai
This Skill provides a structured approach to building robust, maintainable forms in React using React Hook Form and Zod validation. It covers common patterns for creating, editing, and validating forms, including support for dynamic fields and server mutations.
Create a basic form using React Hook Form and Zod with fields email and password and basic validation. Then extend to an array field and an edit form with unsaved changes.
High-intent search queries and answers about installing and using this skill.
Handle unsaved changes in React Hook Form by tracking form state with useFormState and implementing an UnsavedChangesBar component to provide a safe user experience before navigation or server mutations.
Validate dynamic array fields in React forms by combining React Hook Form's useFieldArray with Zod schema resolvers to enforce validation rules and manage lists of inputs like emails or tags.
Submit React Hook Form data using tRPC mutations by wiring your form's onSubmit handler to the tRPC mutation function, managing server responses, and executing query invalidation upon successful submission.
You can use Zod with React Hook Form for schema validation by integrating a resolver library like @hookform/resolvers/zod to enforce schemas and define default values directly.
Accessible React form fields require UI primitives like Field, FieldLabel, FieldError, Input, and Select components, managed via the Controller component to maintain consistent state and error handling.
You need a resolver library like @hookform/resolvers to connect Zod schemas to React Hook Form, translating schema validation rules into the form's internal validation format.
Bbeierle12Build React forms with React Hook Form and Zod validation.
MinhDuyDEVImplement React 19 Server Actions for form mutations and validation.
mgiffordEnsure form controls have programmatic labels and accessible error messages.
mgd34msuManage React form state, validation, and submission with Formik.
