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.
.cursor/rules/typescript-react-cursorrules-prompt-file.mdcWhat 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.lazyandSuspense - 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.mdcFrontmatter: description, globs, alwaysApply
Manually: put the files in place
.claude/rules/typescript-react-cursorrules-prompt-file.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/typescript-react-cursorrules-prompt-file.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/typescript-react-cursorrules-prompt-file.mdManually: put the files in place
.clinerules/typescript-react-cursorrules-prompt-file.mdStep 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