Skip to main content

rule

nextjs-material-ui-tailwind-css-cursorrules-prompt — Cursor rule

A Cursor rule for Next.js projects using TypeScript, Tailwind CSS, Material UI, and App Router. It fits projects built around this stack.

Install into Cursor · Manually: put the files in place All methods and platforms ↓

.cursor/rules/nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc

What nextjs-material-ui-tailwind-css-cursorrules-prompt does

This rule describes a Next.js project with TypeScript, Tailwind CSS, Material UI, shadcn/ui, and Aceternity UI. It sets the use of src/, App Router, and the @/ import alias. Its file pattern is **/*, while automatic application is disabled.

The rule also records project dependencies such as @mui/material, @mui/icons-material, @emotion/react, @emotion/styled, framer-motion, next-auth, prisma, @prisma/client, and ckeditor5. The listed versions include Tailwind CSS 3.4.3 and Next.js 14.2.3.

ESLint is set to No in the project choices, so this rule does not establish an ESLint workflow. Put the file in Cursor’s rules directory, then ask the agent to work within this stack.

What it helps with

set up a Next.js project stack
combine Tailwind CSS with Material UI
use src/ with App Router
record Prisma and NextAuth dependencies
keep the @/ import alias

Example prompts for the agent

Create a page under src/ with App Router, using Tailwind CSS and Material UI components.
Add a TypeScript form with @mui/material and @emotion/react to the current project.
Check that this component fits Tailwind CSS, shadcn/ui, and the @/ import alias.

How to install nextjs-material-ui-tailwind-css-cursorrules-prompt

Manually: put the files in place

.cursor/rules/nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc

Frontmatter: description, globs, alwaysApply

Manually: put the files in place

.claude/rules/nextjs-material-ui-tailwind-css-cursorrules-prompt.md

The paths frontmatter field limits the files: move globs from the source into paths

Manually: put the files in place

.github/instructions/nextjs-material-ui-tailwind-css-cursorrules-prompt.instructions.md

The applyTo field sets which files it applies to: move globs from the source into applyTo

Manually: put the files in place

.devin/rules/nextjs-material-ui-tailwind-css-cursorrules-prompt.md

Manually: put the files in place

.clinerules/nextjs-material-ui-tailwind-css-cursorrules-prompt.md

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

Questions about nextjs-material-ui-tailwind-css-cursorrules-prompt

How do I install nextjs-material-ui-tailwind-css-cursorrules-prompt in Cursor?

Place the rule file at .cursor/rules/nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc.

What does nextjs-material-ui-tailwind-css-cursorrules-prompt do?

It guides work on a Next.js project using TypeScript, Tailwind CSS, Material UI, shadcn/ui, and Aceternity UI. It also records the src/ directory, App Router, and @/ alias.

Which project settings does this rule describe?

It specifies Tailwind CSS, src/, App Router, and TypeScript. ESLint is set to No, and the rule is not applied automatically.

Source text

nextjs-material-ui-tailwind-css-cursorrules-prompt.mdc · CC0-1.0

---
description: "Cursor rules for Next.js development with Material UI and Tailwind CSS integration."
globs: **/*
alwaysApply: false
---
Ce projet s'appel Portfolio2

Il est basé sur Next.Js, il a tailwindcss, materialui, shadcn/ui et aceternityui

What is your project named? portfolio2

Would you like to use TypeScript? Yes

Would you like to use ESLint? No

Would you like to use Tailwind CSS? Yes

Would you like to use `src/` directory? Yes

Would you like to use App Router? (recommended) Yes

Would you like to customize the default import alias (@/)? No

What import alias would you like configured? @/

Nola liste des dépendance

"dependencies": {
  "@ckeditor/ckeditor5-react": "^6.3.0",
  "@emotion/react": "^11.11.4",
  "@emotion/styled": "^11.11.5",
  "@mui/icons-material": "^5.15.18",
  "@mui/material": "^5.15.18",
  "@mui/styled-engine-sc": "^6.0.0-alpha.18",
  "@prisma/client": "^5.14.0",
  "autoprefixer": "^10.4.19",
  "bcryptjs": "^2.4.3",
  "ckeditor5": "^41.4.2",
  "clsx": "^2.1.1",
  "framer-motion": "^11.2.5",
  "init": "^0.1.2",
  "next": "^14.2.3",
  "next-auth": "^4.24.7",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",
  "shadcn-ui": "^0.8.0",
  "styled-components": "^6.1.11",
  "tailwind-merge": "^2.3.0"
},

"devDependencies": {
  "@types/bcryptjs": "^2.4.6",
  "@types/node": "^20",
  "@types/react": "^18",
  "@types/react-dom": "^18",
  "postcss": "^8.4.38",
  "prisma": "^5.14.0",
  "tailwindcss": "^3.4.3",
  "typescript": "^5.4.5"
}

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

Similar IDE rules

All IDE rules for Frontend and UI →

material-ui-tailwind mui This skill explains how to combine Material UI with Tailwind CSS, handle CSS layer order, pass utility classes to components, and work with Tailwind v3. CX Codex +1 365installs material-ui-nextjs mui A skill for wiring Material UI into Next.js: SSR, Emotion cache, next/font, CSS layers, Link, and useSearchParams. Use it when setting up or debugging MUI in a Next.js app. CX Codex +1 727installs tailwind-css PaulRBerg Guides coding agents on Tailwind CSS styling, v4 migrations, and class updates while enforcing real build checks and DOM inspection. CX Codex +1 3,000installs nextjs-tailwind official github This rule guides GitHub Copilot on Next.js, TypeScript, and Tailwind CSS projects. Use it when asking for changes to routes, components, data handling, or styling. ★ 40,451repo stars tailwind-design-system giuseppe-trisciuoglio Creates and orchestrates a design system using Tailwind CSS v4.1+ and shadcn/ui. It defines oklch design tokens, themes via CSS variables, and wraps UI primitives. CX Codex +1 4,500installs tailwind-css-patterns giuseppe-trisciuoglio A skill that hands your agent ready Tailwind CSS patterns: responsive grids, cards, forms, dark mode. Useful when it styles React, Vue or Svelte components. CX Codex +1 17,700installs

From the same set210

nextjs-supabase-shadcn-pwa-cursorrules-prompt-file Defines Next.js 15+, Supabase, and Shadcn UI conventions for Cursor. It caps files at 150 lines and enforces task logging in project docs. ★ 41,024repo stars nextjs-seo-dev-cursorrules-prompt-file A Cursor rule for Next.js work with SEO context, comment-preservation guidance, and a fixed project setup. ★ 41,024repo stars nextjs-react-typescript-cursorrules-prompt-file A Cursor rule that tells the agent how to write code in Next.js 14 App Router, React and TypeScript projects. ★ 41,024repo stars nextjs-react-tailwind-cursorrules-prompt-file Sets coding instructions for Next.js App Router, React, Tailwind CSS, and Shadcn UI. Enforces React Server Components and a clean file layout in Cursor. ★ 41,024repo stars nextjs-app-router-cursorrules-prompt-file A Cursor rule that hands the agent a set of Next.js App Router habits: server components by default, file-based routing, separate files for loading and errors. ★ 41,024repo stars next-type-llm Cursor rule for Next.js, shadcn/ui, and a Python LLM backend. Enforces strict response scaffolding and verbosity control flags. ★ 41,024repo stars network-troubleshoot A safety-focused rule guides Cursor through network failures, from collecting the error to verifying the result. ★ 41,024repo stars netlify-official-cursorrules-prompt-file A Cursor rule that hands the agent Netlify's official conventions: function types, environment access, and no stray CORS headers. ★ 41,024repo stars

Project sponsors

Companies that keep this analytics open

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