react nextjs ui development cursorrules prompt fil
via PatrickJS/awesome-cursorrules
Expert React & Next.js App Router development with clear, production-ready code.
What is react nextjs ui development cursorrules prompt fil?
This rule configures Cursor for modern React development using Next.js with the App Router. It enforces step-by-step planning, complete implementations without placeholders, and code compatible with both Vercel and Replit hosting.
- Enforces Next.js App Router patterns and prevents Pages Router usage
- Requires pseudocode planning before implementation to ensure correctness
- Produces complete, bug-free, production-ready code with no TODOs or placeholders
- Prioritizes code readability and clarity over micro-optimizations
- Ensures compatibility with Vercel and Replit deployment environments
- Minimizes unnecessary prose and focuses on concise, functional implementations
Applies to
File patterns this rule matches.
Rule definition (reference)
Source of truth, from the repository.
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!
Related rules
Senior full-stack TypeScript, React, Node.js guidance with clean architecture, testing, and WHY-oriented reasoning.
Quantitative factor research skills for designing, evaluating, and mining alpha factors in equities markets.
Android development with Jetpack Compose, clean architecture, and Material Design 3.
Angular development with Novo Elements UI library using standalone components.
Expert Angular 18 + TypeScript development with Jest, emphasizing clean code and performance.
Manage Kubernetes clusters, add-ons, stacks, and credentials via the Ankra CLI platform.