.cursorrules (deprecated)

1You are an expert in Solidity, TypeScript, Node.js, Next.js 14 App Router, React, Vite, Viem v2, Wagmi v2, Shadcn UI, Radix UI, and Tailwind Aria.
2 
3Key Principles:
4 
5- Write concise, technical responses with accurate TypeScript examples.
6- Use functional, declarative programming. Avoid classes.
7- Prefer iteration and modularization over duplication.
8- Use descriptive variable names with auxiliary verbs (e.g., isLoading).
9- Use lowercase with dashes for directories (e.g., components/auth-wizard).
10- Favor named exports for components.
11- Use the Receive an Object, Return an Object (RORO) pattern.
12 
13JavaScript/TypeScript:
14 
15- Use "function" keyword for pure functions. Omit semicolons.
16- Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.
17- File structure: Exported component, subcomponents, helpers, static content, types.
18- Avoid unnecessary curly braces in conditional statements.
19- For single-line statements in conditionals, omit curly braces.
20- Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
21- Prioritize error handling and edge cases:
22  - Handle errors and edge cases at the beginning of functions.
23  - Use early returns for error conditions to avoid deeply nested if statements.
24  - Place the happy path last in the function for improved readability.
25  - Avoid unnecessary else statements; use if-return pattern instead.
26  - Use guard clauses to handle preconditions and invalid states early.
27  - Implement proper error logging and user-friendly error messages.
28  - Consider using custom error types or error factories for consistent error handling.
29 
30Dependencies:
31 
32- Next.js 14 App Router
33- Wagmi v2
34- Viem v2
35 
36React/Next.js:
37 
38- Use functional components and TypeScript interfaces.
39- Use declarative JSX.
40- Use function, not const, for components.
41- Use Shadcn UI, Radix, and Tailwind Aria for components and styling.
42- Implement responsive design with Tailwind CSS.
43- Use mobile-first approach for responsive design.
44- Place static content and interfaces at file end.
45- Use content variables for static content outside render functions.
46- Minimize 'use client', 'useEffect', and 'setState'. Favor RSC.
47- Use Zod for form validation.
48- Wrap client components in Suspense with fallback.
49- Use dynamic loading for non-critical components.
50- Optimize images: WebP format, size data, lazy loading.
51- Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.
52- Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.
53- Use useActionState with react-hook-form for form validation.
54- Code in services/ dir always throw user-friendly errors that tanStackQuery can catch and show to the user.
55- Use next-safe-action for all server actions:
56  - Implement type-safe server actions with proper validation.
57  - Utilize the `action` function from next-safe-action for creating actions.
58  - Define input schemas using Zod for robust type checking and validation.
59  - Handle errors gracefully and return appropriate responses.
60  - Use import type { ActionResponse } from '@/types/actions'
61  - Ensure all server actions return the ActionResponse type
62  - Implement consistent error handling and success responses using ActionResponse
63  - Example:
64```typescript
65    'use server'
66    import { createSafeActionClient } from 'next-safe-action'
67    import { z } from 'zod'
68    import type { ActionResponse } from '@/app/actions/actions'
69    const schema = z.object({
70      value: z.string()
71    })
72    export const someAction = createSafeActionClient()
73      .schema(schema)
74      .action(async (input): Promise => {
75        try {
76          // Action logic here
77          return { success: true, data: /* result */ }
78        } catch (error) {
79          return { success: false, error: error instanceof AppError ? error : appErrors.UNEXPECTED_ERROR, }
80        }
81      })
82```
83 
84Key Conventions:
85 
861. Rely on Next.js App Router for state changes.
872. Prioritize Web Vitals (LCP, CLS, FID).
883. Minimize 'use client' usage:
89  - Prefer server components and Next.js SSR features.
90  - Use 'use client' only for Web API access in small components.
91  - Avoid using 'use client' for data fetching or state management.
92 
93Refer to Next.js documentation for Data Fetching, Rendering, and Routing best practices.
94 
95