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- ContextMenu from Shadcn UI as "右键菜单"
13- Aceternity UI and Magic UI
14- Use lucide-react for icon. Sometime @iconify/react in code base, ignore it. heroicons.
15- HeroUI v3: uses compound component patterns (Card.Header, Card.Content, Avatar.Image, etc.)
16- No HeroUIProvider needed in v3
17- Removed components in v3: Navbar (use HTML/Tailwind), Image (use img/next-image), Spacer (use CSS)
18- Divider renamed to Separator
19- Button: no color prop, use variant (primary/secondary/tertiary/ghost/outline/danger)
20- Toast:
21```tsx
22import {addToast, Button} from "@heroui/react";
23...
24<Button
25  variant="tertiary"
26  onPress={() => {
27    addToast({
28      title: "Toast Title",
29      description: "Toast Description",
30      hideIcon: true,
31    });
32  }}
33>
34  Hidden Icon
35</Button>
36...
37```
38 
39Tailwind CSS 使用规范:
40- 采用移动优先的响应式设计
41```tsx
42// ✅ 正确示例
43<div className="w-full md:w-1/2 lg:w-1/3">
44// ❌ 错误示例
45<div className="lg:w-1/3 md:w-1/2 w-full">
46```
47 
48- 使用语义化的颜色变量
49```tsx
50// ✅ 正确示例
51<button className="bg-primary-600 hover:bg-primary-700">
52// ❌ 错误示例
53<button className="bg-blue-600 hover:bg-blue-700">
54```
55 
56布局规范:
57- 使用 Flexbox 和 Grid 进行布局
58- 使用 gap 替代 margin 处理元素间距
59```tsx
60// ✅ 正确示例
61<div className="flex gap-4">
62// ❌ 错误示例
63<div className="flex [&>*]:mr-4">
64```
65 
66响应式设计断点:
67- sm: 640px
68- md: 768px
69- lg: 1024px
70- xl: 1280px
71- 2xl: 1536px
72 
73可访问性规范:
74- 实现 ARIA 标签
75- 确保充足的颜色对比度
76- 支持屏幕阅读器
77- 添加键盘快捷键
78```tsx
79// ✅ 正确示例
80<button
81  aria-label="关闭对话框"
82  className="text-gray-500 hover:text-gray-700"
83  onClick={onClose}
84>
85```
86 
87组件最佳实践:
88- 组件使用函数式声明
89- Props 使用 TypeScript 接口定义
90- 实现合适的加载和错误状态
91```tsx
92interface ButtonProps {
93  isLoading?: boolean;
94  variant?: 'primary' | 'secondary';
95  children: React.ReactNode;
96}
97 
98function Button({ isLoading, variant = 'primary', children }: ButtonProps) {
99  return (
100    <button
101      className={cn(
102        'px-4 py-2 rounded-md',
103        variant === 'primary' ? 'bg-primary-600' : 'bg-secondary-600',
104        isLoading && 'opacity-50 cursor-not-allowed'
105      )}
106      disabled={isLoading}
107    >
108      {isLoading ? <LoadingSpinner /> : children}
109    </button>
110  );
111}
112```
113 
114性能优化:
115- 使用 React.memo() 优化渲染
116- 实现组件懒加载
117- 优化图片加载
118```tsx
119// 组件懒加载
120const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
121  loading: () => <LoadingSpinner />
122});
123 
124// 图片优化
125<Image
126  src="/hero.jpg"
127  alt="Hero image"
128  width={1200}
129  height={600}
130  placeholder="blur"
131  priority
132/>
133```
134 
135主题和暗色模式:
136- 使用 Tailwind 的暗色模式
137- 实现一致的颜色系统
138```tsx
139// ✅ 正确示例
140<div className="bg-white dark:bg-gray-900">
141  <p className="text-gray-900 dark:text-gray-100">
142```
143 
144```
145 
146```