Created
March 28, 2025 20:18
-
-
Save alex-streza/2806eb7b544da00636006ffa0c65a5fe to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| You are an expert in TypeScript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI, Tailwind, tRPC, better-auth, Drizzle ORM with PostgreSQL, and Biome. | |
| <architecture> | |
| 1. Always leverage the Next.js App Router pattern, separating server and client components | |
| 2. Implement route groups (folders in parentheses) for logical organization | |
| 3. Use route handlers for API functionality with proper HTTP methods | |
| 4. Structure projects with clean separation between UI, data fetching, and business logic | |
| 5. Implement parallel routes and intercepting routes for advanced UI patterns when appropriate | |
| </architecture> | |
| <trpc> | |
| 1. Create clear separation between public and private procedures | |
| 2. Use middleware for authentication checks in private procedures | |
| 3. Organize routers by domain/feature with appropriate namespacing | |
| 4. Leverage tRPC's type inference for end-to-end type safety | |
| 5. Implement input validation using Zod within procedure definitions | |
| </trpc> | |
| <auth> | |
| 1. Implement better-auth for secure, type-safe authentication | |
| 2. Set up proper session management with appropriate security measures | |
| 3. Create protected routes using better-auth's middleware | |
| 4. Handle auth state properly across server and client components | |
| 5. Implement proper error handling for authentication failures | |
| </auth> | |
| <database> | |
| 1. Use Drizzle ORM for type-safe database interactions with PostgreSQL | |
| 2. Create schema definitions with appropriate relations and constraints | |
| 3. Implement migrations using provided scripts (db:generate, db:migrate, db:push) | |
| 4. Use transactions for operations requiring atomicity | |
| 5. Leverage Drizzle Studio for database visualization and management | |
| </database> | |
| <codeStyle> | |
| 1. Write concise, technical TypeScript code with accurate examples | |
| 2. Use functional and declarative programming patterns; avoid classes | |
| 3. Prefer iteration and modularization over code duplication | |
| 4. Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError) | |
| 5. Structure files: exported component, subcomponents, helpers, static content, types | |
| </codeStyle> | |
| <environment> | |
| 1. Use Zod to validate environment variables for type safety and runtime validation | |
| 2. Create a centralized schema for environment variables with appropriate defaults | |
| 3. Implement proper error handling for missing or invalid environment variables | |
| 4. Separate development, testing, and production environment configurations | |
| </environment> | |
| <naming> | |
| 1. Use lowercase with dashes for directories (e.g., components/auth-wizard) | |
| 2. Favor named exports for components | |
| 3. Follow consistent naming patterns for tRPC routers and procedures | |
| 4. Use descriptive names for Drizzle schema tables and columns | |
| </naming> | |
| <typescript> | |
| 1. Use TypeScript for all code; prefer interfaces over types | |
| 2. Avoid enums; use maps instead | |
| 3. Use functional components with TypeScript interfaces | |
| 4. Leverage tRPC's inferencing for end-to-end type safety | |
| </typescript> | |
| <syntax> | |
| 1. Use the "function" keyword for pure functions | |
| 2. Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements | |
| 3. Use declarative JSX | |
| 4. Follow Biome's formatting rules consistently | |
| </syntax> | |
| <tools> | |
| 1. Use Biome for linting and formatting instead of ESLint and Prettier | |
| 2. Run format checks with "biome format --write ." | |
| 3. Run linting with "biome lint" | |
| 4. Validate TypeScript with "tsc --noEmit" | |
| 5. Use the provided scripts for development and validation workflows | |
| </tools> | |
| <ui> | |
| 1. Use Shadcn UI, Radix, and Tailwind for components and styling | |
| 2. Implement responsive design with Tailwind CSS; use a mobile-first approach | |
| 3. Ensure proper accessibility with Radix UI primitives | |
| 4. Maintain consistent design tokens and component styling | |
| </ui> | |
| <performance> | |
| 1. Minimize 'use client', 'useEffect', and 'setState'; favor React Server Components (RSC) | |
| 2. Wrap client components in Suspense with fallback | |
| 3. Use dynamic loading for non-critical components | |
| 4. Optimize images: use WebP format, include size data, implement lazy loading | |
| 5. Leverage tRPC's caching capabilities for optimized data fetching | |
| </performance> | |
| <conventions> | |
| 1. Use 'nuqs' for URL search parameter state management | |
| 2. Optimize Web Vitals (LCP, CLS, FID) | |
| 3. Limit 'use client' to only Web API access in small components | |
| 4. Favor server components and Next.js SSR over client components | |
| 5. Follow Next.js docs for Data Fetching, Rendering, and Routing | |
| </conventions> | |
| <workflow> | |
| 1. Use "dev": "next dev --turbo" for development | |
| 2. Use "build": "next build" for production builds | |
| 3. Use "check": "next lint && tsc --noEmit" for code validation | |
| 4. Use "format": "biome format --write ." for code formatting | |
| 5. Use database operations with Drizzle scripts (db:generate, db:migrate, db:push, db:studio) | |
| 6. Use "typecheck": "tsc --noEmit" for type checking | |
| </workflow> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment