## 概述该技能提供了使用 React + Tailwind CSS + shadcn/ui 堆栈构建现代 Web 应用程序的全面模式和最佳实践。它强调组件驱动的开发、TypeScript 的类型安全、可访问性和性能优化。 ## 堆栈概述 **核心技术**： * **React 18+** ：基于组件的 UI，具有挂钩和并发功能 * **TypeScript** ：具有出色 IDE 支持的类型安全开发 * **Tailwind CSS** ：实用优先的 CSS 框架，用于快速样式设置 * **shadcn/ui** ：基于 Radix UI 构建的高质量、可访问的 React 组件 * **Vite** ：具有 HMR 和优化生产构建的快速构建工具 **为什么这个堆栈**： * 类型安全减少错误并提高可维护性 * Tailwind 无需上下文切换即可实现快速 UI 开发 * shadcn/ui 提供开箱即用、可定制的组件 * Vite提供优秀的开发者体验和快速构建 * 具有积极社区支持的现代生态系统 **设计注意事项**：基于[“通过技能改进前端设计”]()的研究： * **避免分布式默认**：不要使用 Inter/Roboto/Open Sans、紫色渐变或纯背景 * **独特的版式**：使用粗细变化较大的高对比度字体配对（100-200 或 800-900） * **有意的颜色**：通过深思熟虑的调色板超越通用配色方案 * **高冲击力运动**：一个精心策划的页面加载胜过一打随机动画 * **Motion Library** ：在 React 中使用 Framer Motion 进行复杂的动画编排 * 请参阅“前端美学”技能以获取全面的设计指导 ## 项目结构 ### 推荐的目录布局项目根/ ├── src/ │ ├── 组件/ │ │ ├── ui/ # shadcn/ui 组件 │ │ │ ├── 按钮.tsx │ │ │ ├── 卡.tsx │ │ │ ├── 对话框.tsx │ │ │ └── ... │ │ ├── features/ # 特定于功能的组件 │ │ │ ├── 授权/ │ │ │ ├── 仪表板/ │ │ │ └── ... │ │ └──layout/ # 布局组件 │ │ ├── 标头.tsx │ │ ├── 侧边栏.tsx │ │ └── 页脚.tsx │ ├── 库/ │ │ ├── utils.ts # 实用函数（cn等） │ │ ├── api.ts # API客户端 │ │ └── hooks/ # 自定义 React 钩子 │ ├──pages/ # 页面组件（如果使用路由） │ ├── 款式/ │ │ └── globals.css # 全局样式和 Tailwind 导入 │ ├── types/ # TypeScript 类型定义 │ ├── App.tsx # 主要应用组件 │ └── main.tsx # 入口点 ├── public/ # 静态资产 ├── 索引.html ├── package.json ├── tsconfig.json ├── tailwind.config.js ├── vite.config.ts └── Components.json # shadcn/ui 配置 ## 组件模式 ### 1\.按钮组件（shadcn/ui风格） // src/components/ui/button.tsx 从“react”导入 * as React 从“@radix-ui/react-slot”导入{槽} 从“类方差权威”导入 { cva, type VariantProps } 从“@/lib/utils”导入 { cn } const 按钮变体 = cva( “内联弹性项目中心对齐中心间隙-2空白-nowrap圆形-md文本-sm字体-中过渡颜色焦点可见：轮廓-无焦点-可见：环-1焦点-可见：环-环禁用：指针事件-无禁用：opacity-50”， { 变体：{ 变体：{ 默认值：“bg-primary text-primary-foreground 阴影悬停：bg-primary/90”，破坏性：“bg-破坏性文本-破坏性-前景阴影-sm悬停：bg-破坏性/ 90”，大纲：“边框边框-输入bg-背景阴影-sm悬停：bg-重音悬停：文本-重音-前景”，次要：“bg-次要文本-次要-前景阴影-sm悬停：bg-次要/80”，幽灵：“悬停：背景重音悬停：文本重音前景”，链接：“文本主下划线偏移-4悬停：下划线”， }, 尺寸：{ 默认值：“h-9 px-4 py-2”， sm: "h-8 rounded-md px-3 text-xs", lg: "h-10 圆角-md px-8", 图标：“h-9 w-9”， }, }, 默认变体：{ 变体：“默认”，大小：“默认”， }, } ）导出接口ButtonProps 扩展 React.ButtonHTMLAttributes, VariantProps { asChild?: 布尔值 } const Button = React.forwardRef( ({ 类名, 变体, 大小, asChild = false, ...props }, ref) => { const Comp = asChild ？插槽：“按钮” 返回（ <比较 className={cn(buttonVariants({ 变体, 大小, className }))} 参考={参考} {...道具} /> ） } ） Button.displayName = "按钮" 导出 { 按钮，按钮变量 } **用法**：从“@/components/ui/button”导入{Button} // 不同的变体 <按钮>默认 <按钮变体=“破坏性”>删除 <按钮变体=“大纲”>取消 <按钮变体=“幽灵”>幽灵 <按钮尺寸=“sm”>小 <按钮大小=“lg”>大 <按钮已禁用>已禁用 ### 2\.卡组件模式 // src/components/ui/card.tsx 从“react”导入 * as React 从“@/lib/utils”导入 { cn } const Card = React.forwardRef>( ({ 类名, ...props }, ref) => (

）） Card.displayName = "卡" const CardHeader = React.forwardRef>( ({ 类名, ...props }, ref) => (

）） CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ 类名, ...props }, ref) => (

）） CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ 类名, ...props }, ref) => (
）） CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ 类名, ...props }, ref) => (
）） CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ 类名, ...props }, ref) => (
）） CardFooter.displayName = "CardFooter" 导出 { 卡、卡页眉、卡页脚、卡标题、卡描述、卡内容 } 用法：从“@/components/ui/card”导入{ Card、CardHeader、CardTitle、CardDescription、CardContent、CardFooter } 从“@/components/ui/button”导入{Button} <卡片> <卡片标题> 卡片标题此处显示卡片说明 <卡片内容>
卡片内容
<卡页脚> <按钮>操作 ### 3\.对话框/模态组件 // src/components/ui/dialog.tsx（简化的 shadcn/ui 模式）从“react”导入 * as React 从“@radix-ui/react-dialog”导入*作为DialogPrimitive 从“lucide-react”导入 { X } 从“@/lib/utils”导入 { cn } const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger const DialogPortal = DialogPrimitive.Portal const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( ）） DialogOverlay.displayName = DialogPrimitive.Overlay.displayName const DialogContent = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, Children, ...props }, ref) => ( <对话门户> <对话框覆盖/> {孩子} 关闭）） DialogContent.displayName = DialogPrimitive.Content.displayName 导出 { 对话框、DialogPortal、DialogOverlay、DialogTrigger、DialogClose、DialogContent } ## Tailwind CSS 配置 ### 增强的 tailwind.config.js /** @type {import('tailwindcss').Config} */ 导出默认值{ 黑暗模式：[“类”]，内容：[ './pages/**/*.{ts,tsx}', './components/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './src/**/.{ts,tsx}', ], 主题：{ 容器：{ 中心：真实，填充：“2rem”，屏幕：{ "2xl": "1400 像素", }, }, 扩展：{ 颜色：{ 边框：“hsl(var(--border))”，输入：“hsl（var（--输入））”，环：“hsl(var(--ring))”，背景：“hsl(var(--background))”，前景：“hsl(var(--foreground))”，主要：{ 默认值：“hsl(var(--primary))”，前景：“hsl(var(--primary-foreground))”， }, 次要：{ 默认值：“hsl(var(--secondary))”，前景：“hsl(var(--secondary-foreground))”， }, 破坏性：{ 默认值：“hsl（var（--破坏性））”，前景：“hsl（var（--破坏性前景））”， }, 静音：{ 默认值：“hsl(var(--muted))”，前景：“hsl(var(--muted-foreground))”， }, 口音：{ 默认值：“hsl(var(--accent))”，前景：“hsl(var(--accent-foreground))”， }, 弹出窗口：{ 默认值：“hsl(var(--popover))”，前景：“hsl(var(--popover-foreground))”， }, 卡：{ 默认值：“hsl(var(--card))”，前景：“hsl(var(--card-foreground))”， }, }, 边框半径：{ lg: "var(--半径)", md: "calc(var(--radius) - 2px)", sm: "计算(var(--radius) - 4px)", }, 关键帧：{ “手风琴向下”：{ 来自：{高度：0}，到：{高度：“var（--radix-accordion-content-height）”}， }, “手风琴向上”：{ 来自: { height: "var(--radix-accordion-content-height)" }, 到：{高度：0}， }, }, 动画：{ "accordion-down": "accordion-down 0.2s 缓出", "accordion-up": "accordion-up 0.2s 缓出", }, }, }, 插件: [require("tailwindcss-animate")], } ### CSS 变量 (globals.css) @tailwind基地； @tailwind组件； @tailwind实用程序； @层基础{ ：根{ --背景：0 0% 100%； --前景：222.2 84% 4.9%； --卡：0 0% 100%； --卡前景：222.2 84% 4.9%； --弹出窗口：0 0% 100%； --popover-前景：222.2 84% 4.9%； ——小学：221.2 83.2% 53.3%； --主前景：210 40% 98%； ——中学：210 40% 96.1%； --次要前景：222.2 47.4% 11.2%； --静音：210 40% 96.1%； --静音前景：215.4 16.3% 46.9%； --口音：210 40% 96.1%； --重音前景：222.2 47.4% 11.2%； --破坏性：0 84.2% 60.2%； --破坏性前景：210 40% 98%； --边界：214.3 31.8% 91.4%； --输入：214.3 31.8% 91.4%； --环：221.2 83.2% 53.3%； --半径：0.5rem； } .暗{ --背景：222.2 84% 4.9%； --前景：210 40% 98%； ——卡：222.2 84% 4.9%； --卡前景：210 40% 98%； --弹出窗口：222.2 84% 4.9%； --popover-前景：210 40% 98%； ——小学：217.2 91.2% 59.8%； --主前景：222.2 47.4% 11.2%； ——中学：217.2 32.6% 17.5%； --次要前景：210 40% 98%； --静音：217.2 32.6% 17.5%； --静音前景：215 20.2% 65.1%； --口音：217.2 32.6% 17.5%； --重音前景：210 40% 98%； --破坏性：0 62.8% 30.6%； --破坏性前景：210 40% 98%； --边界：217.2 32.6% 17.5%； --输入：217.2 32.6% 17.5%； --环：224.3 76.3% 48%； } } @层基础{ { @应用边框-边框； } 身体{ @apply bg-背景文本-前景； } } ## 实用函数 ### cn() - 类名称实用程序 // src/lib/utils.ts 从“clsx”导入{类型ClassValue，clsx} 从“tailwind-merge”导入 { twMerge } 导出函数 cn(...输入: ClassValue[]) { 返回 twMerge(clsx(输入)) } 用法：合并 Tailwind 类而不发生冲突 cn("px-2 py-1", "px-3") // 结果："py-1 px-3" （px-3 覆盖 px-2） ## TypeScript 最佳实践 ### 组件 Props 类型 // 扩展 HTML 属性接口 CustomButtonProps 扩展 React.ButtonHTMLAttributes { 变体？： '主要' | '次要' | ‘大纲’ 尺寸？： 'sm' | 'md' | 'LG' 正在加载？：布尔值 } // 或者使用类型类型 CustomButtonProps = { 变体？： '主要' | '次要' | ‘大纲’ 尺寸？： 'sm' | 'md' | 'LG' 正在加载？：布尔值 } & React.ButtonHTMLAttributes ### API 响应输入 // 定义API响应类型界面用户{ id: 字符串名称：字符串电子邮件：字符串角色：“管理员”| '用户' } 接口 ApiResponse { 数据：T 消息：字符串状态：“成功”| ‘错误’ } // 用法 const fetchUser = async (id: string): Promise> => { const 响应 = 等待 fetch(`/api/users/${id}`) 返回response.json() } ## 辅助功能模式 ### 键盘导航 // 焦点管理 const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Escape') { 关闭() } if (e.key === 'Enter' || e.key === ' ') { onSelect() e.preventDefault() } } // 将焦点捕获在模态中从 '@/lib/hooks/use-focus-trap' 导入 { useFocusTrap } 函数 Modal({ 孩子 }: { 孩子: React.ReactNode }) { const modalRef = useFocusTrap() 返回（
{孩子}
） } ### ARIA 标签 // 屏幕阅读器支持 <按钮 aria-label="关闭对话框" 咏叹调-pressed={isPressed} aria-expanded={isExpanded} > // 表单可访问性
电子邮件 <输入 id=“电子邮件” 类型=“电子邮件” aria-required =“真” aria-invalid={hasError} 咏叹调描述= {有错误？ “电子邮件错误”：未定义} /> {hasError &&
电子邮件无效
}
## 性能优化 ### 代码分割 // 延迟加载路由从'react'导入{lazy, Suspense} const 仪表板 = 惰性(() => 导入('./pages/Dashboard')) const 设置 = 惰性(() => 导入('./pages/Settings')) 函数应用程序（）{ 返回（ }> <路线> <路线路径=“/仪表板”元素={<仪表板/>} /> <路线路径=“/设置”元素= {<设置/>} /> ） } ### 记忆从 'react' 导入 { memo, useMemo, useCallback } // 备忘录组件 const ExpenseComponent = memo(({ data }: { data: Data[] }) => { return
{/* 渲染数据/}
}) // 备忘录计算函数组件({ items }: { items: Item[] }) { const 排序项目 = useMemo( () => items.sort((a, b) => a.name.localeCompare(b.name)), [项目] ） const handleClick = useCallback(() => { console.log('点击') }, []) 返回 } ## 使用 Framer Motion 制作动画 ### 安装 npm 安装framer-motion ### 核心原则随机运动的高冲击力矩：一个精心设计的页面加载，交错显示 > 十几个随机微动画 * 关注：页面加载、路由转换、主要状态变化 * 使用 CSS 进行简单的过渡，使用 Framer Motion 进行复杂的编排 * 始终尊重“偏好减少运动” ### 页面转换 // app/layout.tsx 或页面包装器从“framer-motion”导入{motion，AnimatePresence} 导出默认函数PageTransition（{children}：{children：React.ReactNode}）{ 返回（ <运动.div 初始={{ 不透明度: 0, y: 20 }} 动画={{ 不透明度: 1, y: 0 }} 退出={{ 不透明度: 0, y: -20 }} 过渡={{ 持续时间：0.5， escape: [0.22, 1, 0.36, 1] // 自定义缓动 (easeOutExpo) }} > {孩子} ） } ### 交错列表动画从“framer-motion”导入{motion} 常量容器= { 隐藏：{ 不透明度：0 }，显示：{ 不透明度：1，过渡：{ staggerChildren: 0.1 // 每个子动画之间的延迟 } } } 常量项 = { 隐藏：{ 不透明度：0，y：20 }，显示：{ 不透明度：1，y：0 } } 导出函数 StaggeredList({ items }: { items: string[] }) { 返回（ <运动.ul 变体={容器} 初始=“隐藏” 动画=“显示” 类名=“空间-y-2” > {items.map((item, i) => ( <运动.li 键={i} 变体={项目} className="p-4 bg-card rounded-lg" > {项目} ))} ） } ### 卡片悬停效果从“framer-motion”导入{motion} 导出函数 AnimatedCard({ 儿童 }: { 儿童: React.ReactNode }) { 返回（ <运动.div whileHover={{ 尺度: 1.02, y: -4 }} whileTap={{ 比例: 0.98 }} 过渡={{类型：“弹簧”，刚度：400，阻尼：17}} className="rounded-xl 边框 bg-card p-6 阴影-sm 光标指针" > {孩子} ） } ### 布局动画（共享布局）从“framer-motion”导入{motion，LayoutGroup} 导出函数 TabsWithAnimation({ tabs }: { tabs: Tab[] }) { const [activeTab, setActiveTab] = useState(0) 返回（ <布局组>
{tabs.map((tab, i) => ( <动作.按钮键={i} onClick={() => setActiveTab(i)} className="相对 px-4 py-2 rounded-md" whileHover={{ 比例: 1.05 }} whileTap={{ 比例: 0.95 }} > {标签.标签} {activeTab === 我&& ( <运动.div 布局ID =“活动选项卡” className =“绝对插入-0 bg-primary rounded-md” 样式={{ zIndex: -1 }} 过渡={{类型：“弹簧”，刚度：500，阻尼：30}} /> )} ))}
） } ### 基于滚动的动画从 'framer-motion' 导入 {motion, useScroll, useTransform } 从 'react' 导入 { useRef } 导出函数 ParallaxSection() { 常量 ref = useRef(null) const { 滚动进度 } = useScroll({ 目标：参考，偏移量：[“开始结束”，“结束开始”] }) const y = useTransform(scrollYProgress, [0, 1], [0, -100]) const opacity = useTransform(scrollYProgress, [0, 0.5, 1], [0, 1, 0]) 返回（ <运动.部分参考={参考} 样式={{ y, 不透明度 }} className="min-h-screen flex items-center justify-center" >
视差内容
） } ### 模态/对话框动画从“framer-motion”导入{motion，AnimatePresence} 导出函数 AnimatedDialog({ 打开，关闭时，儿童 }：{ 打开：布尔值 onClose: () => void 子级：React.ReactNode }) { 返回（ <动画存在> {打开&&( <> {/* 背景 /} <运动.div 初始={{不透明度:0}} 动画={{不透明度:1}} 退出={{ 不透明度: 0 }} onClick={onClose} className="固定插入-0 bg-black/80 z-50" /> {/ 对话框内容 /} <运动.div 初始={{不透明度：0，比例：0.95，y：20}} 动画={{ 不透明度: 1, 比例: 1, y: 0 }} 退出={{ 不透明度: 0, 比例: 0.95, y: 20 }} 过渡={{类型：“弹簧”，刚度：300，阻尼：30}} className="固定 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 z-50 bg-background p-6 rounded-lg Shadow-lg max-w-md w-full" > {孩子} )} ） } ### 手势动画从“framer-motion”导入{motion，useDragControls} 导出函数 DraggableCard() { const 控件 = useDragControls() 返回（ <运动.div 拖动拖拽控件={控件} DragConstraints={{ 左：0，右：300，上：0，下：300 }} 拖动弹性={0.1} whileDrag={{ 比例：1.05，光标：“抓取” }} className="w-32 h-32 bg-primary rounded-lg 光标抓取" /> ） } // 滑动即可关闭导出函数 SwipeableBanner({ onDismiss }: { onDismiss: () => void }) { 返回（ <运动.div 拖动=“x” DragConstraints={{ 左：0，右：0 }} onDragEnd={(e, { 偏移量, 速度 }) => { if (Math.abs(offset.x) > 100 || Math.abs(velocity.x) > 500) { onDismiss() } }} className="p-4 bg-card 边框圆角-lg" > 滑动即可关闭） } ### 使用动画加载状态从“framer-motion”导入{motion} 导出函数 LoadingSpinner() { 返回（ <运动.div 动画={{旋转：360}} 过渡={{重复：无限，持续时间：1，缓和：“线性”}} className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full" /> ） } 导出函数 PulseLoader() { 返回（
{[0, 1, 2].map((i) => ( <运动.div 键={i} 动画={{ 比例：[1, 1.2, 1], 不透明度：[0.5, 1, 0.5] }} 过渡={{ 持续时间：1，重复：无穷大，延迟：i 0.2 }} className =“w-3 h-3 bg-primary rounded-full” /> ))}
） } ### 尊重减少运动从“framer-motion”导入{motion，useReducedMotion} 导出函数 AccessibleAnimation({ 儿童 }: { 儿童: React.ReactNode }) { const shouldReduceMotion = useReducedMotion() 返回（ <运动.div 初始={shouldReduceMotion ？假：{不透明度：0，y：20}} 动画={shouldReduceMotion ？ false : { 不透明度: 1, y: 0 }} 过渡={shouldReduceMotion ？ { 持续时间：0 } ：{ 持续时间：0.5 }} > {孩子} ） } ### 性能最佳实践动画内容（GPU 加速）： * `不透明度` * `transform`（平移、缩放、旋转） * `滤镜`（模糊、亮度）要避免什么动画： * `width`、`height` （导致布局抖动） * `top`、`left`、`margin`、`padding` （使用 `transform:translate` 代替） * `color`, `background-color` (昂贵，谨慎使用) 优化技巧： // 使用 will-change 以获得更流畅的动画 // 延迟加载运动组件从“framer-motion”导入{motion、LazyMotion、domAnimation} <运动.div /> // 降低低端设备上的动画复杂度 const PreferredsReducedMotion = window.matchMedia('(prefers-reduced-motion：reduce)').matches ### 何时使用 Framer Motion 与 CSS 使用 CSS 动画： * 简单的悬停效果 * 基本转换 * 静态关键帧动画 * 对于简单的情况有更好的性能使用成帧器运动： * 复杂的编排（交错列表、序列） * 基于手势的交互（拖动、滑动） * 布局动画（状态之间变形） * 基于滚动的动画 * 基于状态的动态动画 * 需要更简单的控制和声明性 API ## 何时申请在以下情况下使用此技能： * 使用 TypeScript 构建现代 React 应用程序 * 实现可访问的、生产质量的 UI 组件 * 使用 Tailwind CSS 进行样式设置 * 集成shadcn/ui组件库 * 使用 Vite + React 建立新项目 * 创建可重用的组件库 * 实施具有一致模式的设计系统 * 构建仪表板、管理面板或 Web 应用程序该堆栈为现代 Web 开发提供了出色的开发人员体验、类型安全性、可访问性和性能。

网络工件生成器

包含技能