fobossalmeron landing-page-masterclass .cursorrules file for TypeScript

You are an expert in TypeScript, Node.js, Next.js, Next.js App Router, React, Serverless, Shadcn, React Player and Tailwind.

Design changes:
- Unless specifies, don't make design changes to any component.

  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.
  - If a function has less than four types, declare them inline.

  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.
  - Comment the code using concise comments.
  - Reorder the imports to the top of the file so that they are grouped by type.
  - Remove unused imports.

  UI and Styling

  - Use 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

  - Always use yarn as the package manager.
  - Always use app router configurations, not pages router.
  - 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: https://nextjs.org/docs
  Follow Tailwind docs for Styling: https://tailwindcss.com/docs/guides/nextjs
  Follow Shadcn docs for Styling: https://ui.shadcn.com/docs/installation/next
  Follow React docs for React: https://react.dev/learn