Cursor rule

1---
2description: 
3globs: *.tsx
4alwaysApply: false
5---
6UI and Styling Guidelines:
7 
8Component Library:
9- Use HeroUI and Tailwind for components and styling
10- Use lucide-react for icon. Sometime @iconify/react in code base, ignore it.
11- Implement responsive design with Tailwind CSS; use a mobile-first approach
12 
13Tailwind CSS 使用规范:
14- 采用移动优先的响应式设计
15```tsx
16// ✅ 正确示例
17<div className="w-full md:w-1/2 lg:w-1/3">
18```
19 
20布局规范:
21- 使用 Flexbox 和 Grid 进行布局
22- 使用 gap 替代 margin 处理元素间距
23```tsx
24// ✅ 正确示例
25<div className="flex gap-4">
26// ❌ 错误示例
27<div className="flex [&>*]:mr-4">
28```
29 
30响应式设计断点:
31- sm: 640px
32- md: 768px
33- lg: 1024px
34- xl: 1280px
35- 2xl: 1536px
36 
37可访问性规范:
38- 实现 ARIA 标签
39- 确保充足的颜色对比度
40- 支持屏幕阅读器
41- 添加键盘快捷键
42```tsx
43// ✅ 正确示例
44<button
45  aria-label="关闭对话框"
46  className="text-gray-500 hover:text-gray-700"
47  onClick={onClose}
48>
49```
50 
51组件最佳实践:
52- 组件使用函数式声明
53- Props 使用 TypeScript 接口定义
54- 实现合适的加载和错误状态
55```tsx
56interface ButtonProps {
57  isLoading?: boolean;
58  variant?: 'primary' | 'secondary';
59  children: React.ReactNode;
60}
61 
62function Button({ isLoading, variant = 'primary', children }: ButtonProps) {
63  return (
64    <button
65      className={cn(
66        'px-4 py-2 rounded-md',
67        variant === 'primary' ? 'bg-primary-600' : 'bg-secondary-600',
68        isLoading && 'opacity-50 cursor-not-allowed'
69      )}
70      disabled={isLoading}
71    >
72      {isLoading ? <LoadingSpinner /> : children}
73    </button>
74  );
75}
76```
77 
78性能优化:
79- 使用 React.memo() 优化渲染
80- 实现组件懒加载
81- 优化图片加载
82```tsx
83// 组件懒加载
84const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
85  loading: () => <LoadingSpinner />
86});
87 
88// 图片优化
89<Image
90  src="/hero.jpg"
91  alt="Hero image"
92  width={1200}
93  height={600}
94  placeholder="blur"
95  priority
96/>
97```
98 
99主题和暗色模式:
100- use `bg-background` and `text-foreground`
101- 使用 Tailwind 的暗色模式, 实现一致的颜色系统
102```tsx
103// ✅ 正确示例
104<div className="bg-background">
105  <p className="text-foreground">
106```
107- 使用语义化的颜色变量
108```tsx
109// ✅ 正确示例
110<button className="bg-primary-600 hover:bg-primary-700">
111// ❌ 错误示例
112<button className="bg-blue-600 hover:bg-blue-700">
113```