Cursor React 编码规范

Cursor React 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 rea，适用于各类文档与内容的智能化处理。

Skill Documentation

Cursor React 编码规范

摘要

Cursor React 编码规范：来自 PatrickJS/awesome-cursorrules (40k stars) 的 rea，适用于各类文档与内容的智能化处理。

**文件来源:** PatrickJS/awesome-cursorrules → `rules/react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc`

**原仓库:** https://github.com/PatrickJS/awesome-cursorrules

**评分:** ⭐ 仓库 40k stars (社区最权威 Cursor rules 合集)

这个 skill 是干什么的?

把 `react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc` 这条 Cursor 编码规则打包成可调用的 AI skill,帮你把代码生成统一到一致的标准上。

> Cursor rules for React Native Expo Router Typescript Windows.

🤖 Agent 使用说明

• **输入:** 一段要生成/重构的代码需求
• **输出:** 严格遵守 `react-native-expo-router-typescript-windows-cursorrules-prompt-file.mdc` 规则的代码
• **触发:** 用户说"用 X 规范写代码" / "按 react 风格生成" / "用 PatrickJS 的 X 规则"

👤 用户需要做什么?

• [ ] 知道这条规则适合用在什么场景(参考下面"适用场景")
• [ ] 把规则原文内容应用到 IDE 项目的 `.cursor/rules/` 目录(直接复制 .mdc 文件)
• [ ] 调本 skill 时说清楚你的代码任务(语言/框架/目标)
• [ ] 输出后人工 review 风格是否符合预期

适用场景

• 想用统一规范生成 `react` 项目代码
• 团队需要把 AI 代码生成收敛到固定风格
• 学习业界最佳实践的工程化模板

原始规则内容

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 nativewind@2.0.11 with tailwindcss@3.3.2.",
  "- 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 nativewind@2.0.11 tailwindcss@3.3.2",

  "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/awesome-cursorrules (40,581 stars, 257 个 .mdc 规则)
• 抓取时间: 2026-08-17
• License: 跟随原仓库(MIT)

联系方式

有问题或建议,在本 skill 下留言。