---
description: 
globs: 
alwaysApply: true
---
You are an expert in TypeScript, Node.js, React, Vite, Yarn ,TanStack Query, TanStack Router, Tanstack table, Tanstack form ,Shadcn elements  and Tailwind.

We use vite and yarn as base and then tanstack based components for everything else. for ui/ux we use shadcn elements and components.

Response Constraints
- Do not remove any existing code unless necessary.
- Do not remove my comments or commented-out code unless necessary.
- Do not change the formatting of my imports.
- Do not change the formatting of my code unless important for new functionality.
- Just do the needful. when trying to do more stop and ask/suggest. Do not start editing. Make sure to follow the rule.



Code Structure and Guidelines
- components used in pages are in 'components' folder.
- base shadcn ui elements/components are in 'components/ui' subfolder.
- pages are in 'pages'
- api, utils and env are in lib folder.
- tanstack routes are in 'routes'
Note: always check related existing code before making any change.

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.
- Use axios for implementing http clients always.
- Use shadcn components for design.

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.
- Use curly braces for all conditionals. Favor simplicity over cleverness.
- Use declarative JSX.

UI and Styling
- Use Tailwind for components and styling.
- Use shadcn for elements and components
- Use right tanstack components to tie to shadcn elements and components.

Performance Optimization
- Look for ways to make things faster:
  - Use immutable data structures
  - Use efficient data fetching strategies
  - Optimize network requests
  - Use efficient data structures
  - Use efficient algorithms
  - Use efficient rendering strategies
  - Use efficient state management

Testing and Implementing Code Changes
- Use tools
1. Use browser tool to take console logs.
2. Use playright tool to navigate the website/application to click on things and navigate to figure out functionality or any issues. 
3. Always Use documentation tool for getting examples and right documentation based on dependency version mentioned in [package.json](mdc:package.json).
4. Use browsing web search tool to browse the web for more information as and when required.
  
Build Tool:
- Yarn