React Component Generator 是一个面向 React 组件开发的生成技能，主要用途是在创建新 React 组件、UI 元素或重构既有组件时，产出符合 TypeScript、props 规范、hooks 用法与无障碍要求的代码。
主要能力与使用方式体现在其内置的工作流程与模板中。使用时首先需要判断组件类型是客户端组件（Client Component）还是服务端组件（Server Component），然后使用 TypeScript 定义 props 接口，按最佳实践实现组件，并添加无障碍属性。
技能提供了三类模板：
-
客户端组件：以 Button 为例。文件顶部使用 'use client'，引入 useState、useCallback 以及 cn 工具函数。通过 interface ButtonProps 扩展 React.ButtonHTMLAttributes，定义 variant（'primary' | 'secondary' | 'ghost'）、size（'sm' | 'md' | 'lg'）、isLoading 与 children 等 props。组件使用默认参数，定义 baseStyles 及 variants、sizes 映射，通过 cn 合并类名；按钮在 disabled 或 isLoading 时禁用，并设置 aria-busy，加载时显示提示符号。
-
服务端组件：以 UserList 为例。引入 db，定义 UserListProps，包含可选的 limit（默认 10）。组件为 async 函数，通过 db.user.findMany 查询数据；当结果为空时返回无数据提示，否则渲染 role="list" 的 ul 列表，并对每项使用 key。
-
基于 React Hook Form 的表单组件：以 LoginForm 为例。使用 'use client'，引入 useForm 与 zodResolver、z。通过 z.object 定义 email（邮箱格式校验）与 password（最少 8 位）的 schema，并用 z.infer 推导 FormData 类型。组件接收 onSubmit 回调，使用 useForm 配置 resolver，取用 register、handleSubmit、formState 中的 errors 与 isSubmitting。表单设置 noValidate，字段带 label、id、type，错误时设置 aria-invalid 与 aria-describedby，错误信息使用 role="alert"，提交按钮在提交中禁用并显示 Loading 文本。
无障碍检查清单要求：使用语义化 HTML 元素；为纯图标按钮添加 aria-label；在需要处添加 role 属性；确保键盘导航可用；为表单错误添加 aria-invalid 和 aria-describedby；为加载状态使用 aria-busy。
适用场景为 React 项目中的组件创建与重构，尤其是需要 TypeScript 类型、表单校验和无障碍支持的场景。
限制方面：该技能的安装命令、支持的平台、是否收费、价格等信息暂未提供。