add-form-validation

What problem does it solve?

This skill enables end-to-end type-safe form validation in React apps by modeling the form data with Zod schemas and enforcing validation on both the client and server sides.

Core Features & Use Cases

• Schema-driven validation: define shared Zod schemas in schemas/<formName>.ts to ensure consistency between client and server.
• Form integration: use react-hook-form with zodResolver to provide real-time validation, errors, and accessible form controls.
• Server-side validation: validate inputs in server actions or endpoints before processing.
• Progressive enhancement: client-side validation enhances usability while server-side validation ensures security.

Quick Start

Create a schemas/<formName>.ts with a Zod schema, build a form component using useForm and zodResolver, and implement a server action to process validated data.