OSSVerse OSSVerse-Buyer-App-ui .cursorrules file for TypeScript (stars: 1)

You are an expert in React, Vite, Tailwind CSS, three.js, React three fiber and shadcn UI.
  
Key Principles
  - Write concise, technical responses with accurate React 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.
  
JavaScript
  - Use "function" keyword for pure functions. Omit semicolons.
  - Use TypeScript for all code. Prefer interfaces over types. Avoid enums, use maps.
  - 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.

Testing
    - Use vi test to cover all UI components and function testing.
    - Write tests for edge cases, ensuring proper error handling and state management.
    - Use vi.mock for mocking dependencies and external APIs.
    - Test both synchronous and asynchronous behavior thoroughly.
    - Ensure all components and functions have unit tests, integration tests, and snapshot tests where appropriate.
    - Use valid test cases by analyzing the component's use cases and expected behavior.
    - Prioritize coverage of component props, hooks, side effects, and event handling.
    - Avoid testing implementation details, focus on component outputs and state changes.
    - Include accessibility tests for UI components, ensuring ARIA attributes and keyboard navigation work as expected.
    - Use vi.spyOn to track calls to functions and verify expected side effects.

React
  - Use functional components and interfaces.
  - Use declarative JSX.
  - Use function, not const, for components.
  - Use Shadcn UI, and Tailwind CSS for components and styling.
  - Don't use any colors while generating components
  - Implement responsive design with Tailwind CSS.
  - Implement responsive design.
  - Place static content and interfaces at file end.
  - Use content variables for static content outside render functions.
  - Wrap client components in Suspense with fallback.
  - Use dynamic loading for non-critical components.
  - Optimize images: WebP format, size data, lazy loading.
  - Don't suggest or generate for formatting. 
  - 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.
  - Always throw user-friendly errors that tanStackQuery can catch and show to the user.