cursor-ai-react-typescript-shadcn-ui-cursorrules-p — Cursor rule
A Cursor rule that pushes the agent toward React and TypeScript code written the way shadcn/ui and Tailwind CSS projects expect.
.cursor/rules/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.mdcWhat cursor-ai-react-typescript-shadcn-ui-cursorrules-p does
The file sets the assistant's role: it produces React and TypeScript, and leans on current stable versions of TypeScript, JavaScript, React, Node.js, Next.js App Router, Shadcn UI and Tailwind CSS. Sections inside cover style and structure, naming conventions, TypeScript usage, UI and styling, and performance. One line is blunt — the agent should not be lazy and must write all the code a feature needs.
It lives in .cursor/rules/ and does not apply everywhere by itself: the frontmatter carries alwaysApply: false, so you attach it by hand or through globs. On a React project with shadcn/ui that cuts down on cleanup after the agent. On a different stack there is little here for you.
What it helps with
- keep the agent's React and TypeScript style consistent
- get a feature written end to end instead of stubbed out
- hold file naming and structure to one shape
- pull in current Next.js App Router and Tailwind CSS practice
- line up work with shadcn/ui components
Example prompts for the agent
- Add a settings page on the Next.js App Router, use shadcn/ui components
- Refactor this component to TypeScript without any
- Build a validated form with Tailwind, leave the markup alone
How to install cursor-ai-react-typescript-shadcn-ui-cursorrules-p
Manually: put the files in place
.cursor/rules/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.mdThe paths frontmatter field limits the files: move globs from the source into paths
AGENTS.md
Codex reads AGENTS.md: paste the rule text there
Manually: put the files in place
.github/instructions/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.instructions.mdThe applyTo field sets which files it applies to: move globs from the source into applyTo
Manually: put the files in place
.devin/rules/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.mdManually: put the files in place
.clinerules/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.mdStep by step, with commands for each platform: Cursor rules: .mdc files, four modes and what replaced .cursorrules
Questions about cursor-ai-react-typescript-shadcn-ui-cursorrules-p
How do I install cursor-ai-react-typescript-shadcn-ui-cursorrules-p in Cursor?
Create .cursor/rules/cursor-ai-react-typescript-shadcn-ui-cursorrules-p.mdc at the project root and paste the rule contents into it.
What does this rule do?
It gives the Cursor agent a React and TypeScript role and requires it to write all the code for the feature you asked for rather than leaving stubs.
Does the rule apply to every file?
No. The frontmatter sets alwaysApply: false, so you attach it manually or through globs.
Source text
cursor-ai-react-typescript-shadcn-ui-cursorrules-p.mdc · CC0-1.0
--- description: "Cursor rules for Cursor AI development with React, TypeScript, and shadcn/ui integration." globs: **/* alwaysApply: false --- You are an expert AI programming assistant that primarily focuses on producing clear, readable React and TypeScript code. You always use the latest stable version of TypeScript, JavaScript, React, Node.js, Next.js App Router, Shadcn UI, Tailwind CSS and you are familiar with the latest features and best practices. You carefully provide accurate, factual, thoughtful answers, and are a genius at reasoning AI to chat, to generate code. Style and Structure Naming Conventions TypeScript Usage UI and Styling Performance Optimization Other Rules need to follow: Don't be lazy, write all the code to implement features I ask for.
© PatrickJS · CC0-1.0 · PatrickJS/awesome-cursorrules
