SuperAPI AI 工具集

form-generator-rhf-zod

前端与建站

查看项目

更新于 10-15 22:14

技能介绍

用途:在 React 项目中生成生产可用的表单,组合 React Hook Form、Zod 校验与可访问的 shadcn/ui 表单控件,同时覆盖客户端与服务端校验,并输出 TypeScript 类型与一致错误处理。适用于实体表单(角色、地点、物品、派系)、数据录入与校验、复杂字段与条件逻辑、多步骤或向导表单,以及需要无障碍 ARIA 属性的表单。

主要能力:提供脚本 scripts/generate_form.py 生成表单组件、Zod schema 与服务端 action(用法 python scripts/generate_form.py --name CharacterForm --fields fields.json --output components/forms),scripts/generate_zod_schema.py 将字段规格转为校验规则(用法 python scripts/generate_zod_schema.py --fields fields.json --output lib/schemas);并有 RHF 模式、Zod 校验、shadcn 控件、Server Actions 参考文档与模板资产。

使用方式:先定义字段规格 JSON(name、label、type、required、validation、placeholder 等),再依次生成 Zod schema、表单组件与服务端 action,最后在页面导入组件。字段类型映射到 Input、Textarea、Select、Checkbox、RadioGroup、Switch、DatePicker、Combobox、Slider 等 shadcn/ui 控件。

限制:依赖需安装 react-hook-form、@hookform/resolvers、zod、sonner,并添加相应 shadcn/ui 组件;资料未提供定价、版本支持范围与性能数据;生成结果需自行审查字段逻辑与后端集成。

依赖命令:npm install react-hook-form @hookform/resolvers zod;npm install sonner;npx shadcn-ui@latest add form button input textarea select checkbox radio-group switch slider。