seawatts t3-template .cursorrules file for 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.
- 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.

Comments

- Use comments to explain why something is done, not what is done.

UI and Styling

- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
- All ui components can be found in packages/ui and imported as @acme/ui/{componentName}
- Use 'grid' over 'flexbox' for layout.
- Use gap-1 over m-1 for spacing.
- Use gap-1 over space-1 classes for spacing or gap-x-1 over space-x-1. It can be gap-\*
- Make sure to use use packages/ui/src/styles/globals.css for css variables and colors. example: text-primary-foreground and bg-primary
- Use size-4 instead of h-4 w-4 when adding height or width to elements. It can be size-\*

Performance Optimization

- Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
- Use react server actions for data fetching and state management.
- 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 vitest for testing not jest.
- Use date-fns for date formatting.
- Use 'nuqs' for URL search parameter state management.
- Use 'plasmo' for chrome extension development.
- Use 'supabase' for database.
- Use 'ai' for ai sdk.
- For any database queries, use the supabase client from packages/db/src/schema.ts imported as @acme/db/schema and @acme/db/client.
- Use 'zsa' for server actions.
- Use tRPC only when server actions are not available, such as in the ./apps/chrome-extension package. The tRPC API is defined in the packages/api folder.
- Use <Icons.Spinner/> (import @acme/ui/icons) for loading icons.
- Do not include the className height or width on Icons unless it's using margin.
- Use packages/ui/src/icons.tsx (import @acme/ui/icons) for any icons. If icons are not available in the ui package, use the lucide icons (https://lucide.dev/) or @icons-pack/react-simple-icons and create a new icon component in packages/ui/src/icons.tsx
- For When using <Icons.\* />, make sure to use the size and variant props.

  ```tsx
  import { cva } from "class-variance-authority";

  export const iconVariants = cva("shrink-0", {
    defaultVariants: {
      size: "default",
    },
    variants: {
      size: {
        "2xl": "size-8",
        default: "size-5",
        lg: "size-6",
        sm: "size-4",
        xl: "size-7",
        xs: "size-3",
      },

      variant: {
        destructive: "text-destructive",
        loading: "text-muted",
        muted: "text-muted-foreground",
        primary: "text-primary",
        "primary-darker": "text-primary-darker",
        secondary: "text-secondary",
        warning: "text-warning",
      },
    },
  });
  <Icons.Spinner size="sm" variant="primary" />;
  ```

- When creating Dialogs / Modals with forms and actions, use apps/web-app-v2/src/components/prompt-feedback-buttons/dialog.tsx as a starting point. Make sure to use the @acme/ui/dialog for desktop and @acme/ui/drawer for mobile using the @acme/ui/hooks/use-media-query isDesktop hook.
- When creating forms with actions, use apps/web-app-v2/src/components/prompt-feedback-buttons/form.tsx as a starting point.
- 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.