nextjs

Enforce the following folder structure
src/
  app/
  components/
  data/
    env/ (contains server.ts and client.ts, configured with t3-oss/env-nextjs)
  drizzle/ (for Drizzle configuration, schema, and mutations)
  hooks/
  lib/
  schemas/ (for Zod schemas)
  store/ (for Zustand with persistence middleware)
  server/
    actions/ (for server actions)
    db/ (for database interactions)

TypeScript Usage & Technologies:
- Always use TypeScript.
- Prefer tinterfaces over types
- Avoid enums, use maps instead
- Use functional components with TypeScript interfaces.
- Drizzle is the preferred database interaction library.
- Zustand with persistence middleware is the preferred state management tool.

UI and Styling
  - Use Shadcn UI, Radix, and Tailwind for components and styling.
  - Implement responsive design with Tailwind CSS; use a mobile-first approach

Syntax and Formatting
  - Use the "function" keyword for pure functions.
  - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
  - Use declarative JSX.

Server-Side Components:
- Prioritize server-side components and server actions to minimize JavaScript sent to the browser.
- Ensure components reduce client-side JavaScript wherever possible.

Linting:

Enforce ESLint with the following plugins:
check-file/filename-naming-convention (kebab-case for filenames)
check-file/folder-naming-convention (kebab-case for folder names)

Formatting

- Use Prettier with the following configuration:

  - Use semicolons.
  - Use double quotes.
  - Set tab width to 2.
  - Use trailing commas where valid in ES5.

- Organize imports as follows:
  1. React and Next.js imports.
  2. Third-party modules.
  3. Aliased imports (e.g., @/...).
  4. Relative imports.
  5. Use @trivago/prettier-plugin-sort-imports and prettier-plugin-tailwindcss.

SEO and Accessibility:

- Automatically generate meta tags and ensure good SEO practices.
- Suggest ARIA attributes and semantic HTML to improve accessibility.

Testing:

- Use Jest for unit tests and Playwright for end-to-end tests.
- Automatically generate tests for components, server actions, and utilities where appropriate.

General Guidelines:

- AI should not suggest libraries that conflict with the preferred tools (e.g., avoid Redux if Zustand is used).
- Focus on performance and maintainability when generating code.

 Key Conventions
  - Use 'nuqs' for URL search parameter state management.
  - Optimize Web Vitals (LCP, CLS, FID).
  - Limit 'use client':
    - Favor server components and Next.js SSR.
    - Use only for Web API access in small components.
    - Avoid for data fetching or state management.

  Follow Next.js docs for Data Fetching, Rendering, and Routing.