LLMs Rules

# The Boring Template Guidelines
 
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.
- Avoid enums; use maps instead.
- 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.
 
UI and Styling
 
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
 
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.
 
Key Conventions
 
- Use 'nuqs' for URL search parameter state management.
- 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.
 
### Code Standards
 
- Files
  - Always use kebab-case
- Naming
  - Functions/Vars: camelCase
  - Constants: UPPER_SNAKE_CASE
  - Types/Classes: PascalCase
- TypeScript
  - Prefer types over interfaces
  - Use type inference whenever possible
  - Avoid any, any[], unknown, or any other generic type
  - Use spaces between code blocks to improve readability
 
### Styling
 
- Styling is done using Tailwind CSS. We use the "cn" function from the "@kit/ui/utils" package to generate class names.
- Avoid fixes classes such as "bg-gray-500". Instead, use Shadcn classes such as "bg-background", "text-secondary-foreground", "text-muted-foreground", etc.
 
## Forms
 
- Use React Hook Form for form validation and submission.
- Use Zod for form validation.
- Use the "zodResolver" function to resolve the Zod schema to the form.
  Follow the example below to create all forms:
 
### Define the schema
 
Zod schemas should be defined in the "schema" folder and exported, so we can reuse them across a Server Action and the client-side form:
"tsx
// \_lib/schema/create-note.schema.ts
import { z } from 'zod';
export const CreateNoteSchema = z.object({
title: z.string().min(1),
content: z.string().min(1),
});
"

# The Boring Template Guidelines
 
You are an expert developer working with this repository. Your focus is on:
 
- **Expertise:** Next.js (App Router), React, TypeScript, Tailwind CSS, TRPC, Drizzle ORM, and Better-Auth
- **Focus:** Code clarity, scalability, maintainability, and security
- **Style:** Consistent, explicit, and production-ready
- **Libraries:** TRPC, Better-Auth, drizzle-orm, Upstash Ratellimit, and Tailwind CSS
 
---
 
## Application Scope
 
This repository serves multiple purposes:
 
- **Marketing Pages:** Static pages (e.g. license, privacy, terms) found under "app/(marketing)" for public information.
- **Authentication & Onboarding:** Routes for sign-in, sign-out, email verification, and guided onboarding found under "app/(web)/(auth)" and "app/(web)/onboarding".
- **Dashboard & Workspace:** Protected routes for user dashboards, settings, and workspaces are located under "app/(web)/(dashboard)/[slug]". These include dedicated areas for analytics, items, team settings, billing, and more.
- **API & Server Actions:** RESTful and TRPC-based API endpoints are defined under "app/api", with server actions and database operations in "server/" (including migrations, schema definitions, and utility modules).
 
---
 
## Project Structure
 
The repository follows the Next.js App Router convention and is organized as follows:
 
"- app/
├─ (marketing)/ # Public-facing marketing pages (license, privacy, terms, home)
├─ (web)/ # Auth, callback, error, onboarding, and invite pages
│ ├─ (auth)/ # Sign-in, sign-out pages and authentication layout
│ ├─ (dashboard)/ # Protected dashboard pages for workspaces, analytics, items, and settings
│ ├─ callback/ # Callback and redirection logic after auth
│ ├─ error/ # Global error page
│ ├─ invite/ # Invitation flows
│ ├─ join/ # Workspace creation/join page
│ └─ onboarding/ # Onboarding flow (profile, workspace, collaborate)
├─ api/ # API routes (auth, feedback, health, image-upload, etc.)
└─ layout.tsx # Global layout
 
- components/ # UI components (buttons, forms, charts, navigation, etc.)
- hooks/ # Custom React hooks
- lib/ # Global utilities, configuration, constants, and helper functions
- public/ # Static assets (images, icons)
- server/ # Server-side logic including actions, DB configuration, migrations, and queries
- trpc/ # TRPC routers and client/server setup
- styles/ # Global CSS styles
- types/ # Shared TypeScript types
  "
 
---
 
## Configuration
 
- **Central Config Files:**
- Application-wide settings are defined in "lib/config.ts" and "next.config.ts".
- Environment variables are managed in "env.ts".
 
- **ESLint & Prettier:**
- Code style and formatting rules are enforced by ESLint and Prettier. Always run linters and formatters before committing changes.
 
---
 
## Database
 
- **ORM & Schema:**
- The project uses **drizzle-orm** for database interactions.
- Database configuration and migrations are located under "server/db/config/" and "server/db/migrations/".
- Schema definitions reside in "server/db/schemas/" and corresponding TypeScript types in "types/".
 
- **Data Consistency & Security:**
- Write robust queries and ensure that all mutations are validated.
- Use database transactions (see "server/db/config/database.ts") when performing multi-step operations.
- Adhere to security best practices by properly sanitizing input and managing permissions in server queries.
 
---
 
## UI Components
 
- **Organization & Reusability:**
- All UI components are placed in the "components/" directory.
- Component names follow **PascalCase**.
- Use Tailwind CSS utility classes for styling, favoring semantic names over raw color codes (e.g., use "bg-card" or "text-muted-foreground").
 
- **Naming & File Conventions:**
- Files: Use kebab-case (e.g., "create-item-form.tsx").
- Functions & Variables: Use camelCase.
- Constants: Use UPPER_SNAKE_CASE.
 
---
 
## Hooks & Utilities
 
- Custom hooks are centralized in the "hooks/" directory.
- Utility functions (e.g., formatting, routing helpers) are in "lib/utils.ts".
- Use type inference and explicit typing with TypeScript to ensure reliability and maintainability.
 
---
 
## Server Actions & API Routes
 
- **Server Actions:**
- Encapsulate data mutations using server actions. Place these in "server/actions/" and name them with an "Action" suffix (e.g., "createItemAction").
- Always validate input using Zod schemas before processing data.
 
- **API Routes:**
- API endpoints are defined under "app/api/".
- Use Next.js Route Handlers and the TRPC framework where applicable.
- For legacy REST routes, use structured error handling and logging.
 
- **TRPC Integration:**
- Data fetching and mutations in the dashboard are handled via TRPC routers located in the "trpc/" folder.
- Ensure that data prefetching is used in Server Components to optimize performance.
 
---
 
## Forms & Validation
 
- **Form Libraries:**
- Use React Hook Form for client-side form management.
- Validate forms using Zod schemas.
- **Form Organization:**
- Define reusable Zod schemas in a dedicated folder (e.g., "lib/schemas.ts").
- Keep form components modular and store them in "components/forms/".
 
---
 
## Error Handling & Logging
 
- **Error Management:**
 
- Handle asynchronous errors gracefully in both Client and Server Components.
- Log errors using structured logging practices (e.g., using a centralized logger in "server/utils/").
- **User Feedback:**
 
- Always surface meaningful error messages to users, while not exposing sensitive details.
 
---
 
## Authentication & Onboarding
 
- **Authentication Flow:**
 
- Managed via Better-Auth (see "app/api/auth/[...all]/route.ts").
- Protected pages under the dashboard use server-side checks to ensure that the user is authenticated.
- The sign-in and sign-out flows are defined in "app/(web)/(auth)".
- **Onboarding:**
 
- The onboarding process is segmented into multiple steps (profile, workspace, collaborate) under "app/(web)/onboarding/".
- Redirect users appropriately based on their onboarding status and use database queries to manage progress.
 
---
 
## Code Quality & Best Practices
 
- **TypeScript Best Practices:**
 
- Avoid the use of "any"; strive for explicit type definitions and inference.
- Prefer types over interfaces unless extending complex objects.
- **Modularity & Reusability:**
- Write self-contained components and functions.
- Keep business logic separate from UI components whenever possible.
- **Version Control:**
- Commit frequently with clear commit messages.
 
- Use feature branches and code reviews to maintain high code quality.
 
---
 
By following these guidelines, developers working on the repository will ensure consistency, maintainability, and high-quality code that adheres to modern best practices. Adjustments and updates to these rules should be discussed in code reviews to ensure they meet evolving project needs.
 
---
 
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.
- Avoid enums; use maps instead.
- 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.
 
UI and Styling
 
- Use Shadcn UI, Radix, and Tailwind for components and styling.
- Implement responsive design with Tailwind CSS; use a mobile-first approach.
 
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.
 
Key Conventions
 
- Use 'nuqs' for URL search parameter state management.
- 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.
 
### Code Standards
 
- Files
  - Always use kebab-case
- Naming
  - Functions/Vars: camelCase
  - Constants: UPPER_SNAKE_CASE
  - Types/Classes: PascalCase
- TypeScript
  - Prefer types over interfaces
  - Use type inference whenever possible
  - Avoid any, any[], unknown, or any other generic type
  - Use spaces between code blocks to improve readability
 
### Styling
 
- Styling is done using Tailwind CSS. We use the "cn" function from the "@kit/ui/utils" package to generate class names.
- Avoid fixes classes such as "bg-gray-500". Instead, use Shadcn classes such as "bg-background", "text-secondary-foreground", "text-muted-foreground", etc.