К основному содержанию
правило

typescript-react-cursorrules-prompt-file — правило для Cursor

Набор инструкций для Cursor, задающий стандарты написания функциональных компонентов на React и TypeScript. Помогает держать строгую типизацию и единую структуру папок в src/.

Установить в Cursor · Вручную: положить файлы Все способы и платформы ↓
.cursor/rules/typescript-react-cursorrules-prompt-file.mdc
Открыть на GitHub

Что делает typescript-react-cursorrules-prompt-file

Правило настраивает генерацию кода под React с TypeScript. Оно обязывает Cursor писать только функциональные компоненты, типизировать пропсы через интерфейсы и использовать React.FC. Для состояния и побочных эффектов агент применяет хуки useState и useEffect. Если логику можно переиспользовать, создаются кастомные хуки.

Инструкции фиксируют структуру каталогов внутри src/: папки components/, hooks/, pages/, types/ и utils/. Все файлы с разметкой JSX получают расширение .tsx. Код дробится с помощью React.lazy и Suspense, а для перехвата сбоев внедряются предохранители (error boundaries).

В правиле выставлен параметр alwaysApply: false. Поэтому Cursor не подмешивает инструкции к каждому запросу подряд без совпадения контекста. Проект потребует включённого строгого режима TypeScript и линтера ESLint с плагинами для React.

Какие задачи решает

  • организовать структуру каталогов проекта внутри src/
  • типизировать пропсы компонентов через интерфейсы TypeScript
  • настроить разделение кода через React.lazy и Suspense
  • вынести повторяющуюся логику компонентов в кастомные хуки

Примеры запросов агенту

  • Создай компонент карточки товара с пропсами через интерфейс в src/components
  • Вынеси логику запроса данных из страницы в кастомный хук
  • Добавь ленивую загрузку для страницы профиля с помощью React.lazy и Suspense

Как установить typescript-react-cursorrules-prompt-file

Вручную: положить файлы

.cursor/rules/typescript-react-cursorrules-prompt-file.mdc

Во frontmatter: description, globs, alwaysApply

По шагам, с командами для каждой платформы: Cursor rules: файлы .mdc, четыре режима и замена .cursorrules

Вопросы о typescript-react-cursorrules-prompt-file

Как установить typescript-react-cursorrules-prompt-file в Cursor?

Сохраните файл по пути .cursor/rules/typescript-react-cursorrules-prompt-file.mdc в корне вашего проекта.

Что делает правило typescript-react-cursorrules-prompt-file?

Оно задаёт требования к коду: функциональные компоненты, типизацию через React.FC и интерфейсы, а также распределение файлов по папкам components, hooks, pages и utils.

Всегда ли правило активно при диалоге с Cursor?

Параметр alwaysApply: false отключает автоматическое прикрепление файла ко всем запросам подряд.

Исходный текст

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

Похожие правила IDE

Все правила IDE по теме «Фронтенд и UI» →
winui3 официальный github Правило задаёт рекомендации для WinUI 3 и Windows App SDK: от XAML и потоков до окон и MVVM. Пригодится, чтобы Copilot учитывал особенности настольных приложений Windows. ★ 40 451звёзд репо vue официальный github Правило задаёт Copilot стандарты Vue 3: Composition API, <script setup>, реактивность, Pinia и Vue Router. Пригодится, когда агент пишет компоненты в вашем стиле. ★ 40 451звёзд репо tanstack-start-shadcn-tailwind официальный github Правило задаёт Copilot стек TanStack Start, Shadcn/ui и Tailwind CSS и требует валидировать внешние данные через Zod. ★ 40 451звёзд репо tailwind-v4-vite официальный github Правило помогает подключить Tailwind CSS v4 к проекту на Vite через официальный плагин. Пригодится и для новой установки, и при переходе с v3. ★ 40 451звёзд репо svelte официальный github Направляет GitHub Copilot на стандарты Svelte 5 и SvelteKit 2: руны вместо старых сторов, типизация компонентов и безопасная работа с SSR. ★ 40 451звёзд репо power-bi-custom-visuals-development официальный github Правило для GitHub Copilot, которое подсказывает агенту, как писать кастомные визуалы Power BI на React, D3.js и TypeScript. ★ 40 451звёзд репо

Из того же набора234

Весь набор →
typescript-vite-tailwind-cursorrules-prompt-file Правило для Cursor задаёт стиль кода на TypeScript во Vue-проектах со сборкой Vite и стилями Tailwind. Пригодится, когда агент пишет компоненты и вам нужен предсказуемый результат. ★ 41 024звёзд репо typescript-shadcn-ui-nextjs-cursorrules-prompt-fil Задаёт стандарты TypeScript, React Server Components и shadcn/ui для Next.js в Cursor. Пригодится при сборке интерфейсов на Tailwind и Radix. ★ 41 024звёзд репо typescript-react-nextui-supabase-cursorrules-promp Правило задаёт контекст проекта на TypeScript, React и NextUI с Supabase. Оно пригодится, чтобы агент учитывал структуру интерфейса и потоки авторизации. ★ 41 024звёзд репо typescript-react-nextjs-cloudflare-cursorrules-pro Правило для Cursor, которое настраивает агента на TypeScript, Next.js App Router, React и инструменты Cloudflare. Пригодится, если проект живёт на этом стеке. ★ 41 024звёзд репо typescript-nodejs-react-vite-cursorrules-prompt-fi Правило задаёт стиль TypeScript-кода для Node.js, React и Vite, включая работу с TanStack Query, TanStack Router и Tailwind. Оно пригодится, если хотите сохранить единые договорённости при правках проекта. ★ 41 024звёзд репо typescript-nodejs-nextjs-react-ui-css-cursorrules- Правило для Cursor задаёт стиль кода на TypeScript, Next.js App Router, React и Tailwind. Пригодится, если агент пишет компоненты иначе, чем вы привыкли. ★ 41 024звёзд репо typescript-nodejs-nextjs-app-cursorrules-prompt-fi Задаёт стандарты стека Next.js App Router, TypeScript, Tailwind и Shadcn UI для Cursor. Помогает писать серверные компоненты без лишнего клиентского состояния. ★ 41 024звёзд репо typescript-nodejs-nextjs-ai-cursorrules-prompt-fil Правило просит Cursor отвечать по запросу конкретным кодом или объяснением. Подойдёт для проектов на TypeScript, Node.js и Next.js с интеграцией ИИ. ★ 41 024звёзд репо

Спонсоры проекта

Компании, которые помогают держать аналитику открытой