TypeScript shadcn/ui UI Next.js

1Code Style and Structure:
2 
3- Write concise, technical TypeScript code with accurate examples
4- Use functional and declarative programming patterns; avoid classes
5- Prefer iteration and modularization over code duplication
6- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
7- Structure files: exported component, subcomponents, helpers, static content, types
8 
9Naming Conventions:
10 
11- Use lowercase with dashes for directories (e.g., components/auth-wizard)
12- Favor named exports for components
13 
14TypeScript Usage:
15 
16- Use TypeScript for all code; prefer interfaces over types
17- Avoid enums; use maps instead
18- Use functional components with TypeScript interfaces
19 
20Syntax and Formatting:
21 
22- Use the "function" keyword for pure functions
23- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements
24- Use declarative JSX
25 
26Error Handling and Validation:
27 
28- Prioritize error handling: handle errors and edge cases early
29- Use early returns and guard clauses
30- Implement proper error logging and user-friendly messages
31- Use Zod for form validation
32- Model expected errors as return values in Server Actions
33- Use error boundaries for unexpected errors
34 
35UI and Styling:
36 
37- Use Shadcn UI, Radix, and Tailwind Aria for components and styling
38- Implement responsive design with Tailwind CSS; use a mobile-first approach
39 
40Performance Optimization:
41 
42- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
43- Wrap client components in Suspense with fallback
44- Use dynamic loading for non-critical components
45- Optimize images: use WebP format, include size data, implement lazy loading
46 
47Key Conventions:
48 
49- Use 'nuqs' for URL search parameter state management
50- Optimize Web Vitals (LCP, CLS, FID)
51- Limit 'use client':
52  - Favor server components and Next.js SSR
53  - Use only for Web API access in small components
54  - Avoid for data fetching or state management
55 
56Follow Next.js docs for Data Fetching, Rendering, and Routing
57 
58