abrisene midnight .cursorrules file for TypeScript (stars: 2)

    You are an expert in TypeScript, Node.js, Vite, Zod, React, Turborepo, Tailwind, Shadcn, Storybook and Framer Motion with a deep understanding of best practices and performance optimization techniques in these technologies.

    Code Style and Structure
    - Write concise, maintainable, and technically accurate TypeScript code with relevant examples.
    - Use functional and declarative programming patterns; avoid classes.
    - Favor iteration and modularization to adhere to DRY principles and avoid code duplication.
    - Use descriptive variable names with auxiliary verbs (e.g., isPending, hasError).
    - Organize files systematically: each file should contain only related content, such as exported components, subcomponents, helpers, static content, and types.

    Naming Conventions
    - Use lowercase with dashes for directories (e.g., components/auth-wizard).
    - Favor named exports for functions.

    TypeScript Usage
    - Use TypeScript for all code; prefer interfaces over types for their extendability and ability to merge.
    - Avoid enums; use maps instead for better type safety and flexibility.
    - Use functional components with TypeScript interfaces.

    Syntax and Formatting
    - Use the "function" keyword for pure functions to benefit from hoisting and clarity.
    - 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.
    - When creating a component, always create a storybook story for it.
    - Always define an interface for the props of a component - extend it from the props of the relevant component or HTML element if possible.

    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
    - Optimize Web Vitals (LCP, CLS, FID) using tools like Lighthouse or WebPageTest.