Skip to main content
rule

nextjs-tailwind-typescript-apps-cursorrules-prompt — Cursor rule

A Cursor rule that points the assistant at Next.js, Tailwind CSS and TypeScript. It sets the working order: plan in pseudocode first, code after.

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

What nextjs-tailwind-typescript-apps-cursorrules-prompt does

The file describes the assistant's role: produce clear, readable Next.js, Tailwind and TypeScript code, staying current with those tools. Supabase and building RAG apps with Langchain get a mention too.

Then come the process rules. Think step by step, write the plan out in pseudocode in detail, confirm it, and only then write the code. No TODOs, no placeholders, no missing pieces — and reference filenames in the answer. Prose stays short.

There is an honesty clause as well. If there may be no correct answer, the assistant should say so instead of guessing. Styling goes through Tailwind, with colors picked for light and dark mode.

The rule is scoped with globs **/*, so it covers any file in the project. alwaysApply is set to false.

What it helps with

  • make the assistant plan before it writes code
  • get readable Next.js and TypeScript instead of terse output
  • keep placeholders and open TODOs out of answers
  • steer the stack toward Tailwind, Supabase and Langchain

Example prompts for the agent

  • Write the plan in pseudocode, confirm it, then build the page
  • Build a form with Next.js and Tailwind, colors for light and dark mode
  • If there is no correct answer, say so instead of guessing

How to install nextjs-tailwind-typescript-apps-cursorrules-prompt

Manually: put the files in place

.cursor/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.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 nextjs-tailwind-typescript-apps-cursorrules-prompt

How do I install nextjs-tailwind-typescript-apps-cursorrules-prompt in Cursor?

Create .cursor/rules/nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc in your project and paste the rule text into it.

What does this rule do?

It points the Cursor assistant at Next.js, Tailwind CSS and TypeScript: plan in pseudocode first, then code with filenames and no placeholders.

Which files does the rule apply to?

Globs are set to **/*, so it covers any file in the project. Auto-apply is off: alwaysApply is false.

Source text

nextjs-tailwind-typescript-apps-cursorrules-prompt.mdc · CC0-1.0
---
description: "Cursor rules for Next.js development with Tailwind CSS and TypeScript integration."
globs: **/*
alwaysApply: false
---
You are an expert programming assistant that primarily focus on producing clear, readable Next.JS + Tailwind + Typescript code.

You always use latest version of Next.JS, and you are familiar with the latest features and best practices of Next.JS, TypeScript and Tailwind.

You are familiar with latest features of supabase and how to integrate with Next.js application.

For styling, you use Tailwind CSS. Use appropriate and most used colors for light and dark mode.

You are familiar with create RAG applications using Langchain and are aware of its latest features.

You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning.

- Follow 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 the code!
- Always write correct, up to date, bug free, fully functional and working, secure, performant and efficient code.
- Focus on readability over performant.
- Fully implement all requested functionality.
- Leave NO Todo's, placeholders and missing pieces.
- Be sure to reference filenames.
- Be concise. Minimize any other prose.
- If you think there might not be a correct answer, you say so. If you don't know the answer, say so instead of guessing.

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

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set68

plasticode-telegram-api-cursorrules-prompt-file A Cursor rule that points the assistant at PHP 7.4, Plasticode and the Telegram Bot API. Useful when your bot is built on Plasticode and you want PSR-12 code. ★ 41,011repo stars nextjs15-supabase-cursorrules-prompt-file A Cursor rule that keeps the agent inside a Next.js 15, Supabase and TypeScript strict stack — from session checks to RLS and Stripe keys. ★ 41,011repo stars nextjs-vercel-typescript-cursorrules-prompt-file A Cursor rule that sets code style and file structure for Next.js projects with TypeScript, Vercel middleware and a KV database. ★ 41,011repo stars nextjs-typescript-cursorrules-prompt-file A Cursor rule that pins the Next.js and TypeScript stack and the agent's working order: plan first, one file at a time, fixed reply format. ★ 41,011repo 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,011repo 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,011repo 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,011repo stars nativescript-cursorrules-prompt-file A Cursor rule that tells the agent how to structure a NativeScript project and which libraries to reach for. ★ 41,011repo 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