Skip to main content
rule

react-nextjs-ui-development-cursorrules-prompt-fil: Cursor rule

Configures Cursor for React and Next.js App Router development. Forces the agent to outline pseudocode first and maintain dual Vercel and Replit support.

Install into Cursor · Manually: put the files in place All methods and platforms ↓
.cursor/rules/react-nextjs-ui-development-cursorrules-prompt-fil.mdc
Open on GitHub

What react-nextjs-ui-development-cursorrules-prompt-fil does

This rule constrains Cursor to browser-focused React and Next.js development. The assistant must rely strictly on the App Router. Pages Router code is strictly forbidden.

The workflow enforces planning before code execution. The assistant writes a step-by-step plan in pseudocode and waits for confirmation before coding. Generated files must be explicitly named, with an outright ban on unfinished blocks or TODO markers.

Dual-target deployment creates a strict boundary. All code must run properly on both Vercel and Replit. Readability is prioritized over performance tuning.

What it helps with

  • block suggestions and boilerplate targeting Next.js Pages Router
  • require step-by-step pseudocode approval before writing code
  • eliminate placeholders, omitted logic, and TODO comments
  • maintain simultaneous runtime support for Vercel and Replit

Example prompts for the agent

  • Draft a pseudocode plan for a dashboard metrics card in the App Router.
  • Build a responsive navigation bar without any placeholders or TODOs.
  • Create an API-connected form component compatible with both Vercel and Replit.

How to install react-nextjs-ui-development-cursorrules-prompt-fil

Manually: put the files in place

.cursor/rules/react-nextjs-ui-development-cursorrules-prompt-fil.mdc

Frontmatter: description, globs, alwaysApply

Step by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules

Questions about react-nextjs-ui-development-cursorrules-prompt-fil

How to install react-nextjs-ui-development-cursorrules-prompt-fil in Cursor?

Place the rule file at .cursor/rules/react-nextjs-ui-development-cursorrules-prompt-fil.mdc inside your project root.

Does this rule allow using Next.js Pages Router?

No, the prompt explicitly instructs the assistant never to suggest or write code using the Pages Router.

What hosting platforms does this rule target?

Every code change must remain compatible with both Vercel and Replit hosting environments.

Source text

react-nextjs-ui-development-cursorrules-prompt-fil.mdc · CC0-1.0
---
description: "Cursor rules for React development with Next.js UI integration."
globs: **/*
alwaysApply: false
---
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!

© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set210

react-styled-components-cursorrules-prompt-file A Cursor rule that tells the agent how to write React code with styled-components: functional components, theming through ThemeProvider, a fixed folder layout. ★ 41,024repo stars react-router-v7 Enforces React Router v7 conventions for route modules, deterministic loaders, action mutations, and typed routing in Cursor. ★ 41,024repo stars react-redux-typescript-cursorrules-prompt-file This Cursor rule guides React work with Redux and TypeScript, covering component style, state structure, and typed hooks. Use it in a matching project. ★ 41,024repo stars react-query-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Query code: where QueryClient lives, how hooks and query keys are named. ★ 41,024repo stars react-native-expo-router-typescript-windows-cursorrules-prompt-file This rule guides React Native projects using Expo, TypeScript, and Expo Router. It also covers NativeWind and Tailwind CSS versions, Babel configuration, and Windows terminal commands. ★ 41,024repo stars react-native-expo-cursorrules-prompt-file A Cursor rule that tells the agent how to write React Native code with Expo. Useful when you want new screens and components to follow one stack. ★ 41,024repo stars react-mobx-cursorrules-prompt-file Cursor rule for building React apps with MobX. It configures state stores, hook conventions, and strict MobX patterns for code generation. ★ 41,024repo stars react-graphql-apollo-client-cursorrules-prompt-file This rule guides React work with GraphQL and Apollo Client in Cursor. Use it when a project needs consistent patterns for operations, hooks, and error states. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor