React 在 Cursor 中的最佳实践

发布: 10小时前 (2026年2月1日 GMT+8 16:29)

2 min read

原文: Dev.to

Source: Dev.to

Cover image for React Best Practices in Cursor

目标

在 Cursor 中快速开箱即用 React 最佳实践。虽然很多博客已经为 Claude Code 介绍了这些内容，但本指南侧重于在 Cursor 中让它们工作。

由 Vercel 收集的 10 多年 React 与 Next.js 优化经验。

将这些实践设为 AI 代理的技能或规则，使代理在处理过程中能够引用这些文档。

在项目中安装 agent-skills 包：
```
npx add-skill vercel-labs/agent-skills
```
选择 Cursor 并按照屏幕上的指示操作。
该命令会自动在以下路径下创建文件：
```
.cursor/skills/react-best-practices/
```
由于 Markdown 格式与 Cursor 期望的格式不同，Cursor 并不会自动检测到这些文件。
打开 Cursor → Settings… → Cursor Settings → Rules, Skills, Subagents。你会看到 “No Skills are set”。
使用 /migrate-to-skills 命令转换文件。示例提示（截图）：
转换命令由 Cursor 官方提供。详情请参阅文档：

Migrating rules and commands to skills – Cursor Docs
在 Agent 聊天窗口中输入：
```
/migrate-to-skills
```

运行 /migrate-to-skills，让 Cursor 能读取并应用 React 最佳实践技能集。