typescript-react-cursorrules-prompt-file — правило для Cursor
Набор инструкций для Cursor, задающий стандарты написания функциональных компонентов на React и TypeScript. Помогает держать строгую типизацию и единую структуру папок в src/.
.cursor/rules/typescript-react-cursorrules-prompt-file.mdcЧто делает 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
Вручную: положить файлы
.claude/rules/typescript-react-cursorrules-prompt-file.mdПоле paths во frontmatter ограничивает файлы: globs из источника → paths
AGENTS.md
Codex читает AGENTS.md: вставьте текст правила туда
Вручную: положить файлы
.github/instructions/typescript-react-cursorrules-prompt-file.instructions.mdПоле applyTo задаёт, к каким файлам применять: globs из источника → applyTo
Вручную: положить файлы
.devin/rules/typescript-react-cursorrules-prompt-file.mdВручную: положить файлы
.clinerules/typescript-react-cursorrules-prompt-file.mdПо шагам, с командами для каждой платформы: 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