一、Cursor 2.6.21 基础认知与准备

1.1 版本确认与功能说明

你当前使用的 Cursor Version: 2.6.21 是2026年3月最新稳定版，Skills（Agent技能）、知识库（Docs/Knowledge Base） 均已正式上线，无需切换Nightly渠道，稳定可用。

  • Skills：自定义AI执行指令集，可固化RN开发规范、组件生成、打包发布等流程，一键触发
  • 知识库：导入RN官方文档、项目文档、设计规范等，让AI基于精准资料生成代码、解答问题
  • 适用场景：React Native（iOS/Android）开发、TypeScript/JavaScript编写、组件封装、接口联调、打包优化

1.2 快捷键与入口速查（Mac/Windows通用）

  • 打开设置：Cmd+, (Mac) / Ctrl+, (Windows)
  • 打开AI聊天：Cmd+L (Mac) / Ctrl+L (Windows)
  • 打开Composer：Cmd+I (Mac) / Ctrl+I (Windows)
  • 打开Rules/Skills：Cmd+Shift+J (Mac) / Ctrl+Shift+J (Windows)

二、Skills 功能完整配置教程（前端/RN 专属）

2.1 Skills 核心原理

Skills 是 Cursor 的可复用AI指令模板，以 SKILL.md 文件存储，支持自动触发、手动调用、跨项目复用。

  • 加载路径：
    • 项目级：你的RN项目/.cursor/skills/
    • 全局级：~/.cursor/skills/（Mac）/ C:\Users\用户名\.cursor\skills\（Windows）
  • 调用方式：@技能名（手动）、关键词自动触发、/技能名（斜杠命令）

2.2 方法1：快速创建自定义 Skills（Chat 命令）

步骤1：打开AI聊天窗口
按 Cmd+L / Ctrl+L 唤起聊天框，输入命令：

/create-skill

步骤2：按引导配置技能
Cursor 会自动引导你填写：

  1. 技能名称：如 RN-组件生成、RN-打包发布、TS-类型规范
  2. 触发关键词：如 RN组件、RN打包（AI 识别关键词自动触发）
  3. 技能描述：清晰说明用途（如"生成符合团队规范的React Native函数式组件，支持Props类型定义"）
  4. 核心指令（Instructions）：编写详细执行规则（RN 开发专属模板见下文）

步骤3：保存并验证
完成后自动保存到 .cursor/skills/对应技能名/ 目录，可直接在聊天中用 @技能名 调用。

2.3 方法2：手动创建 Skills（精准控制，推荐）

步骤1：创建 Skills 目录结构
在 RN 项目根目录执行（终端）：

# Mac/Linux
mkdir -p .cursor/skills/rn-component-generator
touch .cursor/skills/rn-component-generator/SKILL.md

# Windows（PowerShell）
New-Item -ItemType Directory -Path .cursor\skills\rn-component-generator
New-Item -ItemType File -Path .cursor\skills\rn-component-generator\SKILL.md

步骤2：编写 SKILL.md（RN 组件生成模板，直接复制）

# RN-函数式组件生成器
description: 生成React Native 0.72+ 函数式组件，遵循TypeScript、Hooks规范，支持Props类型、样式分离、注释规范
trigger: RN组件, 生成RN组件, React Native组件
## Instructions
1. 必须使用 **函数式组件 + Hooks**，禁止Class组件
2. 必须用 **TypeScript** 编写，定义完整Props接口（interface IXXProps）
3. 样式使用 **StyleSheet.create**，分离到组件底部
4. 组件必须包含 **JSDoc注释**（功能、Props说明）
5. 支持常用RN组件：View、Text、Image、TouchableOpacity、ScrollView、TextInput
6. 引入必要依赖：react, react-native, 常用hooks（useState, useEffect, useCallback）
7. 命名规范：组件大驼峰（UserList）、文件小驼峰（userList.tsx）、样式对象styles
8. 必须添加默认导出（export default）
## 示例输出
```tsx
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

/**
 * 用户列表组件
 * @param {IUserListProps} props - 组件参数
 */
interface IUserListProps {
  /** 用户列表数据 */
  userList: Array<{ id: string; name: string; age: number }>;
  /** 点击项回调 */
  onItemPress?: (id: string) => void;
}

const UserList: React.FC<IUserListProps> = ({ userList, onItemPress }) => {
  const [selectedId, setSelectedId] = useState<string>('');

  return (
    <View style={styles.container}>
      {userList.map(item => (
        <TouchableOpacity
          key={item.id}
          style={[styles.item, selectedId === item.id && styles.itemActive]}
          onPress={() => {
            setSelectedId(item.id);
            onItemPress?.(item.id);
          }}
        >
          <Text style={styles.itemName}>{item.name}</Text>
          <Text style={styles.itemAge}>{item.age}岁</Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 16 },
  item: { padding: 12, marginBottom: 8, backgroundColor: '#fff', borderRadius: 8 },
  itemActive: { backgroundColor: '#f0f8ff' },
  itemName: { fontSize: 16, fontWeight: '500' },
  itemAge: { fontSize: 14, color: '#666', marginTop: 4 }
});

export default UserList;



**步骤3：更多RN实用Skills模板（直接复用）**
1. **RN-接口请求封装**
```markdown
# RN-接口请求封装
description: 生成基于Axios/fetch的RN接口请求工具，支持拦截器、错误处理、Token验证
trigger: RN接口, 接口封装, 请求工具
## Instructions
1. 支持Axios（优先）或fetch
2. 包含请求/响应拦截器、Token自动携带、错误统一处理
3. 支持GET/POST/PUT/DELETE方法
4. 类型定义完整，返回值泛型支持
5. 适配RN环境，处理网络异常、超时
  1. RN-打包发布
# RN-打包发布
description: 执行RN iOS/Android打包、签名、上传流程
trigger: RN打包, 发布RN, iOS打包, Android打包
## Instructions
1. Android：执行./gradlew assembleRelease，检查签名配置，生成APK/AAB
2. iOS：执行pod install，xcodebuild打包，检查证书/描述文件
3. 自动校验依赖版本、环境变量、配置文件
4. 输出打包日志、错误提示、产物路径

2.4 方法3：导入社区Skills（快速扩充）

步骤1：打开Rules设置
Cmd+Shift+J / Ctrl+Shift+J → 选择 Rules 选项卡 → 找到 Project Rules

步骤2：添加远程Skills仓库
点击 Add Rule → 选择 Remote Rule (GitHub) → 输入仓库地址：

  • 官方技能库：https://github.com/anthropics/skills
  • RN/前端专属：https://github.com/cursor-ide/frontend-skills、https://github.com/huang3037/rn-cursor-skills
  • 通用技能：https://github.com/eastlondoner/cursor-tools

步骤3：等待加载并使用
加载完成后，在聊天中输入 @ 即可看到所有导入的Skills。

2.5 Skills 使用技巧（RN 开发必备）

  1. 自动触发：聊天中输入"帮我生成RN用户列表组件"，AI 自动匹配 RN-组件生成器 Skill
  2. 手动调用：@RN-组件生成器 生成商品详情组件，包含图片、价格、加入购物车按钮
  3. Composer 中使用：Cmd+I / Ctrl+I 打开Composer，输入需求，Skills 自动参与多文件生成
  4. 全局复用：将常用Skills放到 ~/.cursor/skills/，所有项目共享

三、知识库（Knowledge Base）完整配置教程（RN 专属）

3.1 知识库核心价值（RN 开发）

  • 导入 RN官方文档、TypeScript手册、团队设计规范、项目API文档，AI 基于精准资料生成代码
  • 解决RN版本差异、API废弃、组件属性混淆等问题，避免AI输出过时/错误代码
  • 支持本地文件、文件夹、网站URL、Obsidian笔记等多种导入方式

3.2 方法1：导入本地文档（项目文档/规范）

步骤1：打开知识库设置
Cmd+, / Ctrl+, → 搜索 “知识库” / “Knowledge Base” → 进入 AI → 知识库

步骤2：添加本地文件/文件夹
点击 “+ Add docs” → 选择 Local folder or files：

  • 推荐导入：RN项目 docs/ 目录、团队规范文档、API接口文档、组件库说明
  • 支持格式：.md、.txt、.pdf、.docx（优先Markdown，解析更精准）
  • 勾选 Include subfolders（包含子文件夹）→ 点击 Add

步骤3：等待索引完成
小文件秒级完成，大型文档（>100MB）等待1-5分钟，索引后AI可直接引用内容。

3.3 方法2：导入在线网站（RN官方文档）

步骤1：选择网站导入
知识库设置 → “+ Add docs” → 选择 Website

步骤2：输入RN相关URL（推荐列表）

  • React Native 官方文档：https://reactnative.dev/docs
  • React Native 中文网：https://reactnative.cn/docs
  • TypeScript 中文手册：https://www.tslang.cn/docs/
  • React Hooks 文档：https://react.dev/reference/react
  • Expo 文档（RN常用）：https://docs.expo.dev/

步骤3：配置爬取参数

  • 爬取深度：2-3级（避免过深冗余）
  • 允许域：仅当前域名（防止爬取外部无关内容）
  • 点击 Add，等待自动爬取索引

3.4 方法3：导入Obsidian笔记（个人知识体系）

步骤1：获取Obsidian Vault路径
Obsidian → 设置 → About → 复制 Vault location 路径

步骤2：添加到Cursor知识库
Cursor知识库 → “+ Add docs” → Local folder → 粘贴路径 → 勾选 Include subfolders → Add

3.5 知识库使用方法（RN 开发实战）

  1. @引用知识库
    聊天中输入：
@react-native-docs 请解释RN中FlatList的优化技巧，结合useCallback和memo
@项目接口文档 生成用户登录接口的RN请求代码

  1. 全局关联（自动引用）
    知识库设置 → 开启 “自动关联到所有聊天”，AI 对话时自动参考知识库内容

  2. Composer 中使用
    打开Composer → 输入需求 → AI 自动引用知识库生成代码/文档

3.6 RN 专属知识库推荐清单

类型 导入内容 作用
官方文档 React Native、React、TypeScript、Expo 官网 解决API、组件、语法问题
项目文档 接口文档、架构设计、组件规范 贴合项目生成精准代码
团队规范 编码规范、命名规则、样式标准 统一代码风格
错误手册 RN常见报错、原生模块问题 快速定位修复Bug
插件文档 react-navigation、redux、axios等 正确使用第三方库

四、前端/RN 开发 Skills + 知识库 最佳实践

4.1 项目初始化必配（5分钟搞定）

  1. 创建 .cursor/skills/ 目录，添加 RN组件生成、接口封装、打包发布 3个核心Skills
  2. 导入 RN官方文档、项目docs目录、团队规范 3类知识库
  3. 编写项目 .cursor/rules/ 规范（技术栈、代码风格）：
# RN项目规范
description: 项目技术栈与编码规范
globs: ["**/*.{ts,tsx,js,jsx}"]
---
- 技术栈：React Native 0.72 + TypeScript + React Hooks + Axios
- 组件：函数式、Props接口、StyleSheet样式分离
- 命名：大驼峰组件、小驼峰文件/变量、常量大写
- 禁用：Class组件、var、any类型（必要时显式声明）
- 目录：src/components、src/hooks、src/api、src/utils

4.2 日常开发效率提升

  • 生成组件：@RN-组件生成器 生成商品列表组件，支持下拉刷新、上拉加载
  • 查API：@react-native-docs Image组件的resizeMode属性有哪些？
  • 封装接口：@项目接口文档 @RN-接口封装 生成获取商品列表的请求方法
  • 打包发布：@RN-打包发布 执行Android Release打包

4.3 避坑指南

  1. Skills 编写：指令越具体越好，避免模糊描述；RN相关必须指定版本（0.72+）
  2. 知识库导入：优先Markdown格式，PDF避免扫描版；网站导入控制深度，防止冗余
  3. 性能优化：知识库文件总数≤50个，单文件≤10MB；Skills 数量≤20个，避免冲突

五、教程链接与资源汇总

5.1 官方文档

  • Cursor Skills 官方指南：https://docs.cursor.com/skills/
  • Cursor 知识库官方指南：https://docs.cursor.com/knowledge-base/
  • Cursor RN 开发指南：https://docs.cursor.com/react-native/

5.2 社区资源

  • RN 专属 Skills 仓库：https://github.com/huang3037/rn-cursor-skills
  • 前端 Skills 合集：https://github.com/cursor-ide/frontend-skills
  • Cursor 中文教程站：https://www.cursor-ide.com/

5.3 实用工具

  • RN 文档转 Markdown：https://github.com/reactnativecn/react-native-doc
  • Obsidian 知识库管理：https://obsidian.md/

六、常见问题（FAQ）

  1. Q：Skills 创建后不生效？
    A：检查路径是否正确（.cursor/skills/）、文件名是否为 SKILL.md、重启Cursor 重新加载

  2. Q：知识库导入后AI不引用？
    A：手动用 @知识库名 触发；开启自动关联；确认文档索引完成（无报错）

  3. Q：RN 开发中AI生成代码有错误？
    A：导入最新RN官方文档；Skills 中明确版本；补充项目规范到知识库

  4. Q：如何跨项目复用Skills/知识库？
    A：Skills 放到全局目录 ~/.cursor/skills/；知识库导出后导入新项目

# react.js # 前端
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

cover

从螯肢仿生到精准控制：OpenClaw龙虾机器人运动控制核心，逆解与轨迹规划全揭秘

avatar AtomGit开源社区

【光伏参数辨识模型】基于灰狼优化算法（GWO）、蜣螂优化算法（DBO）与野狗优化算法（DOA）的光伏参数辨识模型研究（Matlab代码实现）

在光伏发电系统高效运行与性能精准评估的实际需求下，光伏电池等效模型参数辨识成为关键技术环节。针对传统参数辨识方法精度偏低、稳定性不足、易陷入局部最优解等问题，本文将灰狼优化算法、蜣螂优化算法与野狗优化算法应用于光伏电池及组件的参数辨识任务，构建完整的智能优化辨识框架。研究以实测电流电压数据为依据，建立单二极管、双二极管与光伏组件三二极管三种精度逐级提升的等效模型，以拟合误差最小化为优化目标，通过三

avatar AtomGit开源社区

基于模型预测控制车辆轨迹跟踪研究（Matlab代码实现）

针对智能车辆在行驶过程中轨迹跟踪精度不足、动态适应性较弱等问题，本文以二自由度车辆动力学模型为基础，开展模型预测控制算法在车辆轨迹跟踪中的应用研究。通过构建自适应模型预测控制框架，实现对预设参考轨迹的持续稳定跟踪，同时依托 Matlab2018 及以上版本仿真环境搭建完整仿真流程，完成参数配置、模型调节与轨迹跟踪验证。研究结果表明，所设计的模型预测控制策略能够有效提升车辆轨迹跟踪的精准度与鲁棒性，

avatar AtomGit开源社区