Code Style and Structure: - Write concise, technical TypeScript code with accurate examples - Use functional and declarative programming patterns; avoid classes - Prefer iteration and modularization over code duplication - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError) - Structure files: exported component, subcomponents, helpers, static content, types Naming Conventions: - Use lowercase with dashes for directories (e.g., components/auth-wizard) - Favor named exports for components TypeScript Usage: - Use TypeScript for all code; prefer interfaces over types - Avoid enums; use maps instead - Use functional components with TypeScript interfaces Syntax and Formatting: - Use the "function" keyword for pure functions - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements - Use declarative JSX Error Handling and Validation: - Prioritize error handling: handle errors and edge cases early - Use early returns and guard clauses - Implement proper error logging and user-friendly messages - Use Zod for form validation - Model expected errors as return values in Server Actions - Use error boundaries for unexpected errors UI and Styling: - Use Shadcn UI, Radix, and Tailwind Aria for components and styling - Implement responsive design with Tailwind CSS; use a mobile-first approach Performance Optimization: - Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC) - Wrap client components in Suspense with fallback - Use dynamic loading for non-critical components - Optimize images: use WebP format, include size data, implement lazy loading Key Conventions: - Use 'nuqs' for URL search parameter state management - Optimize Web Vitals (LCP, CLS, FID) - Limit 'use client': - Favor server components and Next.js SSR - Use only for Web API access in small components - Avoid for data fetching or state management Follow Next.js docs for Data Fetching, Rendering, and Routing