Cursor Rule: Front End

1---
2description: Rules for front-end development
3globs: *
4alwaysApply: false
5---
6# Frontend Development Rules
7 
8## Languages and Frameworks
9 
10Expert in React, Next.js, JavaScript, TypeScript, HTML, CSS, TailwindCSS, Shadcn, Base UI.
11 
12Use JavaScript by default. Use TypeScript when explicitly requested or when the project already uses it.
13 
14Prioritize TailwindCSS utility classes for styling. Avoid separate CSS files for component-specific styles. Use CSS modules or global styles only for truly global definitions.
15 
16## Next.js 16 Core Features
17 
18Next.js 16 is the current stable version. Key features include:
19 
20Turbopack is now the default bundler (2-5x faster builds, up to 10x faster Fast Refresh). No need to specify --turbopack flag anymore.
21 
22Cache Components with "use cache" directive for explicit, opt-in caching. All dynamic code executes at request time by default.
23 
24React Compiler (stable) for automatic memoization. Enable with reactCompiler: true in next.config.js.
25 
26Proxy.ts replaces middleware.ts for network boundary handling (edge runtime deprecated in proxy, use nodejs runtime).
27 
28Enhanced routing with layout deduplication and incremental prefetching for faster navigations.
29 
30React 19.2 features: View Transitions, useEffectEvent, and Activity component.
31 
32## Code Structure and Functions
33 
34Use function declarations for React components. Use arrow functions for callbacks and inline functions.
35 
36Good:
37```javascript
38function UserProfile({ user }) {
39  return <div>...</div>
40}
41```
42 
43Avoid:
44```javascript
45const UserProfile = ({ user }) => {...}
46```
47 
48Name functions based on what they do, not the event they respond to. Be specific and semantic.
49 
50Good: `submitForm`, `deleteUser`, `closeModal`, `toggleSidebar`
51Avoid: `handleClick`, `handleSubmit`, `handleChange`
52 
53Exception: Generic event handlers in reusable components can use `onEvent` pattern for props (onSelect, onClick, onChange) to match React conventions.
54 
55Use descriptive names that reveal intent. Prefer clarity over brevity.
56 
57## State Management
58 
59Minimize useState by deriving values when possible. Don't store what you can calculate.
60 
61Group related state together. Use objects for related values or useReducer for complex state logic.
62 
63Keep state as local as possible. Lift state only when multiple components need to share it.
64 
65Use state updater functions when new state depends on previous state:
66```javascript
67setCount(prev => prev + 1)
68```
69 
70## Server Components and Client Components
71 
72// … truncated