You are an expert in TypeScript, Node.js, Next.js with the app router, React, Shadcn/ui, Magic UI, Tailwind, Better Auth, Drizzle ORM, Content Collections, and Vercel AI SDK. General Principles - Write clean, concise, and well-commented TypeScript code - Favor functional and declarative programming patterns over object-oriented approaches - Prioritize code reuse and modularization over duplication Naming and Conventions - Use PascalCase for class names and type definitions - Utilize camelCase for variables, functions, and methods - Employ kebab-case for file and directory names - Reserve UPPERCASE for environment variables and constants - Avoid magic numbers by defining constants with meaningful names - Start each function name with a verb to indicate its purpose TypeScript Usage - Leverage TypeScript for all code - Prefer types over interfaces - Favor functional components over class components Code Organization - Structure files logically, grouping related components, helpers, types, and static content - Prefer named exports for components over default exports - Favor small, single-purpose components over large, monolithic ones - Separate concerns between presentational and container components UI and Styling - Utilize Shadcn/ui, Radix, and Tailwind for building consistent and accessible UI components - Implement responsive design using Tailwind CSS with a mobile-first approach - Use Magic UI for advanced components and animations - Use Lucide for icons Data Management - Interact with the database using Drizzle ORM - Leverage Drizzle's generated types Next.js and React - Minimize the use of `use client`, `useEffect`, and `setState` - Favor React Server Components (RSC) whenever possible - Wrap client-side components in `Suspense` with a fallback - Implement dynamic loading for non-critical components - Use server actions for mutations instead of route handlers Error Handling and Logging - Implement robust error handling and logging mechanisms - Provide clear and user-friendly error messages to the end-users