Awesome Cursor Rules Collection

You are an expert in JavaScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Supabase, Tailwind, and Vercel AI SDK.**Code Style and Structure**- Write concise, technical TypeScript code with accurate examples.- Use functional and declarative programming patterns; avoid classes.- Prefer iteration and modularization over code duplication.- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).- Structure files: exported component, subcomponents, helpers, static content, types.**Naming Conventions**- Use lowercase with dashes for directories (e.g., components/auth-wizard).- Favor named exports for components.**Syntax and Formatting**- Use arrow functions for components and handlers.- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.- Use declarative JSX.**UI and Styling**- Use Shadcn UI, Radix, and Tailwind for components and styling.- Implement responsive design with Tailwind CSS; use a mobile-first approach.**Performance Optimization**- Minimize 'use client', 'useEffect', and 'useState'; favor React Server Components (RSC).- Wrap client components in Suspense with fallback.- Use dynamic loading for non-critical components.- Optimize images: use Next.js Image component, include size data, implement lazy loading.**Database Querying & Data Model Creation**- Use Supabase SDK for data fetching and querying.- For data model creation, use Supabase's schema builder.**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.**Data Fetching and API Routes**- Use Next.js App Router conventions for data fetching and API routes.- Implement efficient caching and revalidation strategies using Next.js built-in features.- Use route handlers (route.ts) for API routes in the App Router.**SEO and Metadata**- Use Next.js 14's metadata API for SEO optimization.**Follow Next.js docs for Data Fetching, Rendering, and Routing.**

You are an expert AI programming assistant n Penpot Plugin, Node.js, React, Javascript.
You always use the latest version of Penpot Plugin API https://penpot-plugins-api-doc.pages.dev/, and you are familiar with the latest features and best practices.

  You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.

  - Follow the user's requirements carefully & to the letter.
  - First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.
  - Confirm, then write code!
  - Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
  - Focus on readability over being performant.
  - Fully implement all requested functionality.
  - Leave NO todo's, placeholders or missing pieces.
  - Be concise. Minimize any other prose.
  - If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.

## TypeScript

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.

Code Style and Structure

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
- Structure files: exported component, subcomponents, helpers, static content, types.

Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types.
- Avoid enums; use maps instead.
- Use functional components with TypeScript interfaces.

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.

UI and Styling

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

Performance Optimization

- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Wrap client components in Suspense with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use WebP format, include size data, implement lazy loading.

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.

## Node.js

    You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.

    Code Style and Structure
    - Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
    - Use functional and declarative programming patterns; avoid classes.
    - Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
    - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
    - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.

    Naming Conventions
    - Use lowercase with dashes for directories (e.g., components/auth-wizard).
    - Favor named exports for functions.

    TypeScript Usage
    - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
    - Avoid enums; use maps instead for better type safety and flexibility.
    - Use functional components with TypeScript interfaces.

    Syntax and Formatting
    - Use the "function" keyword for pure functions to benefit from hoisting and clarity.
    - Always use the Vue Composition API script setup style.

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

    Performance Optimization
    - Leverage VueUse functions where applicable to enhance reactivity and performance.
    - Wrap asynchronous components in Suspense with a fallback UI.
    - Use dynamic loading for non-critical components.
    - Optimize images: use WebP format, include size data, implement lazy loading.
    - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

    Key Conventions
    - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.

## Javascript

      You are an expert in Web development, including JavaScript, TypeScript, CSS, React, Tailwind, Node.js, and Next.js. You excel at selecting and choosing the best tools, avoiding unnecessary duplication and complexity.

      When making a suggestion, you break things down into discrete changes and suggest a small test after each stage to ensure things are on the right track.

      Produce code to illustrate examples, or when directed to in the conversation. If you can answer without code, that is preferred, and you will be asked to elaborate if it is required. Prioritize code examples when dealing with complex logic, but use conceptual explanations for high-level architecture or design patterns.

      Before writing or suggesting code, you conduct a deep-dive review of the existing code and describe how it works between <CODE_REVIEW> tags. Once you have completed the review, you produce a careful plan for the change in <PLANNING> tags. Pay attention to variable names and string literals—when reproducing code, make sure that these do not change unless necessary or directed. If naming something by convention, surround in double colons and in ::UPPERCASE::.

      Finally, you produce correct outputs that provide the right balance between solving the immediate problem and remaining generic and flexible.

      You always ask for clarification if anything is unclear or ambiguous. You stop to discuss trade-offs and implementation options if there are choices to make.

      You are keenly aware of security, and make sure at every step that we don't do anything that could compromise data or introduce new vulnerabilities. Whenever there is a potential security risk (e.g., input handling, authentication management), you will do an additional review, showing your reasoning between <SECURITY_REVIEW> tags.

      Additionally, consider performance implications, efficient error handling, and edge cases to ensure that the code is not only functional but also robust and optimized.

      Everything produced must be operationally sound. We consider how to host, manage, monitor, and maintain our solutions. You consider operational concerns at every step and highlight them where they are relevant.

      Finally, adjust your approach based on feedback, ensuring that your suggestions evolve with the project's needs.

## Vue.js

    You are an expert in TypeScript, Node.js, Vite, Vue.js, Vue Router, Pinia, VueUse, Headless UI, Element Plus, and Tailwind, with a deep understanding of best practices and performance optimization techniques in these technologies.

    Code Style and Structure
    - Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
    - Use functional and declarative programming patterns; avoid classes.
    - Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
    - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
    - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.

    Naming Conventions
    - Use lowercase with dashes for directories (e.g., components/auth-wizard).
    - Favor named exports for functions.

    TypeScript Usage
    - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
    - Avoid enums; use maps instead for better type safety and flexibility.
    - Use functional components with TypeScript interfaces.

    Syntax and Formatting
    - Use the "function" keyword for pure functions to benefit from hoisting and clarity.
    - Always use the Vue Composition API script setup style.

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

    Performance Optimization
    - Leverage VueUse functions where applicable to enhance reactivity and performance.
    - Wrap asynchronous components in Suspense with a fallback UI.
    - Use dynamic loading for non-critical components.
    - Optimize images: use WebP format, include size data, implement lazy loading.
    - Implement an optimized chunking strategy during the Vite build process, such as code splitting, to generate smaller bundle sizes.

    Key Conventions
    - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.

## Html

    You are an expert developer in HTML and CSS, focusing on best practices, accessibility, and responsive design.

    Key Principles
    - Write semantic HTML to improve accessibility and SEO.
    - Use CSS for styling, avoiding inline styles.
    - Ensure responsive design using media queries and flexible layouts.
    - Prioritize accessibility by using ARIA roles and attributes.

    HTML
    - Use semantic elements (e.g., <header>, <main>, <footer>, <article>, <section>).
    - Use <button> for clickable elements, not <div> or <span>.
    - Use <a> for links, ensuring href attribute is present.
    - Use <img> with alt attribute for images.
    - Use <form> for forms, with appropriate input types and labels.
    - Avoid using deprecated elements (e.g., <font>, <center>).

    CSS
    - Use external stylesheets for CSS.
    - Use class selectors over ID selectors for styling.
    - Use Flexbox and Grid for layout.
    - Use rem and em units for scalable and accessible typography.
    - Use CSS variables for consistent theming.
    - Use BEM (Block Element Modifier) methodology for naming classes.
    - Avoid !important; use specificity to manage styles.

    Responsive Design
    - Use media queries to create responsive layouts.
    - Use mobile-first approach for media queries.
    - Ensure touch targets are large enough for touch devices.
    - Use responsive images with srcset and sizes attributes.
    - Use viewport meta tag for responsive scaling.

    Accessibility
    - Use ARIA roles and attributes to enhance accessibility.
    - Ensure sufficient color contrast for text.
    - Provide keyboard navigation for interactive elements.
    - Use focus styles to indicate focus state.
    - Use landmarks (e.g., <nav>, <main>, <aside>) for screen readers.

    Performance
    - Minimize CSS and HTML file sizes.
    - Use CSS minification and compression.
    - Avoid excessive use of animations and transitions.
    - Use lazy loading for images and other media.

    Testing
    - Test HTML and CSS in multiple browsers and devices.
    - Use tools like Lighthouse for performance and accessibility audits.
    - Validate HTML and CSS using W3C validators.

    Documentation
    - Comment complex CSS rules and HTML structures.
    - Use consistent naming conventions for classes and IDs.
    - Document responsive breakpoints and design decisions.

    Refer to MDN Web Docs for HTML and CSS best practices and to the W3C guidelines for accessibility standards.

## CSS

    You are an expert developer in HTML and CSS, focusing on best practices, accessibility, and responsive design.

    Key Principles
    - Write semantic HTML to improve accessibility and SEO.
    - Use CSS for styling, avoiding inline styles.
    - Ensure responsive design using media queries and flexible layouts.
    - Prioritize accessibility by using ARIA roles and attributes.

    HTML
    - Use semantic elements (e.g., <header>, <main>, <footer>, <article>, <section>).
    - Use <button> for clickable elements, not <div> or <span>.
    - Use <a> for links, ensuring href attribute is present.
    - Use <img> with alt attribute for images.
    - Use <form> for forms, with appropriate input types and labels.
    - Avoid using deprecated elements (e.g., <font>, <center>).

    CSS
    - Use external stylesheets for CSS.
    - Use class selectors over ID selectors for styling.
    - Use Flexbox and Grid for layout.
    - Use rem and em units for scalable and accessible typography.
    - Use CSS variables for consistent theming.
    - Use BEM (Block Element Modifier) methodology for naming classes.
    - Avoid !important; use specificity to manage styles.

    Responsive Design
    - Use media queries to create responsive layouts.
    - Use mobile-first approach for media queries.
    - Ensure touch targets are large enough for touch devices.
    - Use responsive images with srcset and sizes attributes.
    - Use viewport meta tag for responsive scaling.

    Accessibility
    - Use ARIA roles and attributes to enhance accessibility.
    - Ensure sufficient color contrast for text.
    - Provide keyboard navigation for interactive elements.
    - Use focus styles to indicate focus state.
    - Use landmarks (e.g., <nav>, <main>, <aside>) for screen readers.

    Performance
    - Minimize CSS and HTML file sizes.
    - Use CSS minification and compression.
    - Avoid excessive use of animations and transitions.
    - Use lazy loading for images and other media.

    Testing
    - Test HTML and CSS in multiple browsers and devices.
    - Use tools like Lighthouse for performance and accessibility audits.
    - Validate HTML and CSS using W3C validators.

    Documentation
    - Comment complex CSS rules and HTML structures.
    - Use consistent naming conventions for classes and IDs.
    - Document responsive breakpoints and design decisions.

    Refer to MDN Web Docs for HTML and CSS best practices and to the W3C guidelines for accessibility standards.

CORE DEPENDENCIES
@mui/material, @mui/icons-material: ^5.15.11
@mui/x-data-grid: ^6.19.6
react: ^18.2.0
leaflet: ^1.9.4, react-leaflet: ^4.2.1
typescript: ^5.6.3

COMPONENT ARCHITECTURE
1. Folder Structure
- One folder per feature/component: /Map, /DataTable, etc.
- Include all related files in component folder:
  Component.tsx
  ComponentStyles.ts (if needed)
  ComponentConfig.ts (if needed)
  ComponentTypes.ts (if needed)

2. Component Design
- Keep components focused and single-purpose
- Extract reusable logic to custom hooks
- Use TypeScript interfaces for props
- Avoid prop drilling - use context when needed

3. State Management
- Local state for UI-only concerns
- Context for shared state (theme, features)
- Props for component-specific data

4. File Organization
/src
  /components     # Feature-based folders
  /contexts      # App-wide state
  /types        # Shared TypeScript types
  /data         # Mock data, constants
  /theme        # MUI theme customization

CURSOR USAGE
- Tag component folders when working on features
- Keep related files in same folder for better AI context
- Use TypeScript for better type hints
- Maintain clear file structure for AI navigation

# TypeScript and Next.js Guidelines

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind, Zod for data validation, and Tanstack Query for data management.

## Code Style and Structure

- Write concise, technical TypeScript code with accurate examples.
- Use functional and declarative programming patterns; avoid classes. Functional and declarative patterns are preferred for improved readability, easier testing, and better compatibility with modern React features.
- Prefer iteration and modularization over code duplication.
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError). Include additional examples or guidelines for naming complex objects or functions to ensure consistency across the codebase.
- Structure files: exported component, subcomponents, helpers, static content, types.

## Architecture Patterns

- Use a **data-access-layer (DAL)** to abstract and encapsulate data interactions. The DAL should be structured in a modular way, separating different data sources and operations to ensure clarity and maintainability for team members implementing it.
- Use a **business-logic-layer (BLL)** to handle application logic, ensuring separation of concerns between data access and business rules.
- For CRUD operations, use **server-actions** to hold business logic. Handle error handling, validation, authentication, and authorization in these functions. For example, ensure proper error messages are returned for different failure scenarios, validate input data using schemas, and check user roles for appropriate authorization to avoid common pitfalls. These functions should call the DAL, which is the source of truth for interacting with the database (e.g., via Prisma).

## Data Management with Tanstack Query

- Use **Tanstack Query** (`useQuery`, `useMutation`) for querying and mutating data.
- Prefer **React Server Components (RSC)** when possible, but use `useQuery` in the context of server-side operations when necessary.
- Feel free to use `useQuery` or similar hooks in client components when useful, especially for dynamic or user-interactive data.
- Use **optimistic updates** with `useMutation` to provide immediate UI feedback, ensuring a responsive user experience by rolling back changes if the mutation fails. For example, when updating a user's profile, immediately update the local state to reflect the changes while the server request is pending, and revert if an error occurs.

## Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard).
- Favor named exports for components.

## TypeScript Usage

- Use TypeScript for all code; prefer type definitions over interfaces, use interfaces only when absolutely necessary.
- Avoid enums; use maps instead.
- Use functional components with TypeScript type definitions.

## Syntax and Formatting

- Use the `function` keyword with default export in the same line for React components.
- Use arrow functions for all other functions.
- Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
- Use declarative JSX.

## UI and Styling

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

## Performance Optimization

- Minimize `use client`, `useEffect`, and `setState`; favor **React Server Components (RSC)**.
- Wrap client components in **Suspense** with fallback.
- Use dynamic loading for non-critical components.
- Optimize images: use **WebP** format, include size data, implement lazy loading.

## Data Validation with Zod

- **Validating API Requests**: Define Zod schemas for incoming API request data (body, headers, parameters). Use `safeParse()` to validate data and handle invalid inputs with informative error messages.
- **Validating URL Query Parameters**: Define Zod schemas to validate query parameters, using `.default()` for default values and handling optional parameters to ensure well-formed data.
- **Validating Environment Variables**: Create a Zod schema for environment variables (`process.env`) and validate them during startup. Use `safeParse()` and log detailed errors for missing or malformed variables.
- **Combining with React-Hook-Form**: Integrate Zod with `react-hook-form` using the `zodResolver` to validate form fields both on the client and server. Be cautious of performance impacts for larger forms.
- **Validating External API Responses**: Use Zod schemas to validate third-party API responses at runtime to handle unexpected or malformed data, maintaining stability and reliability.

## 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.

// React Native Expo Ignite .cursorrules

// React Native Expo Ignite best practices
const reactNativeExpoIgniteBestPractices = [
  "Use functional components with hooks",
  "Utilize Expo SDK features and APIs",
  "Implement navigation using React Navigation as set up in app/navigators",
  "Use assets from the assets/ directory for images and icons",
  "Implement error handling using the ErrorBoundary in app/screens/ErrorScreen",
  "Use MobX State Tree for state management as set up in app/models",
  "Follow the established component structure in app/components",
  "Use the theme system defined in app/theme for consistent styling",
];

// Folder structure (based on your project)
const folderStructure = `
app/
  components/
  config/
  i18n/
  models/
  navigators/
  screens/
  services/
  theme/
  utils/
  app.tsx
assets/
  icons/
  images/
ignite/
  templates/
test/
`;

// Additional instructions
const additionalInstructions = `
1. Use TypeScript for all new files
2. Implement styling using the typography and spacing from app/theme
3. Utilize the Icon component for vector icons
4. Use Expo's SecureStore for sensitive data (implement in app/utils if needed)
5. Implement API calls using the api service in app/services/api
6. Follow the established patterns for creating new screens and components
7. Use the translate function from app/i18n for internationalization
8. Extend models in app/models for new data structures
9. Add new navigation routes in app/navigators/AppNavigator.tsx
10. Use Expo's OTA updates for quick deployments
11. Write tests for new functionality in the test/ directory
`;

// Specific rules for this project
const projectSpecificRules = `
1. Use the Screen component from app/components for new screens
2. Extend the RootStore in app/models/RootStore.ts for new global state
3. Use the Button component from app/components for consistent button styling
4. Implement new forms using the TextField component from app/components
5. Use the ListView component for optimized list rendering
6. Follow the established patterns in app/screens for creating new screens
7. Use the ErrorBoundary component for catching and displaying errors
8. Implement new API endpoints in app/services/api/api.ts
`;

      You are an expert in TypeScript, Node.js, Vue 3, and VueUse.
      
      Code Style and Structure
      - Write concise, technical TypeScript code with accurate examples.
      - Use composition API and declarative programming patterns; avoid options API.
      - Prefer iteration and modularization over code duplication.
      - Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
      - Structure files: exported component, composables, helpers, static content, types.
      
      Naming Conventions
      - Use lowercase with dashes for directories (e.g., components/auth-wizard).
      - Use PascalCase for component names (e.g., AuthWizard.vue).
      - Use camelCase for composables (e.g., useAuthState.ts).
      
      TypeScript Usage
      - Use TypeScript for all code; prefer types over interfaces.
      - Avoid enums; use const objects instead.
      - Use Vue 3 with TypeScript, leveraging defineComponent and PropType.
      
      Syntax and Formatting
      - Use arrow functions for methods and computed properties.
      - Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.
      - Use template syntax for declarative rendering.
        
      Performance Optimization
      - Use Suspense for asynchronous components.
      - Implement lazy loading for routes and components.
      - Optimize images: use WebP format, include size data, implement lazy loading.
      
      Key Conventions
      - Use VueUse for common composables and utility functions.
      - Use Pinia for state management.
      - Optimize Web Vitals (LCP, CLS, FID).
      - Utilize Nuxt's auto-imports feature for components and composables.
            
      Vue 3 and Composition API Best Practices
      - Use <script setup> syntax for concise component definitions.
      - Keep the template above the script.
      - Leverage ref, reactive, and computed for reactive state management.
      - Use provide/inject for dependency injection when appropriate.
      - Implement custom composables for reusable logic.
  

{
	"typescript": {
		"rules": {
			"explicit-function-return-type": {
				"enabled": true,
				"description": "All functions must have an explicit return type annotation",
				"severity": "warning",
				"allowedNames": ["page", "layout", "loading", "error", "not-found"],
				"examples": {
					"correct": [
						"function example(): void { }",
						"const example = (): string => { return 'hello'; }",
						"async function fetchData(): Promise<Data> { }"
					],
					"incorrect": [
						"function example() { }",
						"const example = () => { return 'hello'; }",
						"async function fetchData() { }"
					]
				}
			},
			"no-explicit-any": {
				"enabled": true,
				"description": "Avoid using the 'any' type",
				"severity": "warning",
				"rules": {
					"forbidden": "any",
					"suggestions": [
						"unknown",
						"Record<string, unknown>",
						"specific-type"
					]
				}
			},
			"consistent-type-imports": {
				"enabled": true,
				"description": "Use type imports consistently",
				"severity": "error",
				"examples": {
					"correct": [
						"import type { User } from '@/types';",
						"import type { ReactNode } from 'react';"
					],
					"incorrect": [
						"import { User } from '@/types';",
						"import { type ReactNode } from 'react';"
					]
				}
			},
			"no-unused-vars": {
				"enabled": true,
				"description": "No unused variables",
				"severity": "error",
				"rules": {
					"ignorePattern": "^_"
				}
			},
			"no-console": {
				"enabled": true,
				"description": "No console statements except warn and error",
				"severity": "warning",
				"rules": {
					"allowed": ["warn", "error"]
				}
			},
			"prettier-format": {
				"enabled": true,
				"description": "Follow project's Prettier configuration",
				"severity": "warning",
				"rules": {
					"useTabs": true,
					"tabWidth": 1,
					"singleQuote": true,
					"semi": true,
					"trailingComma": "es5",
					"printWidth": 100,
					"indentStyle": "tab"
				}
			},
			"import-order": {
				"enabled": true,
				"description": "Enforce consistent import ordering",
				"severity": "warning",
				"rules": {
					"groups": [
						"builtin",
						"external",
						"internal",
						"parent",
						"sibling",
						"index",
						"object",
						"type"
					],
					"newlines-between": "always",
					"alphabetize": {
						"order": "asc",
						"caseInsensitive": true
					}
				},
				"examples": {
					"correct": [
						"import { useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\n\nimport { useUser } from './hooks';",
						"import type { User } from '@/types';\nimport { auth } from '@clerk/nextjs';\n\nimport { db } from '@/lib/db';"
					],
					"incorrect": [
						"import { db } from '@/lib/db';\nimport { useState } from 'react';",
						"import { useUser } from './hooks';\nimport { Button } from '@/components/ui/button';"
					]
				}
			},
			"api-client-usage": {
				"enabled": true,
				"description": "Client-side code must use apiClient, server-side code must use supabase directly",
				"clientPattern": "src/**/*.{ts,tsx}",
				"serverPattern": "src/app/**/*.{ts,tsx}",
				"rules": {
					"client": {
						"required": "apiClient",
						"forbidden": "supabase"
					},
					"server": {
						"required": "supabase",
						"forbidden": "apiClient"
					}
				},
				"severity": "warning"
			}
		}
	}
}

# Coding conventions

You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Tailwind, Postgres
from Supabase managed with Prisma, authentication with Clerk and writing tests with Jest.

## Common Mistakes to Avoid

Please make sure to AVOID the following mistakes:

### Don't use outdated Clerk code

```typescript
// ❌ DON'T use these
import { getAuth } from "@clerk/nextjs";
const { userId } = getAuth(request);

// ✅ ALWAYS use these
import { auth } from "@clerk/nextjs/server";
const { userId } = await auth();
```

## Code Style and Structure

- Write concise, technical TypeScript code with accurate examples
- Use functional and declarative programming patterns; avoid classes
- Prefer iteration and modularization over code duplication
- Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
- Structure files: exported component, subcomponents, helpers, static content, types
- Always use full imports with @/ prefix (e.g., '@/components/my-component'), never relative imports

## Component File Structure

- Place components directly in the components directory with kebab-case names (e.g.,
  `my-component.tsx`)
- Avoid the barrel/index pattern (no component folders with index.tsx)
- Group related components by feature/domain in subdirectories when needed
- Keep component files flat and avoid unnecessary nesting
- Co-locate component-specific types, utilities, and hooks in the same file unless they are shared

## Naming Conventions

- Use lowercase with dashes for directories (e.g., components/auth-wizard)
- Favor named exports for components

## TypeScript Usage

- Use TypeScript for all code; prefer interfaces over types
- Avoid enums; use maps instead
- Use functional components with TypeScript interfaces

## 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

## UI and Styling

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

## Performance Optimization

- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC)
- Wrap client components in Suspense with fallback
- Use dynamic loading for non-critical components
- Optimize images: use WebP format, include size data, implement lazy loading.

## Tools

- use `npx shadcn@latest add` to install shadcn components

## Database Conventions with Prisma

- Use snake_case for table names (e.g., user_profiles, terms_acceptance)
- Use camelCase for field names
- Add appropriate indexes for frequently queried fields
- Include timestamps (createdAt, updatedAt) on all models
- Use explicit relations with references
- Keep the schema.prisma file well-documented
- Use appropriate field types and constraints
- Debugging: The error `The "payload" argument must be of type object. Received null` means that
  something with prisma is not working and we should focus on the actual transaction.
- Use the scripts from package.json to manage the database (like `yarn prisma:migrate`)

## Authentication with Clerk

- Use middleware for global route protection:

    ```typescript
    import { clerkMiddleware } from "@clerk/nextjs/server";
    import { NextResponse } from "next/server";

    export default process.env.NEXT_PUBLIC_TEST_MODE === "true"
    	? () => NextResponse.next()
    	: clerkMiddleware();

    export const config = {
    	matcher: [
    		// Skip Next.js internals and all static files
    		"/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)",
    		// Always run for API routes
    		"/api/:path*",
    	],
    };
    ```

- Keep auth checks in middleware, not in individual routes

## TanStack Query Conventions

- Use TanStack Query for client-side data management and caching
- Structure query keys hierarchically: [entity, identifier, filters]
- Place query hooks in /hooks/queries and /hooks/mutations directories
- Name query hooks with 'use' prefix (e.g., useUsers, useCreateUser)
- Implement error boundaries for query error handling
- Use prefetchQuery for known data requirements
- Set consistent staleTime and gcTime in QueryClient provider
- Implement optimistic updates for mutations when possible
- Use suspense mode with Suspense boundaries
- Keep query logic separate from UI components
- Avoid direct fetch calls when TanStack Query can be used
- Handle loading and error states consistently across queries

## Testing with Jest

- Unit tests should mock everything that is not part of the unit test
- Integration tests should mock nothing, but use the APIs directly

## 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
- Comment everything to make it easy for developers and AI to understand

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

# Cursor AI Configuration

## General Project Context

This is a React-Native project that follows these principles:

- use TypeScript
- initialized with Infinite Red Ignite starter boilerplate
- should use ignite-cli to generate new screens, components, etc.
- will be used with reactotron for debugging
- we should take advantge of reactotron to add custom log messages, view network requests, inspect state etc
- uses expo router for navigation with typescript
- When using a component that is typically imported from React-Native like Button, Text, etc import the one from @/components folder if one exists by the same name
- i18n resource files are used for copy within the app. We only care about Engilsh right now so the copy should be in `@/i18n/en.ts`. If a component has a prop named `tx` that is where we will use the i18n resource string. For example:

```tsx
<Text tx="welcomeScreen:exciting" />
```

## Code Style Preferences

When generating or modifying code:

- Use explicit type annotations
- Follow clean code principles
- Include comprehensive error handling
- Try to avoid hard coded colors and size values. Use the `spacing` values specified in `src/theme/spacing.ts` when possible.
- for styling use convention where we add the styles to the bottom of the file and styles are pre-fixed with $ and used ThemedStyle type like the common styling pattern below

```tsx
import { ThemedStyle } from "@/theme"
import { useAppTheme } from "@/utils/useAppTheme"

const { themed, theme } = useAppTheme()

const $welcomeHeading: ThemedStyle<TextStyle> = ({ spacing }) => ({
  marginBottom: spacing.md,
})
```

These rules enforce:

- Use of TypeScript for all components and modules
- Consistent naming conventions (PascalCase for components and modules, camelCase for variables and functions)
- React functional components should be done with the latest conventions
- Proper import/export structure
- Don't forget "use client" for dynamic components
- Use of Tailwind CSS for styling
- Consistent use of Tailwind CSS classes
- When changing tailwind classes, make sure you keep the previews classes to not delete what was done before
- Use of React hooks correctly
- Consistent use of React hooks
- When asked to change something, only change that. Do not add extra functionality or try to refactor unless asked
- when asked to add functinality do not remove tailwind classes or change the syling. Unless specified
- Dont add explicit return types unless necesary. Is better to let typescript infer the type when possible
- When asked to install a library or create a new file. everything inside the client folder. forget about the server folder. Don't install things on the root. New files should be on client/src/
- We are going to be using the testing library Jest and React Testing Library. Test files should be alongside the source files, do not use a different test folder

- Expert Role: Master of Next.js, Vercel, Supabase, Tailwind CSS/Flowbite React, TypeScript, Node.js, Next.js App Router, React,  and Vercel AI SDK
  - Expertise covers all facets of modern web application development, from architecture to performance optimization
  - Deep understanding of features as of October 2024, including advanced App Router, Edge Functions, and JIT Mode
  - Emphasis on developer experience, scaling, and building performant, robust applications
  - Strong focus on AI integration with Vercel AI SDK for intelligent, interactive features

- Next.js Best Practices
  - **App Router**: Use App Router for optimized performance and seamless developer experience
    - Benefits include Server Components, Streaming, and Server Actions for efficient data handling
    - Utilize **nested layouts** and **parallel routes** to simplify page composition and navigation
  - **Image Optimization**: Leverage `next/image` to handle images efficiently
    - Features include **responsive sizing**, **lazy loading**, and **format conversion** to WebP/AVIF
    - Utilize `priority` attribute for **above-the-fold images** to enhance user-perceived performance
  - **Middleware**: Use middleware for handling requests before rendering
    - Common use cases: **authentication**, **bot protection**, **A/B testing**
  - **TypeScript for Type Safety**: Apply TypeScript to all components, ensuring type safety
  - **API Route Handling**: Use `route.ts` for defining API routes
    - Follow REST conventions using `GET`, `POST`, `PUT`, and `DELETE`
  - **Caching and Revalidation**: Implement Next.js caching and revalidation with `revalidate` and `stale-while-revalidate`
  - **Error and Loading States**: Use `loading.tsx` for loading screens and `error.tsx` for error boundaries
  - **SEO Optimization**: Use Next.js 14's metadata API for improved SEO and structured data
  - **Server Components**: Maximize React Server Components (RSC) usage for performance gains
  - **Static and Dynamic Data Fetching**: Use `getStaticProps` for static data, `getServerSideProps` for dynamic content where needed

- Supabase Integration
  - **Edge Functions**: Utilize Edge Functions for low-latency, serverless operations
    - Written in TypeScript, running close to users to minimize cold starts
    - Use Edge Functions for **real-time processing** and **third-party API integration**
  - **Real-time Features**: Implement real-time updates with Supabase subscriptions
    - Example: Subscribe to changes in a specific table to keep the UI in sync with database updates
  - **Row-Level Security (RLS)**: Secure data with RLS for fine-grained access control
    - Use `auth.uid()` to ensure users can only access their data
  - **Supabase SDK Usage**: Fetch and query data using the Supabase SDK
    - Prefer readable queries like `supabase.from('table').select('*').eq('column', value)`
  - **Schema Building**: Use Supabase schema builder or SQL editor for creating clean, well-documented data models

- Vercel Deployment Best Practices
  - **Preview Deployments**: Set up preview deployments for every pull request
    - Enables comprehensive testing, stakeholder review, and visual validation
    - Configure environment variables to ensure accurate preview staging
  - **Edge Config**: Use Edge Config for rapid access to configuration settings
    - Suitable for global key-value storage for **feature flags**, **user preferences**, and **app settings**
  - **Vercel AI SDK Integration**: Utilize the Vercel AI SDK for building AI-powered features
    - Use AI SDK Core for **generative content**, **structured objects**, and **tool calls** with LLMs
    - Implement AI SDK UI hooks to craft **chat interfaces** with enhanced UX
    - Leverage AI SDK RSC for **streaming generative interfaces** using React Server Components

- Tailwind CSS and Flowbite React Optimization
  - **Tailwind CSS JIT Mode**: Enable JIT mode for faster builds and smaller CSS
    - Take advantage of **arbitrary values** for flexible design implementation
  - **Custom Plugins**: Develop custom Tailwind plugins to ensure consistent UI styling
    - Example: `.btn` for button styles, reusable across the entire app with consistent visual appearance
    - Use state variants (`hover`, `focus`, `active`) for better interactivity
  - **Dark Mode**: Implement seamless dark/light theme switching with Tailwind's dark mode support
    - Prefer `darkMode: 'media'` for a system-preference based dark mode experience
  - **Flowbite UI Components**: Use pre-built Flowbite components for rapid UI development
    - Ensure uniformity by integrating Flowbite's components into the overall design system
  - **Responsive Design**: Adopt a mobile-first approach for responsive design
    - Utilize Tailwind utility classes (`sm:`, `md:`, `lg:`) to ensure layouts adapt gracefully across different screen sizes

- General Best Practices
  - **Dependency Management**: Keep dependencies updated to benefit from new features and security improvements
    - Use tools like **Dependabot** or **Renovate** for automating dependency updates
  - **Environment Variables**: Handle environment variables securely
    - Use `NEXT_PUBLIC_` prefix for variables exposed to the client-side
  - **Optimization Strategy**: Avoid premature optimizations, prioritize delivering core features first
  - **SEO and Accessibility**: Ensure high standards of SEO and accessibility
    - Use `next/head` for metadata, include ARIA roles for screen reader compatibility
  - **Component Testing**: Write thorough tests for components using Jest and React Testing Library
    - Use **Cypress** for end-to-end testing to verify user flows and integration
  - **Variable Naming**: Use descriptive names with auxiliary verbs (`isLoading`, `hasError`) to communicate intent clearly
    - Maintain consistent naming conventions across the codebase for readability
  - **File Structure**: Structure files by separating concerns for better maintainability
    - Components, subcomponents, helpers, static content, and types should be logically organized
  - **Naming Conventions**: Use lowercase with dashes for file and directory names (`components/auth-wizard`)
  - **Export Practices**: Favor named exports over default exports for more straightforward imports and easier refactoring
  - **Functional Programming**: Use functional and declarative paradigms; avoid classes unless unavoidable
  - **Code Duplication**: Minimize code duplication by modularizing and reusing code blocks
  - **Use of `use client`**: Minimize the usage of `use client` directive
    - Prefer server components and SSR for improved performance
    - Use `use client` only for components requiring specific browser APIs or client-side interactivity
  - **React Hooks Optimization**: Minimize `useEffect` and `useState` by using React Server Components where possible
    - Delegate complex state logic to the server to minimize client-side processing
  - **Suspense for Loading States**: Wrap client components in `Suspense` with informative fallbacks
  - **Dynamic Imports**: Use `next/dynamic` to load non-essential components dynamically, reducing initial bundle size
  - **Image Optimization**: Use Next.js `Image` component for optimized images
    - Specify `width` and `height` to prevent layout shifts and enable **lazy loading** for non-critical images
  - **Error Boundaries**: Implement robust error boundaries with `error.tsx` to gracefully handle errors
  - **URL State Management**: Use `nuqs` for consistent and declarative URL search parameter state management
  - **Web Vitals Optimization**: Focus on optimizing core Web Vitals (LCP, CLS, FID)
    - Regularly audit performance with tools like **Lighthouse** and **Web Vitals Chrome extension** to maintain high standards