forms-and-validation-rules

What problem does it solve?

This Skill helps developers build robust, accessible, and secure forms in React by unifying client and server validation, preventing mismatches and common UX issues such as double-submits and confusing error states.

Core Features & Use Cases

• Shared validation: define Zod schemas that run on both client and server to ensure consistent validation and prevent malicious input.
• Integration patterns: connect React Hook Form with zodResolver, map backend 422 errors to form fields, use Server Actions with useActionState for server-side submits, or use TanStack Query mutations in SPA flows.
• Advanced scenarios: multi-step wizards with partial validation, file upload validation and previews, focus-first-error and accessible error summaries to improve UX and compliance.

Quick Start

Create a form with React Hook Form and zodResolver, submit via a Server Action or TanStack Query mutation, and display accessible field-level errors and file previews.