TypeScript Zod Tailwind CSS Next.js

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