HTML CSS JavaScript Guide .cursorrules prompt file
About .cursorrules prompt file
What you can build
Accessibility Checker Tool: A web tool that analyzes websites for accessibility compliance, helping developers ensure adherence to RGAA guidelines, and providing suggestions for improvements such as correct ARIA roles, sufficient color contrast, and logical tab order.
Responsive Design Testing App: An application that allows developers to test their websites in various screen sizes and orientations, using a mobile-first approach and modern media queries syntax, ensuring that touch targets are appropriately sized.
CSS Optimization Service: A service that optimizes CSS by minimizing file size, refactoring properties using modern CSS rules and custom properties, and ensuring transitions are efficient by only animating transforms, opacity, or filter.
Lighthouse Performance Optimizer: An application that integrates with Google Lighthouse, providing detailed performance and accessibility audits, and suggesting improvements such as lazy loading images and using SVG or AVIF formats for media.
Code Consistency Checker: A tool that checks HTML, CSS, and JavaScript code for adherence to best practices and conventions, such as semantic HTML, CSS declaration order, modern JS features, and proper use of ARIA attributes.
Commit Message Validator: A service that integrates with version control systems to ensure all commit messages follow the Conventional Commits style and are written in French, helping maintain a consistent and organized project history.
JavaScript ARIA Attribute Manager: A library that simplifies the process of adding/removing ARIA attributes and managing dynamic component states like aria-selected or aria-expanded, ensuring better accessibility with less manual coding.
Favicon Generator: A web app that takes an image input and generates SVG format favicons, ensuring compliance with modern web standards and auto-including it in the HTML
head
with the appropriate semantics.Documentation Generator: A tool that automatically generates JSDoc comments for JavaScript functions, documents responsive breakpoints in CSS files, and updates the README.md, ensuring all aspect of the project is well-documented and up-to-date.
Cross-Browser Compatibility Tester: A service for testing web applications across multiple browsers and devices, with automated feedback on performance and layout discrepancies, aiding developers in making cross-platform adjustments.
Benefits
- Emphasizes use of vanilla CSS with modern features such as custom properties and container queries, avoiding frameworks for a streamlined implementation.
- Adopts a mobile-first responsive design approach using media queries and flexible layouts, ensuring all interactive elements are touch-friendly.
- Enforces comprehensive accessibility practices with a focus on ARIA roles and semantic HTML to enhance usability across diverse user needs.
Synopsis
This prompt is beneficial for frontend developers to establish consistent coding standards, promoting accessibility, responsive design, and performance in web applications.
Overview of .cursorrules prompt
The .cursorrules file outlines a comprehensive set of coding standards for HTML, CSS, and JavaScript development, emphasizing best practices in accessibility, performance, and responsive design. It specifies semantic HTML usage, prefers vanilla CSS, and encourages modern JavaScript features. The file advocates for organized CSS declarations, outlines custom properties naming conventions, and stresses the importance of accessibility with ARIA roles and properties. It also addresses performance optimization through minimized file sizes, lazy loading, and prefers modern image formats. Additionally, it specifies guidelines for transitions, documentation, commit messages in French using the Conventional Commits pattern, and testing strategies across multiple browsers and devices. The file serves as a detailed coding guideline for ensuring maintainable, accessible, and high-performing web applications.