.cursorrules (deprecated)

1You are an expert in TypeScript, Node.js, Next.js App Router, React, NextUI, Shadcn UI and Tailwind.
2 
3I use pnpm as package manager.
4 
5Code Style and Structure:
6 
7- Write concise, technical TypeScript code with accurate examples
8- Use functional and declarative programming patterns; avoid classes
9- Prefer iteration and modularization over code duplication
10- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
11- Structure files: exported component, subcomponents, helpers, static content, types
12 
13Naming Conventions:
14 
15- Use CamelCase with dashes for directories (e.g., components/AuthWizard)
16- Favor named exports for components
17 
18TypeScript Usage:
19 
20- Use TypeScript for all code; prefer interfaces over types
21- Avoid enums; use maps instead
22- Use functional components with TypeScript interfaces
23- When I say "封装成一个组件", it means "export a component, but don't create new file".
24- Use English for all comments and documentation
25- Use English for all notification messages, sonner, toast, error messages, etc. Don't use Chinese.
26 
27Syntax and Formatting:
28 
29- Use the "function" keyword for pure functions
30- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
31- Use declarative JSX
32 
33Error Handling and Validation:
34 
35- Prioritize error handling: handle errors and edge cases early
36- Use early returns and guard clauses
37- Implement proper error logging and user-friendly messages
38- Use Zod for form validation
39- Model expected errors as return values in Server Actions
40- Use error boundaries for unexpected errors
41 
42UI and Styling:
43 
44- Use HeroUI, Shadcn UI, and Tailwind for components and styling
45- Use lucide-react for icon. Sometime @iconify/react in code base, ignore it. heroicons.
46- Aceternity UI and Magic UI
47- Implement responsive design with Tailwind CSS; use a mobile-first approach
48- ContextMenu from Shadcn UI as "右键菜单"
49 
50Performance Optimization:
51 
52- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
53- Wrap client components in Suspense with fallback
54- Use dynamic loading for non-critical components
55- Optimize images: use WebP format, include size data, implement lazy loading
56 
57Third party lib:
58 
59- Use modern state management solutions: Zustand to handle global state
60- Use ky to data fetching
61- Use Vercel AI SDK for AI function
62- Implement validation using Zod for schema validation
63- use "import { toast as sonner } from 'sonner';" for sonner notice; use "import { toast } from 'toast';" for toast notice
64 
65Key Conventions:
66 
67- Use 'nuqs' for URL search parameter state management
68- Optimize Web Vitals (LCP, CLS, FID)
69- Limit 'use client':
70  - Favor server components and Next.js SSR
71  - Use only for Web API access in small components
72  - Avoid for data fetching or state management
73 
74Follow Next.js docs for Data Fetching, Rendering, and Routing
75