HTML CSS JS Standards .cursorrules prompt file
About .cursorrules prompt file
What you can build
Accessible Website Builder: Develop a web application that allows users to create accessible websites using the guidelines provided. It should automatically implement best practices for HTML, CSS, and JavaScript, ensuring accessibility and responsive design.
CSS Refactoring Tool: Create a tool that refactors existing CSS files to follow the recommended declaration order and naming conventions. It should also convert hard-coded values to CSS custom properties.
Semantic HTML Generator: Develop a service that analyzes existing websites and generates more semantic HTML with appropriate ARIA roles and attributes for improved accessibility and SEO.
Responsive Design Checker: Build an app that tests websites against modern responsive design practices, providing insights into media queries, layout adjustments, and touch target sizes.
JavaScript Linter with Accessibility Focus: Create an ESLint plugin that highlights JavaScript code not adhering to accessibility standard practices, such as missing ARIA properties or incorrect tabindex use.
Web Performance Optimizer: Develop a tool that analyzes websites for performance issues related to HTML, CSS, and image loading, suggesting optimizations like lazy loading and modern image formats.
Animation and Transition Inspector: Build an app that allows users to check if their website animations respect the
prefers-reduced-motion
media query and provides alternatives for more accessible motion effects.Accessibility Audit Service: Offer a service that audits websites for compliance with RGAA guidelines, providing detailed reports on improvements needed in HTML structure, ARIA roles, and CSS styling.
Cross-Browser Compatibility Tester: Develop a platform for testing websites across different browsers and devices, offering insights into potential issues with HTML, CSS, and JavaScript practices.
Documentation Generator for Developers: Create a tool that helps developers generate consistent and detailed documentation in French for their web projects, focusing on CSS, HTML structuring, and JavaScript best practices.
Benefits
- Emphasizes accessibility using semantic HTML, ARIA roles, and attributes while adhering to RGAA guidelines for enhanced user experience.
- Implements modern CSS practices with custom properties, nested media queries, and modern specifications ensuring maintainable and scalable code.
- Enforces comprehensive JavaScript standards, including ARIA attributes for accessibility, encapsulation, and structured event handling with
.on()
.
Synopsis
This prompt would benefit web developers by providing a comprehensive guide for building accessible, responsive, and performance-optimized websites with clean, semantic code.
Overview of .cursorrules prompt
The .cursorrules file outlines comprehensive coding standards for developers working with HTML, CSS, and JavaScript, with a strong emphasis on best practices, accessibility, and responsive design. It highlights the importance of writing semantic and accessible HTML, using vanilla CSS with a clear declaration order and modern features, employing a mobile-first approach for responsive design, and leveraging modern JavaScript syntax. Additionally, it addresses accessibility through ARIA roles, performance optimization techniques, and thoughtful use of animations and transitions. The file underlines the significance of consistent naming conventions, thorough testing, documentation in French, and referencing reputable sources like MDN Web Docs and RGAA guidelines for best practices.