{"filename":"typescript-shadcn-ui-nextjs-cursorrules-prompt-fil.mdc","content":"---\ndescription: \"Cursor rules for TypeScript development with shadcn/ui and Next.js integration.\"\nglobs: **/*\nalwaysApply: false\n---\nCode 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\nNaming Conventions:\n\n- Use lowercase with dashes for directories (e.g., components/auth-wizard)\n- Favor named exports for components\n\nTypeScript Usage:\n\n- Use TypeScript for all code; prefer interfaces over types\n- Avoid enums; use maps instead\n- Use functional components with TypeScript interfaces\n\nSyntax and Formatting:\n\n- Use the \"function\" keyword for pure functions\n- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements\n- Use declarative JSX\n\nError Handling and Validation:\n\n- Prioritize error handling: handle errors and edge cases early\n- Use early returns and guard clauses\n- Implement proper error logging and user-friendly messages\n- Use Zod for form validation\n- Model expected errors as return values in Server Actions\n- Use error boundaries for unexpected errors\n\nUI and Styling:\n\n- Use Shadcn UI, Radix, and Tailwind Aria for components and styling\n- Implement responsive design with Tailwind CSS; use a mobile-first approach\n\nPerformance Optimization:\n\n- Minimize 'use client', 'useEffect', and 'setState'; 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 WebP format, include size data, implement lazy loading\n\nKey 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\nFollow Next.js docs for Data Fetching, Rendering, and Routing\n"}