用途:这是一个 Agent 类技能,不讲解 Form API,而是对 react-hook-form + zod + shadcn Form 组合做八点清单校验,输出结构化判定。适用于代码评审、AI 生成表单草稿检查,以及排查“我的验证不生效”一类问题。资料指出,多数“表单坏了”的报告都可归因到八种集成错误之一,且其中六种是静默失败:没有控制台报错、不抛异常,只在提交时表现为行为错误,因此要求按顺序逐项执行、不得因“看起来没问题”而跳过。
主要能力与使用方式:给定表单代码块(一个 useForm 调用加 <Form> 下的 JSX 树),解析 zod schema 提取字段路径集合,解析 useForm 确认是否含 resolver: zodResolver(schema) 且 defaultValues 覆盖全部路径;遍历每个 <FormField name="..." />,记录 name、控件绑定方式(register 还是 Controller 渲染属性)、FormItem 内是否有 <FormMessage />;交叉比对 name 与 schema 路径;按控件类型判定正确绑定机制;检查提交是否为 form.handleSubmit(onValid);确认整棵 JSX 树只有一层 <Form>(单个 FormProvider)。
八点清单:1 schema 与 FormField 名称映射;2 Controller 与 register 正确性;3 每个字段的 FormMessage 存在性;4 name 属性精确匹配;5 defaultValues 完整性;6 handleSubmit 包装;7 useForm 中的 zodResolver;8 无嵌套 FormProvider。要求始终报告全部八项,不因首个失败而停止。判定输出包含 schema 路径、FormField 名称、defaultValues 键及每项 PASS/FAIL 与修复建议,并给出前向指引技能。
关键规则:Radix/shadcn 自定义控件(Select、Checkbox、Switch、RadioGroup、Combobox、DatePicker)必须经 field 渲染属性绑定,因为其触发 onValueChange/onCheckedChange/onSelect 而非 onChange,用 register 会导致值停留在默认值。检查 1、3、4、5 需与 zod schema 源码做字符串精确比对,不得推断“大概是同一字段”。限制:资料未提供安装命令、收费或平台信息;不适用于 shadcn-syntax-field 的 Field 原语(其无障碍接线不同)。