|
| 1 | +# Cursor Rules for Teimur Gasanov's Personal Website Monorepo |
| 2 | + |
| 3 | +## Project Overview |
| 4 | +This is a TypeScript monorepo containing multiple workspaces for a personal website ecosystem including a portfolio website, resume generator, Firebase functions, and various utilities. The project uses Yarn 4 workspaces with strict TypeScript configuration. |
| 5 | + |
| 6 | +## Core Technologies & Frameworks |
| 7 | +- **Languages**: TypeScript, JavaScript |
| 8 | +- **Frontend**: Next.js 15, React 19, Tailwind CSS 4 |
| 9 | +- **Backend**: Firebase Functions, Vercel Functions |
| 10 | +- **Database**: Firebase Firestore |
| 11 | +- **Build Tools**: Yarn 4, ESLint 9, Prettier |
| 12 | +- **UI Libraries**: Radix UI, React Three Fiber, Framer Motion |
| 13 | +- **Styling**: Tailwind CSS with class-variance-authority (CVA) |
| 14 | +- **Validation**: Zod schemas |
| 15 | +- **GraphQL**: GraphQL Request with custom client |
| 16 | + |
| 17 | +## Workspace Structure |
| 18 | +``` |
| 19 | +workspaces/ |
| 20 | +├── website/ # Main portfolio Next.js app |
| 21 | +├── resume-generator/ # Resume generation app |
| 22 | +├── firebase-functions/ # Firebase cloud functions |
| 23 | +├── functions/ # Vercel functions |
| 24 | +├── resume/ # Resume PDF component library |
| 25 | +├── github-client/ # GitHub API client utilities |
| 26 | +├── gql-client/ # GraphQL client utilities |
| 27 | +├── utils/ # Shared utilities |
| 28 | +└── profile-readme/ # GitHub profile README generator |
| 29 | +``` |
| 30 | + |
| 31 | +## Code Style & Conventions |
| 32 | + |
| 33 | +### TypeScript |
| 34 | +- Use strict TypeScript configuration with `strict: true` |
| 35 | +- Prefer `interface` over `type` for object shapes |
| 36 | +- Use explicit return types for functions when beneficial for clarity |
| 37 | +- Follow the pattern: `export interface Props extends HTMLAttributes<HTMLElement>` |
| 38 | +- Use Zod for runtime validation and schema definition |
| 39 | +- Leverage TypeScript's `satisfies` operator for type checking |
| 40 | + |
| 41 | +### React Components |
| 42 | +- Use functional components with hooks exclusively |
| 43 | +- Implement `forwardRef` for reusable UI components |
| 44 | +- Follow atomic design principles: atoms, molecules, organisms |
| 45 | +- Export interfaces as `Props` for component prop types |
| 46 | +- Use `children` prop for composition patterns |
| 47 | +- Prefer named exports with default export assignment: `export default Object.assign(Component, { SubComponent })` |
| 48 | + |
| 49 | +### Component Structure |
| 50 | +```typescript |
| 51 | +// Preferred component structure |
| 52 | +interface Props extends HTMLAttributes<HTMLElement> { |
| 53 | + // component-specific props |
| 54 | +} |
| 55 | + |
| 56 | +const Component = forwardRef<HTMLElement, Props>(({ children, ...props }, ref) => { |
| 57 | + return ( |
| 58 | + <element ref={ref} {...props}> |
| 59 | + {children} |
| 60 | + </element> |
| 61 | + ) |
| 62 | +}) |
| 63 | + |
| 64 | +export default Component |
| 65 | +``` |
| 66 | + |
| 67 | +### Styling with CVA (Class Variance Authority) |
| 68 | +- Use `cva` for component variant styling patterns |
| 69 | +- Define variants with comprehensive default values |
| 70 | +- Combine CVA with `classNames` for conditional styles |
| 71 | +- Follow the pattern: |
| 72 | +```typescript |
| 73 | +const componentStyles = cva( |
| 74 | + 'base-classes', |
| 75 | + { |
| 76 | + variants: { |
| 77 | + variant: { default: 'classes' }, |
| 78 | + size: { md: 'classes' } |
| 79 | + }, |
| 80 | + defaultVariants: { |
| 81 | + variant: 'default', |
| 82 | + size: 'md' |
| 83 | + } |
| 84 | + } |
| 85 | +) |
| 86 | +``` |
| 87 | + |
| 88 | +### File Organization |
| 89 | +- Use index.ts files for clean re-exports |
| 90 | +- Follow directory structure: `/component-name/Component.tsx` and `/component-name/index.ts` |
| 91 | +- Group related utilities in dedicated directories |
| 92 | +- Separate hooks into dedicated files with `use-` prefix |
| 93 | +- Co-locate types with their usage when possible |
| 94 | + |
| 95 | +### Hooks |
| 96 | +- Prefix custom hooks with `use-` |
| 97 | +- Return objects for multiple values, not arrays |
| 98 | +- Use `useCallback` and `useMemo` for performance optimization |
| 99 | +- Handle client-side rendering with `useIsClient` pattern |
| 100 | +- Follow the pattern for custom hooks returning state and actions |
| 101 | + |
| 102 | +### Import/Export Patterns |
| 103 | +- Use absolute imports with path mapping (`@/*`) |
| 104 | +- Prefer named imports for utilities and hooks |
| 105 | +- Use default imports for components |
| 106 | +- Group imports: external libraries, internal modules, relative imports |
| 107 | +- Use workspace protocol for internal packages: `"@teimurjan/package": "workspace:*"` |
| 108 | + |
| 109 | +### GraphQL & Data Fetching |
| 110 | +- Use GraphQL Request for API calls |
| 111 | +- Define queries in separate `.graphql` files |
| 112 | +- Leverage TypeScript code generation for type safety |
| 113 | +- Use React Query for client-side state management |
| 114 | + |
| 115 | +### State Management |
| 116 | +- Use React Context for global state |
| 117 | +- Implement custom providers with proper TypeScript typing |
| 118 | +- Use React Query for server state |
| 119 | +- Prefer local state with `useState` for component-specific state |
| 120 | + |
| 121 | +## Workspace-Specific Guidelines |
| 122 | + |
| 123 | +### Website (Next.js Portfolio) |
| 124 | +- Use `'use client'` directive for client-side components |
| 125 | +- Implement proper SEO with Next.js metadata API |
| 126 | +- Use dynamic imports for Three.js components to avoid SSR issues |
| 127 | +- Follow responsive design principles with Tailwind |
| 128 | + |
| 129 | +### Resume Generator |
| 130 | +- Use shadcn/ui components for consistent UI |
| 131 | +- Implement proper form validation with react-hook-form and Zod |
| 132 | +- Use Radix UI for accessible components |
| 133 | +- Follow the data table patterns with TanStack Table |
| 134 | + |
| 135 | +### Firebase Functions |
| 136 | +- Use strict error handling with proper logging |
| 137 | +- Implement rate limiting for API endpoints |
| 138 | +- Use Zod schemas for request validation |
| 139 | +- Follow Firebase best practices for cloud functions |
| 140 | + |
| 141 | +## Error Handling |
| 142 | +- Use try-catch blocks for async operations |
| 143 | +- Implement proper error boundaries in React |
| 144 | +- Use Zod for runtime validation and error messages |
| 145 | +- Log errors appropriately based on environment |
| 146 | + |
| 147 | +## Performance Guidelines |
| 148 | +- Use React.memo for expensive components |
| 149 | +- Implement proper code splitting with dynamic imports |
| 150 | +- Optimize images with Next.js Image component |
| 151 | +- Use Tailwind CSS purging for smaller bundle sizes |
| 152 | +- Leverage Next.js performance optimizations (turbopack in dev) |
| 153 | + |
| 154 | +## Testing & Quality |
| 155 | +- Follow ESLint configuration with React hooks rules |
| 156 | +- Use Prettier for code formatting |
| 157 | +- Implement TypeScript strict mode across all workspaces |
| 158 | +- Use `@typescript-eslint/no-unused-vars` with underscore prefix pattern |
| 159 | + |
| 160 | +## Environment & Deployment |
| 161 | +- Use Node.js >= 20.18.1 |
| 162 | +- Leverage Yarn 4 workspaces for dependency management |
| 163 | +- Use environment-specific configurations |
| 164 | +- Follow proper secret management for API keys |
| 165 | + |
| 166 | +## Naming Conventions |
| 167 | +- Use kebab-case for file and directory names |
| 168 | +- Use PascalCase for component names |
| 169 | +- Use camelCase for variables, functions, and props |
| 170 | +- Use SCREAMING_SNAKE_CASE for constants |
| 171 | +- Prefix interface names with descriptive context when needed |
| 172 | + |
| 173 | +## Package Dependencies |
| 174 | +- Prefer exact versions for critical dependencies |
| 175 | +- Use workspace protocol for internal dependencies |
| 176 | +- Keep dependencies up to date, especially security patches |
| 177 | +- Use resolutions for version conflicts |
| 178 | + |
| 179 | +## Git & Collaboration |
| 180 | +- Follow conventional commits for clear history |
| 181 | +- Use meaningful branch names |
| 182 | +- Keep commits focused and atomic |
| 183 | +- Update documentation when making architectural changes |
| 184 | + |
| 185 | +## AI Assistant Guidelines |
| 186 | +- Always use TypeScript with proper typing |
| 187 | +- Follow the established component patterns |
| 188 | +- Respect the monorepo workspace structure |
| 189 | +- Use existing utility functions and hooks when available |
| 190 | +- Maintain consistency with the existing codebase style |
| 191 | +- Consider performance implications of code changes |
| 192 | +- Ensure accessibility standards are met |
| 193 | +- Test components in isolation when possible |
| 194 | + |
| 195 | +## Security Considerations |
| 196 | +- Validate all inputs with Zod schemas |
| 197 | +- Use environment variables for sensitive configuration |
| 198 | +- Implement proper CORS policies |
| 199 | +- Follow Firebase security rules best practices |
| 200 | +- Sanitize user inputs, especially in HTML editors |
| 201 | + |
| 202 | +Remember: This is a personal portfolio project showcasing modern web development practices. Prioritize clean, maintainable code that demonstrates technical proficiency while ensuring excellent user experience. |
0 commit comments