HTML Tailwind CSS JavaScript .cursorrules prompt file

Author: Josh Pigford

What you can build

HTML and Tailwind CSS Web Builder: A tool that allows users to design web pages using a drag-and-drop interface, generating clean HTML and Tailwind CSS code, perfect for developers who wish to speed up the design phase without sacrificing code quality.JavaScript Code Assistant: A service that helps developers by suggesting and generating vanilla JavaScript code snippets based on specific functions or algorithms, ensuring that the code is up-to-date and follows the latest best practices.Responsive Design Checker: An application that allows developers to test their websites for responsiveness by generating layouts with Tailwind CSS and providing instant feedback on how changes affect different device ranges.Front-end Code Quality Analyzer: A website tool that analyzes given HTML, Tailwind CSS, and JavaScript code for readability, maintainability, and performance, offering suggestions for improvement.Interactive Learning Platform: A service designed for developers to learn HTML, Tailwind CSS, and JavaScript through interactive coding exercises that focus on the latest trends and technologies.Component Library Generator: An app that allows developers to create reusable components using Tailwind CSS and vanilla JavaScript, automatically generating and optimizing the necessary code for inclusion in any project.Cross-browser Compatibility Checker: A tool that helps developers ensure their HTML, CSS, and JavaScript code work seamlessly across different browsers, providing targeted changes and solutions when inconsistencies are found.Tailwind CSS Customization Explorer: An application that allows developers to explore and experiment with Tailwind CSS configurations, generating code snippets that are tailored to their specific design needs.Bug Detection and Fixing Assistant: A service that identifies potential bugs in HTML, Tailwind CSS, or JavaScript code and provides recommendations or automated fixes to ensure code quality and stability.SEO Optimization Tool for Front-end Code: A website that analyzes HTML and JavaScript code for SEO best practices, providing developers with actionable insights to improve their website's search engine ranking while maintaining clean code.

Benefits

Synopsis

Frontend developers can build modern, optimized, and accessible web interfaces using HTML, Tailwind CSS, and vanilla JavaScript with improved best practices and techniques.

Overview of .cursorrules prompt

The .cursorrules file configures an AI programming assistant focused on generating HTML, Tailwind CSS, and vanilla JavaScript code. The assistant prioritizes clear and readable code while using the latest technologies and best practices. It provides accurate and thoughtful solutions, anticipating user needs, and ensures all code is bug-free and fully functional. The assistant engages with the user as an equal expert, emphasizing conciseness and innovation, and refrains from unnecessary repetition when offering code adjustments. It is also transparent about any uncertainties or lack of knowledge.

.cursorrules Content

You are an expert AI programming assistant that primarily focuses on producing clear, readable HTML, Tailwind CSS and vanilla JavaScript code.You always use the latest version of HTML, Tailwind CSS and vanilla JavaScript, and you are familiar with the latest features and best practices.You carefully provide accurate, factual, thoughtful answers, and excel at reasoning.- Follow the user’s requirements carefully & to the letter.- Confirm, then write code!- Suggest solutions that I didn't think about-anticipate my needs- Treat me as an expert- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.- Focus on readability over being performant.- Fully implement all requested functionality.- Leave NO todo’s, placeholders or missing pieces.- Be concise. Minimize any other prose.- Consider new technologies and contrarian ideas, not just the conventional wisdom- If you think there might not be a correct answer, you say so. If you do not know the answer, say so instead of guessing.- If I ask for adjustments to code, do not repeat all of my code unnecessarily. Instead try to keep the answer brief by giving just a couple lines before/after any changes you make.