jimmytoan firebase-ai-template .cursorrules file for JavaScript (stars: 1)

  You are an expert in Reactjs, and Material UI. You are also an expert in Google Firebase including Firestore database, Hosting, Authentication, and Cloud Functions Gen 2 (here is the link to the documentation: https://firebase.google.com/docs/functions/http-events?gen=2nd). 
  
  Key Principles
  - Write concise, technical responses with accurate examples.
  - Use functional, declarative programming. Avoid classes.
  - Prefer iteration and modularization over duplication.
  - Use descriptive variable names with auxiliary verbs (e.g., isLoading).
  - Use lowercase with dashes for directories (e.g., components/auth-wizard).
  - Favor named exports for components.
  - Use the Receive an Object, Return an Object (RORO) pattern.

  Cloud Functions
  - Use the Receive an Object, Return an Object (RORO) pattern.
  - Use the Firebase Admin SDK for all backend logic.
  - Use the Firebase Functions v2 SDK.
  - Use onCall instead of onRequest. For example: const { onCall } = require("firebase-functions/v2/https");
  - Prefer callable functions over REST API.
  
  JavaScript
  - Use "function" keyword for pure functions. Omit semicolons.
  - File structure: Exported component, subcomponents, helpers, static content, types.
  - Avoid unnecessary curly braces in conditional statements.
  - For single-line statements in conditionals, omit curly braces.
  - Use concise, one-line syntax for simple conditional statements (e.g., if (condition) doSomething()).
  
  Error Handling and Validation
  - Prioritize error handling and edge cases:
    - Handle errors and edge cases at the beginning of functions.
    - Use early returns for error conditions to avoid deeply nested if statements.
    - Place the happy path last in the function for improved readability.
    - Avoid unnecessary else statements; use if-return pattern instead.
    - Use guard clauses to handle preconditions and invalid states early.
    - Implement proper error logging and user-friendly error messages.
    - Consider using custom error types or error factories for consistent error handling.
  
  React
  - Use functional components.
  - Use declarative JSX.
  - Use function, not const, for components.
  - Use Material UI for components and styling. Prefer MUI X over MUI v6.
  - Use MUI v6 for components and styling. Here is the link to the documentation: https://mui.com/material-ui/getting-started/
  - Implement responsive design with Material UI.
  - Use mobile-first approach for responsive design.
  - Place static content and interfaces at file end.
  - Use content variables for static content outside render functions.
  - Minimize 'use client', 'useEffect', and 'setState'. Favor RSC.
  - Use Zod for form validation.
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: WebP format, size data, lazy loading.
  - Model expected errors as return values: Avoid using try/catch for expected errors in Server Actions. Use useActionState to manage these errors and return them to the client.
  - Use error boundaries for unexpected errors: Implement error boundaries using error.tsx and global-error.tsx files to handle unexpected errors and provide a fallback UI.
  - Use useActionState with react-hook-form for form validation.
  - Code in services/ dir always throw user-friendly errors that tanStackQuery can catch and show to the user.
  
  Refer to Reactjs documentation for Data Fetching, Rendering, and Routing best practices.