shadcn-agents-form-validator

name	shadcn-agents-form-validator
description	Use when validating a react-hook-form + zod + shadcn Form integration in a code review, a draft AI-generated form, or a bug report ("my validation does not trigger", "the error message never shows", "the Select does not bind", "submit fires but values are undefined", "the field reads as uncontrolled then controlled"), when auditing whether a zod schema and a shadcn Form composition agree on every field name, when verifying Controller-vs-register correctness for custom controls (Select, Checkbox, RadioGroup, Switch, DatePicker, Combobox), when confirming every FormField has a FormMessage so zod errors are visible to the user, when checking that defaultValues covers every schema key (no undefined-to-string controlled / uncontrolled warning), when verifying the submit handler is wrapped in form.handleSubmit, when checking that zodResolver is actually passed to useForm, when ensuring no nested FormProvider / shadcn Form context is duplicated, and when emitting a structured pass / fail verdict over a form code block. Prevents the silent failure modes that make react-hook-form + zod look broken : a FormField name prop that does not match the zod schema path exactly (typos silently un-validate the field and the input value never reaches the schema), a missing FormMessage so zod errors fire but the user never sees them, register used on a Radix Select / Checkbox / RadioGroup / Switch where Controller is required (the control never binds and submit reads undefined), partial defaultValues that leaves keys undefined (react warns "input is changing from uncontrolled to controlled" the first time the user types), onSubmit passed directly to the form element instead of through form.handleSubmit (validation is bypassed and onSubmit receives the raw event instead of validated values), zodResolver omitted from useForm (the schema is declared but never enforced), and a duplicated FormProvider that competes with the shadcn Form context (two aria-describedby chains and two formStates). Covers the eight-point form validator checklist (schema-to-Form name mapping / Controller-vs-register correctness / FormMessage presence per field / name prop exact match against zod path / defaultValues completeness against schema keys / handleSubmit wrap on submit handler / zodResolver presence in useForm options / no nested FormProvider) and the validator workflow (parse the form code, classify per FormField, flag mismatches, missing FormMessage nodes, wrong-path name props, silent-fail Controller-vs-register choices, undefined defaultValues keys, then emit a structured verdict that names the failing rule and the fix). Keywords: form validator, validate react-hook-form, validate zod form, FormField name match, FormMessage missing, Controller vs register check, validate shadcn form, form code review, how do I verify a form, form integration audit, react-hook-form zod check, zodResolver missing, defaultValues incomplete, handleSubmit not wrapped, FormProvider duplicated, field name mismatch, name prop typo, silent form failure, form does not submit, validation does not trigger, error message not showing, Select not binding, Checkbox not binding, uncontrolled to controlled warning, shadcn form audit, agent form validator.
license	MIT
compatibility	Designed for Claude Code. Requires shadcn ui evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

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.

ALWAYS report ALL eight checkpoints, even when most pass. NEVER stop at the first failure : multiple silent failures often coexist and the user needs the full picture.

The Eight-Point Checklist