React Best Practices in Cursor

Source: Dev.to

Goal

Use React Best Practices quickly out of the box in Cursor. While many blogs cover this for Claude Code, this guide focuses on getting it to work in Cursor.

What is React Best Practices?

10+ years of React and Next.js optimization knowledge collected by Vercel.

Introducing React Best Practices – Vercel Blog

Setting these practices as skills or rules in AI agents allows the agents to reference the documents during processing.

Procedure

1. Install the agent-skills package in your project:

   npx add-skill vercel-labs/agent-skills

2. Select Cursor and follow the on‑screen instructions.

   

3. The command creates the files automatically under:

   .cursor/skills/react-best-practices/

4. Cursor does not detect these files automatically because the markdown format differs from what Cursor expects.

5. Open Cursor → Settings… → Cursor Settings → Rules, Skills, Subagents. You’ll see “No Skills are set”.

6. Convert the files using the /migrate-to-skills command. Example prompt (screenshot):

   

7. The conversion command is officially provided by Cursor. See the documentation for details:

   Migrating rules and commands to skills – Cursor Docs

8. In the Agent chat, type:

   /migrate-to-skills

Takeaway

Run /migrate-to-skills so that Cursor can read and apply the React Best Practices skill set.