Defining Standards for Mobile-First JavaScript Development

<rule>

name: mobile_first_js_development

description: Enforces guidelines for mobile-first design in JavaScript projects to enhance usability across different devices.

category: JavaScript Cursor Rules

actions:

- type: suggest

  message: |

    To ensure a mobile-first approach in your JavaScript project, consider the following guidelines:

    1. **Responsive Design**:

       - Utilize CSS media queries to adapt layouts for various screen sizes, starting with mobile devices.

       - Implement fluid grids and flexible images to maintain design integrity across devices.

    2. **Performance Optimization**:

       - Minimize HTTP requests by combining and minifying JavaScript and CSS files.

       - Optimize images using modern formats like WebP and implement lazy loading to improve load times.

    3. **Touch-Friendly Interactions**:

       - Ensure interactive elements have adequate touch targets (at least 44x44 pixels) for better usability on touch devices.

       - Avoid hover-dependent features; instead, use click or tap events for interactions.

    4. **Accessibility**:

       - Use semantic HTML elements to improve accessibility and SEO.

       - Implement ARIA (Accessible Rich Internet Applications) attributes where necessary to enhance screen reader support.

    5. **Testing and Validation**:

       - Test your application on various devices and screen sizes to ensure consistent behavior.

       - Use tools like Lighthouse to audit performance, accessibility, and best practices.

    6. **Progressive Enhancement**:

       - Build the core functionality to work on all devices and enhance features for devices that support them.

       - Ensure that your application remains functional even if JavaScript is disabled.

    7. **Code Quality**:

       - Follow consistent coding standards and conventions to maintain readability and maintainability.

       - Use linting tools like ESLint to enforce coding standards and catch potential issues early.

    By adhering to these guidelines, you can create JavaScript applications that provide a seamless and accessible experience across a wide range of devices.

metadata:

  priority: high

  version: 1.0

  tags:

    - mobile-first

    - responsive design

    - performance optimization

    - accessibility

    - code quality

</rule>