turnout-labs product-stack .cursorrules file for unknown (stars: 2)


This is a monorepo for a web application.
`./supabase` contains a local instance of Supabase service.
`./trigger` contains the task files for @trigger.dev.
The other repository files are a Next.Js app router project.
Use node 20.x and yarn for package management.

## 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 yarn for package management.

## Naming Conventions

Use lowercase with dashes for directories (e.g., components/auth-wizard).
Favor named exports for components.
Create and use shared components from the `./components` repository.

## TypeScript Usage

Use TypeScript for all code; prefer interfaces over types.
Avoid enums; use maps instead.
Use functional components with TypeScript interfaces.
Always check typescript types and fix typescript type errors before completion.

## 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.

## UI and Styling

Use NextUI and Tailwind CSS for components and styling.
Ensure NextUI components are only used in client side components.
Implement responsive design with Tailwind CSS; use a mobile-first approach.
Use NextUI classes to apply styles with support for themes.
Use Next.js layout.tsx to share common styles accross routes.

## Performance Optimization

Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC).
Wrap client components in Suspense with fallback.
Wrap dynamic components with Skeleton and provide an isLoaded property that returns true when loaded.
Use dynamic loading for non-critical components.
Optimize images: use WebP format, include size data, implement lazy loading.
Favor server components and Next.js SSR.

## Database Querying & Data Model creation

Use the Supabase SDK for data fetching and querying.
Use the the supabase helper utilities, import "createClient" from `@/utils/supabase/server` for server components and `@/utils/supabase/client` for client components.
For data model creation, use Supabase's schema builder.
Supabase types are in `./types/supabase.ts`.
Use server side actions and 'useCallback' when client components require data.
Never use "@supabase/auth-helpers-nextjs", always use @supabase/ssr and @supabase/supabase-js.
Create supabase migrations in the `./supabase/migrations/` directory.
Migration files must start with a timestamp, followed by the name.
Generate a new timestamp as EPOC, do not guess or hallucinate the time, always use the current time.


## Key Conventions

Optimize Web Vitals (LCP, CLS, FID).
Use only for Web API access in small components.
Avoid for data fetching or state management.
Follow Next.js app router specification for Data Fetching, Rendering, and Routing.

## Evaluation

Ensure all imported components are valid exports of the package.
Modify package.json to include any additional packages required.
Check and correct all errors before finishing.
next.js
react
supabase
tailwindcss
typescript
yarn

First Time Repository

How we build

unknown
Created: 9/23/2024
Updated: 12/18/2024

All Repositories (1)