React NextJS UI development .cursorrules prompt file

Author: Austin Thesing

What you can build

Interactive React/Next.js Tutorial Platform: Develop a platform that offers interactive tutorials and examples on how to build web applications using React and Next.js, focusing on the app router. It would include step-by-step instructions, pseudocode planning, and functional code snippets to help learners.AI-Powered Code Validator: Create a service that analyzes JavaScript code, especially focused on Next.js and React applications, to ensure it is secure, efficient, and compatible with both Vercel and Replit deployments. It would provide detailed feedback and potential improvements for code readability.Browser-Based Code Generator: Design an app that allows users to input requirements for a browser-based application, and the tool generates detailed pseudocode and implementation using the latest JavaScript frameworks, offering downloadable Next.js projects ready for deployment.Interactive Debugging Tool: Offer a web-based tool for debugging Next.js and React applications that guides users through potential issues in real-time. The tool should provide detailed reasoning and solutions for common bugs, emphasizing code readability and correctness.Secure Coding Workshop Website: Launch a site that hosts workshops focused on building secure Next.js applications. The platform could provide security best practices, common pitfalls, and practical exercises to enhance security awareness among developers.Collaborative Code Review Platform: Develop a website where developers can submit their React and Next.js code for peer review. The site would leverage AI to assist in reviewing for correctness, efficiency, and readability, ensuring no bugs or security flaws are present.Dynamic Code Snippet Library: Build a library of modern JavaScript, React, and Next.js snippets, regularly curated and updated to reflect best practices. It would include examples of secure, performant, and readable code snippets, with explanations of each.JavaScript Problem-Solving Community: Establish an online community where developers can submit challenging JavaScript problems related to browser development. AI would suggest and verify solutions, fostering knowledge exchange around modern frameworks like Next.js.Version Compatibility Checker: Offer a lightweight tool that checks for compatibility across various libraries and frameworks, particularly between React, Next.js, and deployment environments like Vercel and Replit. It would ensure that projects run smoothly without compatibility issues.Readable Code Design Guidelines: Create a website offering guidelines and best practices for writing readable code in JavaScript, React, and Next.js environments. This could include examples, do’s and don’ts, and a showcase of readable code transformations.

Benefits

Synopsis

This prompt would benefit developers using Next.js App Router to build browser-based applications with clear, readable JavaScript, leveraging frameworks like React, ensuring compatibility with hosting on Vercel and Replit.

Overview of .cursorrules prompt

The .cursorrules file defines a set of operational guidelines for an AI programming assistant specializing in JavaScript coding, with a focus on browser environments. It emphasizes using the latest versions of libraries and frameworks, specifically React and Next.js with the App Router, and strictly advises against the usage of the pages router. The assistant is tasked with providing detailed pseudocode before writing actual code, ensuring the code is accurate, secure, bug-free, and readable, prioritizing clear and concise implementation over minimalism or performance. It also stresses on compatibility with Vercel and Replit hosting platforms. Additionally, the assistant should be honest about the scope of its knowledge and avoid making assumptions or leaving incomplete code.

.cursorrules Content

You are an expert AI programming assistant that primarily focuses on producing clear, readable JavaScript code for the browser.You also use the latest versions of popular frameworks and libraries such as React & NextJS (with app router).You provide accurate, factual, thoughtful answers, and are a genius at reasoning.- This project uses Next.js App Router never suggest using the pages router or provide code using the pages router.- Follow the user's requirements carefully & to the letter.- First think step-by-step - describe your plan for what to build in pseudocode, written out in great detail.- Confirm, then write code!- 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 sure to reference file names.- Be concise. Minimize any other prose.- 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.- Only write code that is neccessary to complete the task.- Rewrite the complete code only if necessary.- This is app is hosted on Vercel as well as Replit. Make sure your code is compatible with both!