qoder 提供五种配置方式快速生成合规 react 表单：commands 一键生成、subagent 限定上下文、skill 固化企业规范、posttooluse hook 自动格式化、expert mode 多 agent 协同生成测试与文档。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你需要为新业务模块快速生成一个符合企业规范、带验证逻辑和状态管理的 React 表单组件，但不想手动写 useState、useEffect、校验函数和提交处理——Qoder 提供了五种可组合的配置方式，覆盖从模板初始化到细粒度字段控制的全链路。
用 Commands 封装表单生成指令
这一步操作起来很简单，直接在 Qoder IDE 的 Quest 模式中输入即可，无需切换上下文或打开配置面板。
1、打开侧边栏 AI Chat → 切换至 Quest 模式 → 输入：“创建一个 Commands，名称为 ‘React-Form-Validated’，功能是生成一个带姓名（必填+中文限制）、邮箱（格式校验）、部门（下拉选择）、入职日期（日期控件）的 React 表单，使用 React Hook Form + Zod + Ant Design Mobile 组件。”
2、确认生成后，该 Commands 图标会出现在顶部命令栏，点击即触发完整表单代码生成，包括 schema 定义、formState 管理、错误提示样式绑定与提交回调桩。
3、【生成前必须确保当前工作区已安装 react-hook-form 和 zod 依赖，否则代码将含缺失包警告】
绑定 Project-level Subagent 限定表单上下文
适合多人协作项目中防止 AI 在生成表单时误引入后端 API 调用或数据库逻辑。
方法一：在 TUI 中执行 /agents → Tab 切换至 project 标签页 → 选择 “create new agent” → 输入描述：“专用于表单组件开发的子代理，仅允许调用文件写入、React Hook Form 配置、Zod schema 生成、Ant Design Mobile Input/Select/DatePicker 组件导入，禁止访问 src/api/ 或任何 fetch/axios 调用工具。”
方法二：右键项目根目录 → “编辑项目设置” → Runtime → 新建 Profile 并勾选“启用环境变量隔离”，添加变量 FORM_GEN_MODE=strict。
保存后，所有以“生成表单”“添加字段”“校验规则”为关键词的 Prompt 将自动路由至此 Subagent，避免跨层污染。
注入 Frontend Skill 预置表单能力
如果你的企业已有统一的表单基类、错误提示组件或字段命名规范，Skill 是唯一能固化这些标准的方式。
1、进入 QoderWork 设置面板 → Skills → Import Skill。
2、导入预置 Skill 包：frontend-react-form-zod-antd-mobile-v2.1.json（含字段映射规则、Zod 自定义错误消息模板、AntD Mobile 表单项 label 对齐策略）。
3、导入成功后，在智能会话中只需说“按公司规范生成员工入职表单”，Agent 就会自动套用 skill 中定义的 labelWidth、requiredStar 位置、错误信息语言（简体中文）等细节。
注意：未导入该 Skill 时，生成的表单可能使用英文 placeholder 和默认 red error text，与 UI 设计稿不一致。
配置 PostToolUse Hook 自动格式化表单代码
生成的表单代码若未格式化，会导致 ESLint 报错或 Git diff 过大，影响 Code Review 效率。
在项目根目录 .qoder/hooks/post-tool-use.json 中添加以下配置：
{ "onGenerateForm": ["prettier --write", "eslint --fix"] }
该 Hook 会在每次表单代码写入文件后自动执行 Prettier 格式化与 ESLint 自动修复，确保代码风格与团队规范完全对齐。
【必须确保项目本地已全局安装 prettier 和 eslint，否则 Hook 将静默失败】
启用 Expert Mode 多 Agent 协同生成全链路表单
当你需要表单不仅“能用”，还要“可测、可维护、可扩展”，Expert Mode 是唯一选择。
第一步：在智能会话中输入：“启用 Expert Mode，生成一个员工信息表单，要求包含：① 单元测试（React Testing Library + Vitest），覆盖必填校验与提交成功流程；② Storybook 演示页，支持 dark/light 主题切换；③ 表单状态持久化到 localStorage；④ 支持通过 props 动态禁用字段。”
第二步：Qoder 将自动启动四角色协同：Planner 拆解任务 → FormCoder 写组件 → TestWriter 补测试 → DocsAgent 输出 JSDoc 注释。
第三步：等待右下角状态栏显示 “All Experts ✅”，点击 Accept 同步全部文件到 src/components/EmployeeForm/ 目录。
