Skip to main content
rule

typescript-react-cursorrules-prompt-file — Cursor rule: setup guide

Cursor rule establishing standards for TypeScript and React codebases. It enforces functional components, strict typing, and a standard folder layout.

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

What typescript-react-cursorrules-prompt-file does

This rule guides Cursor when creating React components with TypeScript. It insists on functional components using React.FC alongside explicit TypeScript interfaces for props. State and effects stay inside useState and useEffect hooks. Reusable logic goes into custom hooks.

The instructions outline a project structure under src/, dividing code into components/, hooks/, pages/, types/, and utils/. JSX files must use the .tsx extension. Code splitting relies on React.lazy with Suspense, while error boundaries catch runtime rendering failures.

Because alwaysApply is set to false, Cursor does not attach these guidelines to every prompt blindly. The setup assumes your environment enforces TypeScript strict mode and runs ESLint with React plugins.

What it helps with

  • enforce functional React components with explicit prop interfaces
  • structure source files across designated folders under src/
  • split bundle chunks using React.lazy and Suspense
  • extract component logic into dedicated custom hooks

Example prompts for the agent

  • Create a new user profile card component using a TypeScript interface for props
  • Extract the API fetching logic from this page into a custom hook
  • Set up route-level code splitting using React.lazy and Suspense

How to install typescript-react-cursorrules-prompt-file

Manually: put the files in place

.cursor/rules/typescript-react-cursorrules-prompt-file.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 typescript-react-cursorrules-prompt-file

How to install typescript-react-cursorrules-prompt-file in Cursor?

Save the rule content into .cursor/rules/typescript-react-cursorrules-prompt-file.mdc in your project repository.

What does typescript-react-cursorrules-prompt-file do?

It defines conventions for React and TypeScript code, requiring functional components, typed interfaces, and a specific directory layout in src/.

Does Cursor apply this rule automatically to every prompt?

The frontmatter sets alwaysApply: false, so the editor only activates the rule when relevant files match the glob pattern.

Source text

typescript-react-cursorrules-prompt-file.mdc · CC0-1.0
---
description: "Cursor rules for TypeScript development with React integration."
globs: **/*
alwaysApply: false
---
// TypeScript React .cursorrules

// Prefer functional components

const preferFunctionalComponents = true;

// TypeScript React best practices

const typescriptReactBestPractices = [
  "Use React.FC for functional components with props",
  "Utilize useState and useEffect hooks for state and side effects",
  "Implement proper TypeScript interfaces for props and state",
  "Use React.memo for performance optimization when needed",
  "Implement custom hooks for reusable logic",
  "Utilize TypeScript's strict mode",
];

// Folder structure

const folderStructure = `
src/
  components/
  hooks/
  pages/
  types/
  utils/
  App.tsx
  index.tsx
`;

// Additional instructions

const additionalInstructions = `
1. Use .tsx extension for files with JSX
2. Implement strict TypeScript checks
3. Utilize React.lazy and Suspense for code-splitting
4. Use type inference where possible
5. Implement error boundaries for robust error handling
6. Follow React and TypeScript best practices and naming conventions
7. Use ESLint with TypeScript and React plugins for code quality
`;

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

Similar IDE rules

All IDE rules for Frontend and UI →

From the same set234

The whole set →
typescript-vite-tailwind-cursorrules-prompt-file A Cursor rule that pins down TypeScript code style for Vue projects built with Vite and styled with Tailwind. Useful when you want the agent's output to stay predictable. ★ 41,024repo stars typescript-shadcn-ui-nextjs-cursorrules-prompt-fil Sets TypeScript, React Server Component, and shadcn/ui coding standards for Next.js in Cursor. Helpful when building mobile-first interfaces with Tailwind CSS and Radix. ★ 41,024repo stars typescript-react-nextui-supabase-cursorrules-promp This rule gives an agent context for a TypeScript app built with React, NextUI, and Supabase. Use it when working on the UI, user dashboard, or authentication flows. ★ 41,024repo stars typescript-react-nextjs-cloudflare-cursorrules-pro A Cursor rule that points the agent at TypeScript, Next.js App Router, React and Cloudflare tooling. Useful when your project already runs on that stack. ★ 41,024repo stars typescript-nodejs-react-vite-cursorrules-prompt-fi This rule sets TypeScript conventions for Node.js, React, and Vite projects, with guidance for TanStack Query, TanStack Router, and Tailwind. Use it to keep agent edits aligned with your codebase’s existing style. ★ 41,024repo stars typescript-nodejs-nextjs-react-ui-css-cursorrules- A Cursor rule that pins down how the agent writes TypeScript, Next.js App Router, React and Tailwind code. Useful when generated components drift from your conventions. ★ 41,024repo stars typescript-nodejs-nextjs-app-cursorrules-prompt-fi Configures Cursor for Next.js App Router, TypeScript, Tailwind, and Shadcn UI. It enforces React Server Components and keeps client-side state minimal. ★ 41,024repo stars typescript-nodejs-nextjs-ai-cursorrules-prompt-fil This rule steers Cursor toward concrete code or direct explanations for TypeScript, Node.js, and Next.js projects with AI integration. ★ 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