All databases

Cursor rule

Typescript React Cursorrules Prompt File

Cursor rules for TypeScript development with React integration.

Prefer functional components

js
const preferFunctionalComponents = true;

TypeScript React best practices

js
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

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

Additional instructions

js
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
`;

More Frontend rules

Frequently asked questions

What is the Typescript React Cursorrules Prompt File Cursor rule?

Cursor rules for TypeScript development with React integration. It is a Frontend rule, stored as typescript-react-cursorrules-prompt-file.mdc.

How do I use the Typescript React Cursorrules Prompt File rule in Cursor?

Copy the rule from this page and save it as typescript-react-cursorrules-prompt-file.mdc in your project's .cursor/rules folder, or paste it into Cursor's project rules settings.