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

React Native Expo Router — правило для Cursor: установка

Правило задаёт практики для React Native-проектов на Expo с TypeScript и Expo Router. Также оно содержит заметки о совместимости NativeWind с Tailwind CSS и работе в PowerShell.

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

Что делает react-native-expo-router-typescript-windows-cursorrules-prompt-file

Правило предлагает использовать функциональные компоненты с хуками, TypeScript, Expo Router для навигации и StyleSheet для стилей. Оно описывает структуру проекта с каталогами assets/, src/ и app/, а также рекомендует применять систему ресурсов Expo, SecureStore и офлайн-поддержку.

Отдельный блок посвящён связке NativeWind и Tailwind CSS: указаны версии [email protected] и [email protected], а также порядок Babel-плагинов. При ошибке process(css).then(cb) правило предлагает удалить пакеты и установить эти версии. Для команд в Windows оно рекомендует PowerShell и проверку пакета перед установкой; несовместимые версии здесь могут вызвать ошибку сборки.

Файл для Cursor размещается по пути .cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc. Правило охватывает все файлы проекта через **/*, но alwaysApply установлен в false.

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

  • организовать структуру Expo Router-проекта
  • выбрать версии NativeWind и Tailwind CSS
  • настроить Babel для NativeWind и Reanimated
  • проверить пакет перед установкой в Windows

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

  • Создай навигацию Expo Router и придерживайся структуры проекта из правила.
  • Проверь конфигурацию NativeWind и Babel на совместимость с react-native-reanimated/plugin.
  • Перед установкой пакета проверь, установлен ли он, используя PowerShell.

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

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

.cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc

Во frontmatter: description, globs, alwaysApply

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

Вопросы о react-native-expo-router-typescript-windows-cursorrules-prompt-file

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

Добавьте файл правила в .cursor/rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc.

Что делает react-native-expo-router-typescript-windows-cursorrules-prompt-file?

Правило задаёт рекомендации для React Native на Expo с TypeScript и Expo Router, включая структуру каталогов, настройку NativeWind и команды PowerShell.

Какие версии NativeWind и Tailwind CSS рекомендует правило?

В нём указана связка [email protected] и [email protected]. Также сказано добавить nativewind/babel в плагины Babel и разместить react-native-reanimated/plugin после него.

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

react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc · CC0-1.0
---
description: "Cursor rules for React Native Expo Router Typescript Windows."
globs: **/*
alwaysApply: false
---
// React Native Expo .cursorrules

// React Native Expo Best Practices

const reactNativeExpoBestPractices = [
  "Use functional components with hooks.",
  "Leverage Expo SDK features and APIs.",
  "Implement navigation using Expo Router.",
  "Manage assets with Expo's asset system for images and fonts.",
  "Ensure robust error handling and crash reporting.",
  "Utilize Expo's push notification system.",
  "Adopt TypeScript for type safety.",
  "Apply consistent styling using StyleSheet.",
  "Incorporate Expo's vector icons.",
  "Secure sensitive data with Expo's SecureStore.",
  "Implement proper offline support.",
  "Optimize performance following React Native best practices.",
  "Deploy updates using Expo's OTA mechanism.",
  "Style components using NativeWind.",
];

// Folder Structure

const folderStructure = `
assets/
src/
  components/
  screens/
  navigation/
  hooks/
  utils/
app/
  _layout.tsx
  index.tsx
App.js
app.json
`;

// Package Version Compatibility Notes

const packageCompatibilityNotes = [
  "NativeWind and Tailwind CSS compatibility:",
  "- Use [email protected] with [email protected].",
  "- Higher versions may cause 'process(css).then(cb)' errors.",
  "- If errors occur, remove both packages and reinstall specific versions:",
  "  npm remove nativewind tailwindcss",
  "  npm install [email protected] [email protected]",

  "Babel configuration for NativeWind:",
  "- Include 'nativewind/babel' in the plugins array.",
  "- Avoid using jsxImportSource in presets.",
  "- Ensure 'react-native-reanimated/plugin' follows 'nativewind/babel'."
];

// Additional Instructions

const additionalInstructions = [
  "Use PowerShell for terminal commands.",
  "Before installing a new package, check if it's already installed:",
  "  Get-ChildItem -Recurse -Filter package-name",
  "If installed, upgrade using:",
  "  expo upgrade <package-name>",
  "or",
  "  npm install <package-name>",
  "if not supported by Expo.",
  "Use PowerShell commands to manage the project, e.g., moving and renaming files:",
  "  Move-Item -Path .\\old\\path\\file.txt -Destination .\\new\\path\\newname.txt",
  "If unsure about the current structure or details, use PowerShell to list out necessary information:",
  "  Get-ChildItem -Recurse",
  "Utilize official Expo libraries and upgrade them using Expo's commands.",
  "Avoid deleting existing functionality or files without a valid reason.",
  "Follow the recommended folder structure and maintain organized code for scalability and readability.",
  "Implement navigation using Expo Router for clean and declarative routing."
];

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

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

Всё по теме «Мобильная разработка» →

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

react-router-v7 Задаёт стандарты React Router v7 для маршрутов, загрузчиков, мутаций и типизации в файлах TypeScript и конфигах проекта. ★ 41 024звёзд репо react-redux-typescript-cursorrules-prompt-file Правило задаёт стиль React-кода с Redux и TypeScript: функциональные компоненты, типизированные хуки и структуру проекта. Подключается к Cursor. ★ 41 024звёзд репо react-query-cursorrules-prompt-file Правило для Cursor, которое задаёт агенту соглашения по React Query: где держать QueryClient, как называть хуки и ключи запросов. ★ 41 024звёзд репо react-nextjs-ui-development-cursorrules-prompt-fil Правило настраивает Cursor на работу с Next.js App Router и JavaScript. Заставляет ИИ сначала писать подробный псевдокод и проверять совместимость с Vercel и Replit. ★ 41 024звёзд репо react-native-expo-cursorrules-prompt-file Правило для Cursor, которое задаёт агенту стек и структуру проекта на React Native с Expo. Пригодится, когда нужно, чтобы код в проекте писался единообразно. ★ 41 024звёзд репо react-mobx-cursorrules-prompt-file Набор инструкций для Cursor по разработке на React с MobX. Задаёт архитектуру сторов, соглашения по хукам и строгий режим MobX при генерации кода. ★ 41 024звёзд репо react-graphql-apollo-client-cursorrules-prompt-file Правило задаёт Cursor подход к React-разработке с GraphQL и Apollo Client. Оно пригодится для единого устройства запросов, мутаций и компонентов. ★ 41 024звёзд репо react-formengine-ai-form-builder-cursorrules-prompt-file Правило Cursor, по которому агент собирает React-формы из скриншота, PDF, HTML или описания и отдаёт схему FormEngine JSON плюс рабочий App.tsx. ★ 41 024звёзд репо

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

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