Claudecode-Codex-Gemini: Command for Claude Code

Kim表单生成命令

输入字段和校验规则，生成完整的表单组件（React/Vue + 校验 + 样式）

你现在要生成表单组件：$ARGUMENTS

模式说明：专门生成前端表单组件，自动处理校验、样式、提交逻辑。

执行流程

阶段1：分析表单需求

解析用户输入，提取：

• 表单名称：如 LoginForm、UserProfile
• 字段列表：字段名、类型、校验规则
• 提交地址：API端点
• 框架选择：React/Vue（检测项目）

如果信息不完整，询问用户：

📝 请补充表单信息：

1. 表单名称：用户注册表单
2. 字段列表：
   - username: 文本, 必填, 4-20字符, 字母数字下划线
   - email: 邮箱, 必填, 邮箱格式
   - password: 密码, 必填, 8位以上, 含字母数字
   - confirmPassword: 密码, 必填, 与password一致
   - agreeTerms: 复选框, 必填
3. 提交地址：/api/register
4. 成功后：跳转登录页

请确认或修改：

阶段2：检测前端框架

使用Glob检测项目使用的前端框架：

# 检测React
ls package.json 2>/dev/null | xargs grep -l "react"

# 检测Vue
ls package.json 2>/dev/null | xargs grep -l "vue"

# 检测UI库
grep -E "antd|@mui|element-plus|naive-ui" package.json 2>/dev/null

阶段3：调用Codex生成组件

使用MCP工具调用Codex生成表单组件：

React模板：

生成内容：
1. 表单组件（React Hook Form / Formik）
2. 校验Schema（Zod / Yup）
3. 样式文件（Tailwind / CSS Modules）
4. 类型定义（TypeScript）

Vue模板：

生成内容：
1. 表单组件（Vue 3 Composition API）
2. 校验规则（VeeValidate / Element Plus rules）
3. 样式文件
4. 类型定义

阶段4：输出结果

# 表单生成结果：{表单名称}

## 表单预览

| 字段 | 类型 | 校验规则 |
|------|------|----------|
| username | 文本输入 | 必填, 4-20字符 |
| email | 邮箱输入 | 必填, 邮箱格式 |
| password | 密码输入 | 必填, 8位以上 |
| confirmPassword | 密码输入 | 必填, 密码一致 |
| agreeTerms | 复选框 | 必须勾选 |

## 生成的文件

1. `components/RegisterForm.tsx` - 表单组件
2. `schemas/register.ts` - 校验Schema
3. `types/register.ts` - 类型定义

## 使用方法

```tsx
import RegisterForm from '@/components/RegisterForm';

function RegisterPage() {
  return <RegisterForm onSuccess={() => router.push('/login')} />;
}

生成的代码

[代码内容...]

---

## 使用示例

```bash
# 基础用法
/kim-form "登录表单：用户名、密码、记住我"

# 详细描述
/kim-form "用户资料编辑表单：昵称必填、头像上传、性别单选、生日日期选择、个人简介文本域"

# 复杂表单
/kim-form "订单表单：收货人、手机号（11位）、省市区级联、详细地址、发票信息可选"

---

支持的字段类型

类型	对应组件	校验支持
文本	Input	长度、正则、必填
邮箱	Input	邮箱格式
密码	Password	强度、一致性
手机号	Input	11位数字
数字	InputNumber	范围、精度
单选	Radio	必选
多选	Checkbox	最少/最多
下拉	Select	必选
日期	DatePicker	范围
上传	Upload	大小、格式
文本域	Textarea	长度