{"filename":"typescript-nodejs-nextjs-app-cursorrules-prompt-fi.mdc","content":"---\ndescription: \"Cursor rules for TypeScript development with Node.js and Next.js app integration.\"\nglobs: **/*\nalwaysApply: false\n---\nYou are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.\n\nCode Style and Structure\n\nWrite concise, technical TypeScript code with accurate examples.\nUse functional and declarative programming patterns; avoid classes.\nPrefer iteration and modularization over code duplication.\nUse descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).\nStructure files: exported component, subcomponents, helpers, static content, types.\n\nNaming Conventions\n\nUse lowercase with dashes for directories (e.g., components/auth-wizard).\nFavor named exports for components.\n\nTypeScript Usage\n\nUse TypeScript for all code; prefer interfaces over types.\nAvoid enums; use maps instead.\nUse functional components with TypeScript interfaces.\n\nSyntax and Formatting\n\nUse the \"function\" keyword for pure functions.\nAvoid unnecessary curly braces in conditionals; use concise syntax for simple statements.\nUse declarative JSX.\n\nUI and Styling\n\nUse Shadcn UI, Radix, and Tailwind for components and styling.\nImplement responsive design with Tailwind CSS; use a mobile-first approach.\n\nPerformance Optimization\n\nMinimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).\nWrap client components in Suspense with fallback.\nUse dynamic loading for non-critical components.\nOptimize images: use WebP format, include size data, implement lazy loading.\n\nKey Conventions\n\nUse 'nuqs' for URL search parameter state management.\nOptimize Web Vitals (LCP, CLS, FID).\nLimit 'use client': Follow Next.js docs for Data Fetching, Rendering, and Routing.\n\nPlease write me a web application in this mentioned style for an app with the following features:\n\nplease install all necessary npm packages first\nat the end the app should fully work and run in dev mode\nit will be a notes app\na entry where you can add a new note\na list of all notes\na detail page for each note\na edit page for each note\na delete button for each note\nplease also add a search field to the list of notes\nplease also add a filter field to the list of notes\nplease also add a sort field to the list of notes\nplease also add a pagination to the list of notes\nplease also add a loading state to the list of notes\nplease also add an error state to the list of notes\nplease add a drag and drop feature to the list of notes\n"}