What problem does it solve? Building forms in React often leads to duplicated validation logic, inconsistent error display, and accessibility gaps. This Skill encodes a single, consistent form pattern — React Hook Form for state, Zod for schemas, and a shared Field component compound — so every form in the codebase behaves the same way and avoids common failure modes. ## Core Features & Use Cases - Schema-driven validation: Zod schemas in schemas/<feature>Schemas.ts act as the single source of truth for shape and error messages, bridged to React Hook Form via zodResolver. - Accessible error handling: Field-level errors render next to inputs with aria-invalid and aria-describedby, while server-side failures surface as toasts or top-of-form alerts with role="alert". - Submit lifecycle management: Mutations handle async submission, disable the submit button while pending, reset the form on success, and map server field errors back via form.setError. - Use Case: When adding a "Create Project" form, define a Zod schema, wire it into useForm with zodResolver, render fields with the <Field>/<FieldLabel>/<Input>/<FieldError> compound, and submit through a useMutation hook — no manual useState per field. ## Quick Start Ask the AI to create a new form for your feature using the react-forms pattern with a Zod schema, React Hook Form, and the existing Field component compound.
