React Best Practices in Cursor

Goal

Use React Best Practices quickly out of the box in Cursor.
While it's been written in many blogs for Claude Code but not for Cursor.
Let's make it work!

What is React Best Practices?

10+ years of React and Next.js optimization knowledge collection provided by Vercel.
https://vercel.com/blog/introducing-react-best-practices
Setting them in the skills or rules in the AI agents, it allows the agents to work by referencing to the documents during processing.

Procedure

1. Run the following command to install agent-skills under a specific project.

npx add-skill vercel-labs/agent-skills

Select Cursor and follow the instructions.

It installs the files automatically under

.cursor/skills/react-best-practices/

however, Cursor is not able to detect them just out of the box because the format in md files is different from what Cursor expects.

If you go to
Cursor -> Settings... -> Cursor Settings -> Rules,Skills,Subagents
you should be seeing No Skills are set over there.

In order for Cursor to read it, you need to convert it with /migrate-to-skills command.

Here is a prompt I used.

Conversion command is officially provided by Cursor.
See: https://cursor.com/docs/context/skills#migrating-rules-and-commands-to-skills

Type /migrate-to-skills in Agent chat

Takeaway

You need to run /migrate-to-skills for Cursor to read React Best Practices in Cursor.