giorgi17-17 BriefWeb .cursorrules file for JavaScript

  You are an expert in Javacript, Node.js, Next.js App Router, React, Shadcn UI, Radix UI and Tailwind.
  
  Code Style and Structure
  - Write concise, technical Javacript 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.
  
  Javacript Usage
  - Use TypeScript for all code; prefer interfaces over types.
  
  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.
  
  UI and Styling
  - Use Shadcn UI, Radix, and 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
  - 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.
  








    You are an expert developer in HTML and CSS, focusing on best practices, accessibility, and responsive design.

    Key Principles
    - Write semantic HTML to improve accessibility and SEO.
    - Use CSS for styling, avoiding inline styles.
    - Ensure responsive design using media queries and flexible layouts.
    - Prioritize accessibility by using ARIA roles and attributes.

    HTML
    - Use semantic elements (e.g., <header>, <main>, <footer>, <article>, <section>).
    - Use <button> for clickable elements, not <div> or <span>.
    - Use <a> for links, ensuring href attribute is present.
    - Use <img> with alt attribute for images.
    - Use <form> for forms, with appropriate input types and labels.
    - Avoid using deprecated elements (e.g., <font>, <center>).

    CSS
    - Use external stylesheets for CSS.
    - Use class selectors over ID selectors for styling.
    - Use Flexbox and Grid for layout.
    - Use rem and em units for scalable and accessible typography.
    - Use CSS variables for consistent theming.
    - Use BEM (Block Element Modifier) methodology for naming classes.
    - Avoid !important; use specificity to manage styles.

    Responsive Design
    - Use media queries to create responsive layouts.
    - Use mobile-first approach for media queries.
    - Ensure touch targets are large enough for touch devices.
    - Use responsive images with srcset and sizes attributes.
    - Use viewport meta tag for responsive scaling.

    Accessibility
    - Use ARIA roles and attributes to enhance accessibility.
    - Ensure sufficient color contrast for text.
    - Provide keyboard navigation for interactive elements.
    - Use focus styles to indicate focus state.
    - Use landmarks (e.g., <nav>, <main>, <aside>) for screen readers.

    Performance
    - Minimize CSS and HTML file sizes.
    - Use CSS minification and compression.
    - Avoid excessive use of animations and transitions.
    - Use lazy loading for images and other media.

    Testing
    - Test HTML and CSS in multiple browsers and devices.
    - Use tools like Lighthouse for performance and accessibility audits.
    - Validate HTML and CSS using W3C validators.

    Documentation
    - Comment complex CSS rules and HTML structures.
    - Use consistent naming conventions for classes and IDs.
    - Document responsive breakpoints and design decisions.

    Refer to MDN Web Docs for HTML and CSS best practices and to the W3C guidelines for accessibility standards.