shadcn ui : Form Validator (Agent / Validator)

This skill is an AGENT skill. It does NOT teach the Form API. It validates a react-hook-form + zod + shadcn Form composition against an eight-point checklist and emits a structured verdict.

The shadcn Form layer is a thin wrapper over FormProvider from react-hook-form. Most "my form is broken" reports trace to ONE of eight integration mistakes. ALWAYS run the eight-point check in order. NEVER skip a point because "it looks fine" : six of the eight failure modes are silent (no console error, no thrown exception, only wrong behaviour at submit).

Quick Reference : The Validator Workflow

Given a form code block C (a useForm call plus the JSX tree under <Form>), execute :

1. Parse the zod schema to extract the canonical set of field paths (top-level keys, dotted paths for nested objects, indexed paths for arrays).
2. Parse the useForm<...> call to confirm resolver: zodResolver(schema) is present and defaultValues covers every schema path.
3. Walk every <FormField name="..." /> in the JSX tree. For each, record : the name value, whether the rendered control uses register or Controller (via the field render-prop), and whether a <FormMessage /> is present in the FormItem.
4. Cross-check the FormField name set against the zod schema path set. Flag every mismatch (typo, missing field, orphan field).
5. Classify each rendered control (Input, Textarea, Select, Checkbox, RadioGroup, Switch, Combobox, DatePicker) and verify the correct binding mechanism (register-class vs Controller-class).
6. Verify the submit handler is form.handleSubmit(onValid) and not a raw onSubmit.
7. Verify the JSX tree has exactly one <Form> (one FormProvider) wrapping the form. Flag duplicated FormProvider or nested <Form>.
8. Emit verdict with pass / fail per checkpoint and the canonical fix per failure.