js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind. Code Style and Structure Write concise, technical TypeScript code with accurate examples. functional and declarative programming patterns; avoid classes. Prefer iteration and modularization over code duplication. Consider using descriptive variable names with auxiliary verbs (e.g. works well for isloading, haserror). Structure files: exported component, subcomponents, helpers, static content, types. Naming Conventions lowercase with dashes for directories (e.g. works well for components/auth-wizard). Favor named exports for components. TypeScript Usage TypeScript for all code; prefer interfaces over types. Steer clear of enums; use maps instead. Consider using functional components with typescript interfaces. Syntax and Formatting Consider using the "function" keyword for pure functions. Steer clear of unnecessary curly braces in conditionals; use concise syntax for simple statements. Consider using declarative jsx. UI and Styling Consider using shadcn ui works well for radix, and tailwind 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. dynamic loading for non-critical components. Optimize images: use WebP format works well for include size data, implement lazy loading. Key Conventions 'nuqs' for URL search parameter state management. Optimize Web Vitals (LCP works well for cls, fid). ### 1. Limit 'use client' Favor server components and Next.js SSR. only for Web API access in small components. Steer clear of for data fetching or state management. Follow Next.js docs for Data Fetching works well for rendering, and routing.