# UI 组件生成器为组件库构建可用于生产的 UI 组件的专业技能。专注于 React 19、Vue 3.5 和 Svelte 5 与 TypeScript 5.9，使用 Motion 12 实现高级模式、动画，并确保可访问性和性能。 ## 技术堆栈 (2025) ### 核心技术 * **React 19.2** \- 最新的 React 编译器，使用 API，服务器组件 * **Next.js 16** \- Turbopack 稳定，缓存组件，PPR * **TypeScript 5.9** \- 具有增强类型推断功能的最新稳定版本 * **Tailwind CSS 4.0** \- CSS 优先配置、级联层、增量构建速度提高 100 倍 * **Motion 12**（以前称为 Framer Motion）- 混合引擎、GPU 加速动画 ### 构建和测试 * **Vitest 4.0** \- 浏览器模式稳定，视觉回归测试 * **Vite 6** \- 闪电般的 HMR * **故事书9** \- 组件开发平台 ### 实用程序 * **类变异权威 (cva)** \- 变异管理 * **clsx/tailwind-merge** \- 条件类名组合 * **Zod 4** \- 运行时验证 * **React Hook Form 8** \- 表单状态管理 ## 核心能力 ### 1\.组件创建 * 使用 TypeScript 从头开始创建新组件 * 实现复合组件模式 * 使用渲染道具构建组件 * 使用新的 `use` API 创建自定义钩子 (React 19) * 支持多态组件（作为 prop 模式） * 通用组件类型以实现最大程度的可重用性 * 服务器组件支持 (Next.js 16) ### 2\.框架转换在框架之间无缝转换组件： * **React 19 → Vue 3.5**：JSX 到模板/组合 API * **React 19 → Svelte 5** ：挂钩符文（$state、$driven、$effect） * **Vue 3.5 → React 19**：模板到 JSX，可组合项到钩子 * **Svelte 5 → React 19** ：用于 useState/use 的符文 ### 3\.高级模式实现 #### 复合组件 <选择> <选择.触发器/> <选择内容> 选项 1 #### React 19 `使用` API 函数 Comments({ commentsPromise }: { commentsPromise: Promise }) { const 评论 = use(commentsPromise) return comments.map(c => ) } #### 服务器组件 (Next.js 16) // 服务器组件 - 仅在服务器上运行异步函数 ProductList() { const 产品 = 等待 db.products.findMany() 返回 } // 客户端组件 “使用客户端” 函数 AddToCart({ 产品 ID }: { 产品 ID: 字符串 }) { const [pending, startTransition] = useTransition() } ### 4\.动画集成（动作 12）从“运动/反应”导入{运动，AnimatePresence} 导出函数 Modal({ isOpen, onClose, Children }: ModalProps) { 返回（ <动画存在> {已打开 && ( <> <运动.div 初始={{不透明度:0}} 动画={{不透明度:1}} 退出={{ 不透明度: 0 }} onClick={onClose} className="固定插入-0 bg-black/50" /> <运动.div 初始={{不透明度：0，比例：0.95，y：20}} 动画={{ 不透明度: 1, 比例: 1, y: 0 }} 退出={{ 不透明度: 0, 比例: 0.95, y: 20 }} 过渡={{类型：'弹簧'，持续时间：0.3}} className =“固定插入-0弹性项目中心对齐中心” > {孩子} )} ） } ### 5\. TypeScript 5.9 卓越 * 严格的类型安全和适当的通用约束 * 组件变体的可区分联合 * `satisfs` 运算符以获得更好的推理 * `const` 类型参数 * 正确输入裁判、事件和子项 ### 6\.无障碍 (a11y) 第一 * 语义 HTML 元素 * 需要时的 ARIA 属性 * 键盘导航（Tab、Enter、Escape、箭头键） * 焦点管理和焦点捕捉 * 屏幕阅读器公告 * WCAG 2.1 AA/AAA 合规性 *“首选减少运动”支持 ### 7\.性能优化 * React编译器自动记忆 * 零客户端 JS 的服务器组件 * 大型列表的虚拟滚动 * 代码分割和延迟加载 * 流媒体和悬念 ## 组件模式 ### 按钮组件（React 19 + Tailwind 4）从“react”导入{forwardRef，类型ButtonHTMLAttributes} 从 'class-variance-authority' 导入 { cva, type VariantProps } 从 '@/lib/utils' 导入 { cn } const 按钮变体 = cva( '内联柔性项目中心对齐中心圆形MD字体中过渡颜色焦点可见：轮廓无焦点可见：环2禁用：指针事件无禁用：不透明度50'， { 变体：{ 变体：{ 默认值：'bg-primary text-primary-foreground悬停：bg-primary/90'，破坏性：'bg-破坏性文本-破坏性-前景悬停：bg-破坏性/ 90'，大纲：'边框边框-输入bg-背景悬停：bg-accent'，次要：'bg-次要文本-次要-前景悬停：bg-次要/80'， Ghost: '悬停:bg-accent 悬停:text-accent-foreground', 链接：'文本主下划线偏移-4悬停：下划线'， }, 尺寸：{ 默认值：'h-10 px-4 py-2'， sm: 'h-9 圆形 MD px-3', lg: 'h-11 圆角 MD px-8', 图标：'h-10 w-10'， }, }, 默认变体：{ 变体：“默认”，大小：'默认'， }, } ）接口按钮属性扩展 ButtonHTMLAttributes, VariantProps { asChild?: 布尔值 } const Button =forwardRef( ({ 类名, 变体, 大小, ...props }, ref) => { 返回（ <按钮参考={参考} className={cn(buttonVariants({ 变体, 大小, className }))} {...道具} /> ） } ） Button.displayName = '按钮' 导出 { 按钮，按钮变量 } ### 复合组件模式从 'react' 导入 { createContext, useContext, useState, type ReactNode } 接口 TabsContextValue { 活动选项卡：字符串 setActiveTab: (tab: string) => void } const TabsContext = createContext(空) 函数 useTabs() { 常量上下文 = useContext(TabsContext) if (!context) throw new Error('选项卡组件必须在选项卡内使用') 返回上下文 } 导出函数 Tabs({ defaultValue, Children }: { defaultValue: string; Children: ReactNode }) { const [activeTab, setActiveTab] = useState(defaultValue) 返回（

{子项}

） } 导出函数 TabsTrigger({ value, Children }: { value: string; Children: ReactNode }) { const { activeTab, setActiveTab } = useTabs() const isActive = activeTab === 值返回（ <按钮角色=“选项卡” aria-selected={isActive} onClick={() => setActiveTab(值)} 类名={cn( 'px-4 py-2 字体中过渡颜色', 是否活跃？ 'border-b-2 border-primary text-primary' : 'text-muted-foreground' )} > {孩子} ） } 导出函数 TabsContent({ value, Children }: { value: string; Children: ReactNode }) { const { activeTab } = useTabs() if (activeTab !== value) 返回 null 返回

{children}

} ## 框架转换 ### React 19 到 Svelte 5 // 反应 19 函数计数器() { const [计数，setCount] = useState(0) const doubled = useMemo(() => count * 2, [count]) 返回 } // SVELTE 5（符文） <脚本语言=“ts”> 让计数 = $state(0) 让加倍= $衍生（计数* 2） ### React 19 到 Vue 3.5 // 反应 19 函数计数器() { const [计数，setCount] = useState(0) 返回 } //VUE 3.5 <脚本设置lang =“ts”> 从 'vue' 导入 { ref } 常量计数 = ref(0) <模板> ## Tailwind CSS 4.0 配置 @导入“tailwindcss”； @主题{ --颜色主色：oklch(0.7 0.15 250); --颜色次要：oklch(0.6 0.12 280); --font-sans: "Inter"、系统用户界面、无衬线字体； --半径-md: 0.5rem; } @media（首选颜色方案：深色）{ @主题{ --颜色背景：oklch(0.15 0.01 250); --颜色前景：oklch(0.95 0.01 250); } } ## 最佳实践 (2025) ### 组件结构组件/ 按钮/ Button.tsx # 主要组件 Button.types.ts # 类型定义 Button.test.tsx # Vitest 4 次测试 Button.stories.tsx # 故事书 9 个故事 index.ts # 公共导出 ### React 19 最佳实践 * 使用 React 编译器 - 无需手动记忆 * 尽可能首选服务器组件 * 使用`use` API在渲染中获取数据 * 利用 Suspense 加载状态 * 使用`useOptimistic`进行乐观更新 * 使用 `useFormStatus` 作为表单状态 ### 绩效检查表 * 静态内容的服务器组件 *启用React编译器（自动记忆） * 重型组件的延迟加载 * 大型列表的虚拟滚动 ### 辅助功能清单 * 语义 HTML 元素 * 键盘导航有效 * 需要时的 ARIA 属性 * WCAG AA 色彩对比 (4.5:1) * 更喜欢减少运动支持 ## 何时使用此技能当您需要时激活： * 创建新的UI组件 * 在 React/Vue/Svelte 之间转换组件 * 实现高级组件模式 * 使用 Motion 12 添加动画 * 优化组件性能 * 提高可访问性 * 构建服务器组件 (Next.js 16) ## 输出格式提供： 1. **完整的组件代码**：完全类型化且可用于生产 2. **使用示例**：如何使用组件 3. **道具文档**：所有具有类型的道具 4. **辅助功能说明**：键盘快捷键和 ARIA 5. **性能技巧**：React 编译器、服务器组件始终遵循 React 19、Next.js 16 和 TypeScript 5.9 约定。

用户界面组件生成器

包含技能