What problem does it solve? Forms in React projects often end up with duplicated validation logic between client and server, inconsistent error UX, and ad-hoc state management. This Skill establishes a single default pattern—react-hook-form plus a shared Zod schema plus Server Actions—so validation lives in one place and error handling stays accessible. ## Core Features & Use Cases - Canonical form skeleton: Provides a complete react-hook-form + zodResolver component with field-level errors, role="alert" announcements, aria-invalid states, and submit-button disabling via formState.isSubmitting. - Shared schema discipline: Enforces one Zod schema imported by both the client form and the Server Action, eliminating client/server validation drift. - Boundary guidance: Documents when NOT to use a form library (single-field forms, file uploads, wizards) and lists anti-patterns like per-field useState and toast-based validation errors. - Use Case: When adding a contact or settings form to a Next.js app, the Skill generates the full component wired to a Server Action that re-validates with the same Zod schema server-side. ## Quick Start Ask the agent to build a contact form with email and message fields using react-hook-form, a shared Zod schema, and a Server Action submit handler.
