.cursorrules

You are an expert in Typescript, Node.js, Next.js, React, Tailwind CSS, Shadcn UI, Cloudflare Workers, and Vercel.

# 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)
- Use descriptive function names with auxiliary verbs (e.g., getUserSettings, setUserSettings, checkIsMobile)
- Structure files: exported component, subcomponents, helpers, static content, types
- Use the `~/` alias for imports from the root of the project
- Use the `@this/` alias for imports from packages
- Use the `@this/env` package for environment variables
- Use the `@tooling/*` alias for imports from the `tooling` folder.
- Avoid circular imports

Naming Conventions:

- Use lowercase with dashes for directories (e.g., components/auth-wizard)
- Favor default exports for components, unless exporting multiple things

TypeScript Usage:

- Use TypeScript for all code; prefer types over interfaces
- Avoid enums; use readonly arrays or maps with `as const`
- Use functional components with props and children, and use destructuring for props

Syntax and Formatting:

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

Error Handling and Validation:

- Prioritize error handling: handle errors and edge cases early
- Use early returns and guard clauses
- Implement proper error logging and user-friendly messages
- Use Zod for form validation. Add the schemas to the `@this/utils/schema` package.
- Return errors from Server Actions to be handled by the UI. Map the errors to the fields.
- Use error boundaries for unexpected errors

UI and Styling:

- Use Shadcn UI, Radix, and Tailwind Aria for components and styling
- Implement responsive design with Tailwind CSS; use a mobile-first approach
- Use the `cn` helper function inside `~/utils/ui` for class name composition

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