shadcn-impl-form-validation

What problem does it solve?

This skill fixes the end-to-end form breakdowns that happen when shadcn UI Form primitives are wired incorrectly with react-hook-form and zod, causing missing validation, flickering errors, uncontrolled inputs, or broken submit behavior.

Core Features & Use Cases

• End-to-end form workflow (schema → useForm → compose → submit → errors): build complete typed flows where client validation, server error mapping, and UI states work together.
• Production-grade error handling: attach server validation failures to the correct field using setError, and keep it consistent with zod so errors don’t flicker.
• Async validation + file upload + wizard state: implement debounced async refine checks, correctly handle file inputs via Controller and FileList, and preserve state across multi-step wizards with FormProvider.

Use case: You need a sign-up form that validates email format, performs async “email available” checks without flicker, shows server errors on the specific field, disables the submit button while submitting, and resets on success.

Quick Start

Use this skill to wire a shadcn UI sign-up form end-to-end with zodResolver, proper FormField composition, async email availability validation, server setError mapping, and a reset-on-success submit handler.