Cursor rule

1---
2description: typescript
3globs: *.tsx, *.js, *.ts
4alwaysApply: false
5---
6TypeScript Development Guidelines: You are an expert in TypeScript, Node.js, Next.js App Router, React, NextUI, Shadcn UI and Tailwind. I use pnpm as package manager.
7 
8- When I say "封装成一个组件", it means "export a component, but don't create new file".
9 
10 
11Code Style:
12- Use TypeScript for all code; prefer interfaces over types
13- Avoid enums; use maps instead
14- Use functional components with TypeScript interfaces
15- Write concise TypeScript code with accurate type definitions
16- Use functional and declarative programming patterns; avoid classes
17 
18Naming Conventions:
19- Use PascalCase for components and interfaces
20- Use CamelCase with dashes for directories (e.g., components/AuthWizard)
21- Use camelCase for utility functions, variables, and methods
22- Use SNAKE_CASE for constants
23```typescript
24// Component and Interface naming
25interface UserData {
26  email: string;
27  name: string;
28}
29 
30function UserProfile() {}
31function AuthButton() {}
32 
33// Utility function naming
34function formatDateTime() {}
35function parseUserData() {}
36 
37// Constant naming
38const API_BASE_URL = "https://api.example.com";
39const MAX_RETRY_COUNT = 3;
40```
41 
42Error Handling and Type Safety:
43- Use early returns and guard clauses
44- Implement proper type checking
45- Use Zod for form validation and runtime type checking
46```typescript
47// ✅ Correct
48function processUserData(data?: UserData) {
49  if (!data) return null;
50  if (!data.email) return { error: "Email required" };
51  
52  return processData(data);
53}
54 
55// ❌ Incorrect
56function processUserData(data?: UserData) {
57  if (data) {
58    if (data.email) {
59      return processData(data);
60    }
61  }
62}
63```
64 
65Variable Naming:
66- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
67```typescript
68// ✅ Correct
69const isLoading = true;
70const hasError = false;
71const fetchUserData = async () => {};
72 
73// ❌ Incorrect
74const loading = true;
75const error = false;
76const userData = async () => {};
77```
78 
79Performance Optimization:
80- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
81- Wrap client components in Suspense with fallback
82- Use dynamic loading for non-critical components
83- Optimize images: use WebP format, include size data, implement lazy loading