11ty Node.js HTML CSS .cursorrules prompt file
About .cursorrules prompt file
What you can build
Static Site Generator Platform - Create a user-friendly platform that utilizes 11ty/Eleventy and Node.js for building static websites, providing customizable templates and plugins to streamline the creation of responsive, SEO-friendly sites.
Responsive Layout Builder - Develop an application that allows users to design webpages with Flexbox and Grid layouts visually, automatically generating compliant HTML and CSS code following BEM methodology and responsive design principles.
Code Linter and Formatter Tool - Build a tool for Node.js and 11ty projects to enforce the guidelines outlined in the .cursorrules file, such as DRY principles, code organization, semantic HTML, and error handling practices.
Web Performance Optimizer - Design a service that analyzes web projects and provides suggestions to optimize images, apply caching strategies, and enhance loading times, ensuring adherence to performance guidelines.
Eleventy Configuration Assistant - Develop an application that assists developers in setting up their
.eleventy.js
files, managing collections, creating shortcodes, and organizing project directories effectively for an 11ty-based project.Semantic HTML and CSS Generator - Offer a tool that generates semantic HTML and well-structured CSS files from visual layouts, ensuring best practices in naming, structure, and responsive design, particularly for 11ty projects.
Node.js Async/Await Debugger - Create an advanced debugging tool specifically for handling asynchronous operations in Node.js, helping developers to manage async/await patterns and ensure robust error handling.
Frontend Asset Manager - Launch an app that manages static assets within the
public
directory of a project, providing functionalities such as image optimization, lazy loading implementation, and streamlined asset organization.Environment Configuration Dashboard - Provide a dashboard for managing and deploying environment variables securely in Node.js projects, ensuring consistency across different deployment scenarios.
Content Management Interface for 11ty - Develop a CMS interface that allows non-developers to easily update content within an 11ty project, supporting templates, partials, and global data files.
Benefits
- Standardize file organization for maintainability: separate source files, static assets, and templates into well-defined directories.
- Enforce BEM methodology in CSS, encouraging consistent class naming for scalable, maintainable styles.
- Leverage modern JavaScript and Node.js features, promoting code readability and asynchronous operation handling.
Synopsis
Developers working on static site projects with 11ty/Eleventy and Node.js can benefit from this prompt to create efficient, maintainable, and well-structured codebases.
Overview of .cursorrules prompt
The .cursorrules file provides a set of guidelines and best practices for developing a project using 11ty/Eleventy, Node.js, HTML, and CSS. It outlines the recommended file structure for organizing source files, static assets, layout files, partial templates, global data files, and JavaScript files. It specifies best practices for writing semantic HTML and CSS following the BEM methodology, and emphasizes responsive design and performance optimization techniques. For Node.js, it advocates modern JavaScript features, proper error handling, and the use of modules and environment variables. The file also provides guidance on leveraging 11ty/Eleventy features such as configuration management, collections, and shortcodes for efficient template and content organization. Overall, this .cursorrules file aims to ensure maintainable, efficient, and scalable project development.