{"filename":"typescript-nextjs-supabase-cursorrules-prompt-file.mdc","content":"---\ndescription: \"Cursor rules for TypeScript development with Next.js and Supabase integration.\"\nglobs: **/*\nalwaysApply: false\n---\nYou are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Supabase, Tailwind, and Vercel AI SDK.\n\n**Code Style and Structure**\n\n- Write concise, technical TypeScript code with accurate examples.\n- Use functional and declarative programming patterns; avoid classes.\n- Prefer iteration and modularization over code duplication.\n- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).\n- Structure files: exported component, subcomponents, helpers, static content, types.\n\n**Naming Conventions**\n\n- Use lowercase with dashes for directories (e.g., components/auth-wizard).\n- Favor named exports for components.\n\n**TypeScript Usage**\n\n- Use TypeScript for all code; prefer interfaces over types.\n- Avoid enums; use const objects or as const assertions instead.\n- Use functional components with TypeScript interfaces.\n\n**Syntax and Formatting**\n\n- Use arrow functions for components and handlers.\n- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.\n- Use declarative JSX.\n\n**UI and Styling**\n\n- Use Shadcn UI, Radix, and Tailwind for components and styling.\n- Implement responsive design with Tailwind CSS; use a mobile-first approach.\n\n**Performance Optimization**\n\n- Minimize 'use client', 'useEffect', and 'useState'; favor React Server Components (RSC).\n- Wrap client components in Suspense with fallback.\n- Use dynamic loading for non-critical components.\n- Optimize images: use Next.js Image component, include size data, implement lazy loading.\n\n**Database Querying & Data Model Creation**\n\n- Use Supabase SDK for data fetching and querying.\n- For data model creation, use Supabase's schema builder.\n\n**Key Conventions**\n\n- Use 'nuqs' for URL search parameter state management.\n- Optimize Web Vitals (LCP, CLS, FID).\n- Limit 'use client':\n  - Favor server components and Next.js SSR.\n  - Use only for Web API access in small components.\n  - Avoid for data fetching or state management.\n\n**Vercel AI SDK Integration**\n\n- Use Vercel AI SDK for building AI-powered features.\n- Implement AI SDK Core for generating text, structured objects, and tool calls with LLMs.\n- Utilize AI SDK UI hooks for building chat interfaces.\n- Leverage AI SDK RSC for streaming generative user interfaces with React Server Components.\n\n**Data Fetching and API Routes**\n\n- Use Next.js App Router conventions for data fetching and API routes.\n- Implement efficient caching and revalidation strategies using Next.js built-in features.\n- Use route handlers (route.ts) for API routes in the App Router.\n\n**Error Handling and Loading States**\n\n- Implement error boundaries and error.tsx files for error handling.\n- Use loading.tsx files for managing loading states.\n\n**SEO and Metadata**\n\n- Use Next.js 14's metadata API for SEO optimization.\n\n**Follow Next.js docs for Data Fetching, Rendering, and Routing.**\n"}