UI样式技能

UI样式技能

全面的技能，用于创建美观、可访问的用户界面，结合shadcn/ui组件、Tailwind CSS实用样式和基于画布的视觉设计系统。

参考

• shadcn/ui: https://ui.shadcn.com/llms.txt
• Tailwind CSS: https://tailwindcss.com/docs

何时使用此技能

当：

• 使用基于React的框架（Next.js、Vite、Remix、Astro）构建UI
• 实现可访问组件（对话框、表单、表格、导航）
• 使用实用优先CSS方法进行样式设计
• 创建响应式、移动优先布局
• 实现深色模式和主题自定义
• 使用一致的令牌构建设计系统
• 生成视觉设计、海报或品牌材料
• 通过即时视觉反馈进行快速原型设计
• 添加复杂的UI模式（数据表、图表、命令面板）

核心堆栈

组件层：shadcn/ui

• 通过Radix UI原语预构建的可访问组件
• 复制粘贴分发模型（组件存在于您的代码库中）
• 优先使用TypeScript，具有完整的类型安全
• 用于复杂UI的可组合原语
• 基于CLI的安装和管理

样式层：Tailwind CSS

• 实用优先CSS框架
• 构建时处理，零运行时开销
• 移动优先响应式设计
• 一致的设计令牌（颜色、间距、排版）
• 自动消除死代码

视觉设计层：画布

• 博物馆级视觉组合
• 哲学驱动的设计方法
• 复杂的视觉传达
• 最小文本，最大视觉冲击力
• 系统模式和精致美学

快速开始

组件 + 样式设置

使用Tailwind安装shadcn/ui：

npx shadcn@latest init

CLI提示框架、TypeScript、路径和主题偏好。这会配置shadcn/ui和Tailwind CSS。

添加组件：

npx shadcn@latest add button card dialog form

使用实用样式的组件：

import { Button } from "@/components/ui/button"
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card"

export function Dashboard() {
  return (
    <div className="container mx-auto p-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
      <Card className="hover:shadow-lg transition-shadow">
        <CardHeader>
          <CardTitle className="text-2xl font-bold">Analytics</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-muted-foreground">View your metrics</p>
          <Button variant="default" className="w-full">
            View Details
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

替代方案：仅Tailwind设置

Vite项目：

npm install -D tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
export default { plugins: [tailwindcss()] }

/* src/index.css */
@import "tailwindcss";

组件库指南

全面的组件目录，包含使用模式、安装和组合示例。

参见：references/shadcn-components.md

涵盖：

• 表单和输入组件（Button、Input、Select、Checkbox、Date Picker、表单验证）
• 布局和导航（Card、Tabs、Accordion、Navigation Menu）
• 覆盖层和对话框（Dialog、Drawer、Popover、Toast、Command）
• 反馈和状态（Alert、Progress、Skeleton）
• 显示组件（Table、Data Table、Avatar、Badge）

主题和自定义

主题配置、CSS变量、深色模式实现和组件自定义。

参见：references/shadcn-theming.md

涵盖：

• 使用next-themes设置深色模式
• CSS变量系统
• 颜色自定义和调色板
• 组件变体自定义
• 主题切换实现

可访问性模式

ARIA模式、键盘导航、屏幕阅读器支持和可访问组件使用。

参见：references/shadcn-accessibility.md

涵盖：

• Radix UI可访问性功能
• 键盘导航模式
• 焦点管理
• 屏幕阅读器公告
• 表单验证可访问性

Tailwind实用程序

用于布局、间距、排版、颜色、边框和阴影的核心实用类。

参见：references/tailwind-utilities.md

涵盖：

• 布局实用程序（Flexbox、Grid、定位）
• 间距系统（内边距、外边距、间隙）
• 排版（字体大小、权重、对齐、行高）
• 颜色和背景
• 边框和阴影
• 用于自定义样式的任意值

响应式设计

移动优先断点、响应式实用程序和自适应布局。

参见：references/tailwind-responsive.md

涵盖：

• 移动优先方法
• 断点系统（sm、md、lg、xl、2xl）
• 响应式实用程序模式
• 容器查询
• 最大宽度查询
• 自定义断点

Tailwind自定义

配置文件结构、自定义实用程序、插件和主题扩展。

参见：references/tailwind-customization.md

涵盖：

• @theme指令用于自定义令牌
• 自定义颜色和字体
• 间距和断点扩展
• 自定义实用程序创建
• 自定义变体
• 层组织（@layer base、components、utilities）
• 组件提取的Apply指令

视觉设计系统

基于画布的设计理念、视觉传达原则和复杂组合。

参见：references/canvas-design-system.md

涵盖：

• 设计理念方法
• 视觉传达而非文本
• 系统模式和组合
• 颜色、形式和空间设计
• 最小文本集成
• 博物馆级执行
• 多页设计系统

实用脚本

用于组件安装和配置生成的Python自动化。

shadcn_add.py

添加带有依赖处理的shadcn/ui组件：

python scripts/shadcn_add.py button card dialog

tailwind_config_gen.py

生成带有自定义主题的tailwind.config.js：

python scripts/tailwind_config_gen.py --colors brand:blue --fonts display:Inter

最佳实践

1. 组件组合：从简单、可组合的原语构建复杂UI
2. 实用优先样式：直接使用Tailwind类；仅为真正的重复提取组件
3. 移动优先响应式：从移动样式开始，分层响应式变体
4. 可访问性优先：利用Radix UI原语，添加焦点状态，使用语义HTML
5. 设计令牌：使用一致的间距比例、调色板、排版系统
6. 深色模式一致性：对所有主题元素应用深色变体
7. 性能：利用自动CSS清除，避免动态类名
8. TypeScript：使用完整的类型安全以获得更好的开发体验
9. 视觉层次结构：让组合引导注意力，有意使用间距和颜色
10. 专家工艺：每个细节都很重要 - 将UI视为一种工艺

参考导航

组件库

• references/shadcn-components.md - 完整组件目录
• references/shadcn-theming.md - 主题和自定义
• references/shadcn-accessibility.md - 可访问性模式

样式系统

• references/tailwind-utilities.md - 核心实用类
• references/tailwind-responsive.md - 响应式设计
• references/tailwind-customization.md - 配置和扩展

视觉设计

• references/canvas-design-system.md - 设计理念和画布工作流程

自动化

• scripts/shadcn_add.py - 组件安装
• scripts/tailwind_config_gen.py - 配置生成

常见模式

带验证的表单：

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import * as z from "zod"
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8)
})

export function LoginForm() {
  const form = useForm({
    resolver: zodResolver(schema),
    defaultValues: { email: "", password: "" }
  })

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(console.log)} className="space-y-6">
        <FormField control={form.control} name="email" render={({ field }) => (
          <FormItem>
            <FormLabel>Email</FormLabel>
            <FormControl>
              <Input type="email" {...field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )} />
        <Button type="submit" className="w-full">Sign In</Button>
      </form>
    </Form>
  )
}

带有深色模式的响应式布局：

<div className="min-h-screen bg-white dark:bg-gray-900">
  <div className="container mx-auto px-4 py-8">
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <Card className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
        <CardContent className="p-6">
          <h3 className="text-xl font-semibold text-gray-900 dark:text-white">
            Content
          </h3>
        </CardContent>
      </Card>
    </div>
  </div>
</div>

资源

• shadcn/ui文档：https://ui.shadcn.com
• Tailwind CSS文档：https://tailwindcss.com
• Radix UI：https://radix-ui.com
• Tailwind UI：https://tailwindui.com
• Headless UI：https://headlessui.com
• v0（AI UI生成器）：https://v0.dev