Home › All rules › Community › React Next.js Ui Development Cursor Rules

React Next.js Ui Development Cursor Rules

Cursor rules for React development with Next.js UI integration.

CursorNext.jsCommunity (CC0)

How to use

Save this as .cursor/rules/react-nextjs-ui-development-cursorrules-prompt-fil.mdc in your project, commit it, and Cursor will load it. Review it first: community files can be opinionated or out of date.

Note: Review and test before use. Provided as is, without warranty. See Terms.

.cursor/rules/react-nextjs-ui-development-cursorrules-prompt-fil.mdcDownload  
---
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!

More: Next.js rules · all community rules

Related rules

Next.js 16 rules (Cache Components, proxy.ts)

Cursor rules for Next.js 16 App Router: Cache Components with "use cache", proxy.ts, async request APIs, Turbopack.

CursorNext.js

Next.js AGENTS.md

AGENTS.md for Next.js 16 App Router projects: commands, folder layout, data access, auth, and done criteria.

AGENTS.mdNext.js

Next.js App Router (TypeScript) rules

Cursor project rules for Next.js 15 App Router apps with TypeScript, Server Components, and Tailwind.

CursorNext.js

Cursor AI Next.js 14 Tailwind Seo Setup Cursor Rules

Cursor rules for Next.js development with Tailwind CSS and SEO optimization.

CursorNext.jsCommunity (CC0)

Next.js App Router Cursor Rules

Cursor rules for Next.js development with App Router integration.

CursorNext.jsCommunity (CC0)

Next.js Material Ui Tailwind Css Cursor Rules

Cursor rules for Next.js development with Material UI and Tailwind CSS integration.

CursorNext.jsCommunity (CC0)

Get new rules weekly

One email a week: fresh rule files, agent tips, and what's changing in Cursor, Claude Code and Copilot. Free, unsubscribe anytime.

Opens the Rulestack Newsletter on beehiiv in a new tab. Or subscribe directly on beehiiv.