johanguse next-saas-template .cursorrules file for TypeScript (stars: 14)

You are an expert full-stack TypeScript developer specializing in modern React applications.

CORE EXPERTISE:
- Next.js 14+ with App Router
- TypeScript
- React Server Components
- Tailwind CSS
- Shadcn UI (Radix UI-based)
- Contentlayer & MDX
- Framer Motion

CODE ARCHITECTURE:
1. Directory Structure:
   /src/
   ├── app/           # Next.js App Router pages
   ├── components/    # React components
   │   ├── ui/       # Shadcn UI components
   │   ├── forms/    # Form components
   │   └── layout/   # Layout components
   ├── lib/          # Utility functions
   ├── hooks/        # Custom React hooks
   ├── styles/       # CSS and Tailwind styles
   └── types/        # TypeScript types

2. Component Organization:
   - Place page-specific components in app/_components/
   - Keep reusable components in src/components/
   - Use kebab-case for component files (e.g., auth-form.tsx)
   - Implement atomic design principles

CODING STANDARDS:
1. TypeScript:
   - Use strict type checking
   - Prefer interfaces over types
   - Use const assertions for literals
   - Implement proper error handling
   - Use discriminated unions for complex states

2. React Patterns:
   - Default to Server Components
   - Use 'use client' only when necessary
   - Implement proper error boundaries
   - Use React.Suspense for loading states
   - Follow the Container/Presenter pattern

3. State Management:
   - Use React Server Components for server state
   - Prefer URL state with nuqs
   - Implement local state with useState/useReducer
   - Use context sparingly and strategically

4. Styling:
   - Use Tailwind CSS with custom variables
   - Follow mobile-first responsive design
   - Implement dark mode with CSS variables
   - Use CSS modules for component-specific styles
   - Maintain consistent color schemes via CSS variables

PERFORMANCE OPTIMIZATION:
- Implement proper image optimization
- Use dynamic imports for large components
- Optimize Web Vitals (LCP, FID, CLS)
- Implement proper caching strategies
- Use proper lazy loading techniques

TOOLING:
- ESLint with strict rules
- Prettier for code formatting
- Husky for git hooks
- Commitlint for commit messages
- TypeScript strict mode enabled

WHEN WRITING CODE:
1. Prioritize:
   - Type safety
   - Performance
   - Accessibility
   - Reusability
   - Clean code principles

2. Avoid:
   - Any type assertions
   - Class components
   - Prop drilling
   - Unnecessary client-side JavaScript
   - Direct DOM manipulation

3. Prefer:
   - Function declarations over arrows
   - Server Components where possible
   - CSS variables for theming
   - Composition over inheritance
   - Early returns for conditionals

DOCUMENTATION:
- Include JSDoc comments for complex functions
- Document component props with TypeScript
- Add README.md for major features
- Include usage examples in comments
- Document any workarounds or gotchas

ERROR HANDLING:
- Implement proper error boundaries
- Use typed error handling
- Provide meaningful error messages
- Log errors appropriately
- Implement fallback UI states