用途：该技能面向使用 Tailwind CSS 与 shadcn/ui 的前端样式开发，提供组件安装、组件用法、主题定制、响应式设计与常见工具类模式参考。
主要能力：
- shadcn/ui 安装与组件添加。初始化：npx shadcn@latest init；添加组件：npx shadcn@latest add button、card、form、input、accordion、dialog、dropdown-menu、tabs 等。组件位于代码库中而非依赖包。
- 组件用法：从 @/components/ui/button、card、accordion 等路径导入；Button 支持 default、secondary、outline、ghost、destructive 变体及 sm、lg 尺寸；Card 由 CardHeader、CardTitle、CardContent 组合。
- CSS 变量主题：在 globals.css 的 @layer base 中通过 :root 定义 --background、--foreground、--primary、--secondary、--muted、--accent、--border、--ring、--radius 等变量，并可用 [data-theme="earth"] 等选择器切换主题。
- 响应式设计：移动优先，使用 md:、lg: 前缀控制内边距、字号、网格列数、flex 方向与显隐；容器模式为 container mx-auto px-4 md:px-6。
- 常见工具类：flex 居中、grid 加 gap、space-y/space-x 间距、排版字号与字重、hover/focus 状态、aspect-video 宽高比等。
- 表单：结合 react-hook-form、zodResolver 与 Form、FormField、FormItem、FormLabel、FormControl、FormMessage、Input 使用。
- cn() 工具：在 lib/utils.ts 中用 clsx 与 tailwind-merge 实现 cn(...inputs)，用于条件合并类名并允许 props 覆盖。
- 动画与暗色模式：transition-all、transition-colors、transition-transform、animate-pulse、animate-spin、animate-bounce；在 html 上切换 dark 类并使用 dark: 前缀。
使用方式：按需执行上述安装命令，导入对应组件，在 className 中组合 Tailwind 工具类，并通过 CSS 变量调整主题。
适用场景：React 项目中使用 Tailwind CSS 与 shadcn/ui 构建界面、表单与响应式布局时参考。
限制：资料未提供版本要求、框架兼容范围、性能数据或收费信息；示例代码需按项目实际情况调整。