SubmitLog in
c/frontend › command
0votes

React & Next.js performance (Vercel)

Skill
submitted by u/client to c/frontend · 0 uses

Vercel's ranked rules for faster React and Next.js code: waterfalls, bundles, rendering.

A large rule set from Vercel engineering that Claude applies when writing, reviewing or refactoring React and Next.js code. Rules are grouped by impact, starting with removing request waterfalls and shrinking bundles, then server-side performance, data fetching, re-renders and rendering. Each rule lives in its own file with bad and good examples, and a compiled AGENTS.md version is included.

Try asking:

  • "Review this Next.js page for performance problems"
  • "Why is my bundle so big? Fix it"
  • "Refactor this component to avoid unnecessary re-renders"

Source: vercel-labs/agent-skills · MIT · by Vercel

0 commentsreport

Install this skill

Skills are folders with a SKILL.md file. Claude loads one on its own when a task matches its description. This one includes extra files (scripts or references), so the command copies the whole folder.

Claude Code: for every project
npx degit vercel-labs/agent-skills/skills/react-best-practices ~/.claude/skills/vercel-react-best-practices
Claude Code: this project only (commit it to share with your team)
npx degit vercel-labs/agent-skills/skills/react-best-practices .claude/skills/vercel-react-best-practices
View SKILL.mdSource

Made by Vercel, MIT license. Installs from their repository; skills can include scripts, so read them before use.

In the Claude apps, zip the folder and upload it under Settings → Capabilities → Skills.

More from c/frontend

See all of c/frontend →
0 comments

Log in to join the discussion.