form-patterns

The `form-patterns` skill provides a structured approach to building and validating forms in React applications using React Hook Form combined with Zod schema validation. It addresses the common challenge of managing form state, handling user input, and enforcing validation rules consistently across different forms. By leveraging React Hook Form, developers can efficiently register fields, manage submission states, and handle errors, while Zod ensures that form data adheres to defined schemas, preventing invalid data from being processed.

The skill includes features for creating both simple and complex forms with robust validation rules. It demonstrates basic form setups with email and password fields, including inline error messages and submission states. For more advanced scenarios, it supports complex schema validation, including nested objects, arrays, enums, optional fields with defaults, and conditional validation rules such as password confirmation. Additionally, it provides a reusable form field component that integrates seamlessly with `FormProvider`, allowing consistent field rendering and validation across multiple forms without duplicating code.

This skill is particularly useful for frontend developers building React applications that require reliable, maintainable, and scalable form handling. It is ideal for applications with authentication forms, user registration, profile management, or any scenario requiring complex data validation. By standardizing form handling patterns, it reduces development time, improves code readability, and ensures consistent user experiences across applications.