SkillsAdd

dtsong/my-claude-setup · Archived

vercel-react-best-practices

React and Next.js performance optimization guidelines from Vercel Engineering.

First seen Mar 10, 2026

Installation

$ npx skills add dtsong/my-claude-setup --skill vercel-react-best-practices
View on skills.sh ↗ GitHub repository ↗

Summary

  • React and Next.js performance optimization guidelines from Vercel Engineering.
  • This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns.
  • Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Stronger alternatives

This repository is archived — consider an actively maintained alternative.

web-security-hardening Same source · more installs
dtsong/my-claude-setup

Security audit checklist for web applications.

33 installs
web-design-guidelines Same source · more installs
dtsong/my-claude-setup

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "chec…

8 installs
soc-security-skills Same source · more installs
dtsong/my-claude-setup

Use this skill when performing hardware security analysis for System-on-Chip components — threa…

6 installs
tdd Same source
dtsong/my-claude-setup

Test-driven development reference for writing good tests, designing testable interfaces, mockin…

3 installs

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

vercel-react-best-practices Shared topics
vercel-labs/agent-skills 697.8K installs
azure-hosted-copilot-sdk Shared topics
microsoft/azure-skills 440.4K installs
vercel-composition-patterns Shared topics
vercel-labs/agent-skills 326.5K installs
supabase Shared topics
supabase/agent-skills

Use when doing ANY task involving Supabase. Triggers: Supabase products (Database, Auth, Edge F…

263K installs
prisma-compute Shared topics
prisma/skills

Prisma Compute deployment and hosting guide. Use whenever the user mentions Prisma Compute, `pr…

253.4K installs
vercel-react-native-skills Shared topics
vercel-labs/agent-skills 205.5K installs

Also in this package

Other skills from dtsong/my-claude-setup · top by installs.

npx skills add dtsong/my-claude-setup
web-security-hardening 33 web-design-guidelines 8 soc-security-skills 6 tdd 3 dockerfile-generation 3 language-conventions 2 evaluate-diagram 2 generate-plot 2 git-status 2 terraform-skill 2

Browse all from dtsong/my-claude-setup

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Not declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Repository health

Stars 5
License LICENSE
Default branch main
Open issues 5
Status Archived

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0
LicenseMIT
Declared agents claude-code
More metadata
author
vercel
version
1.0.0

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 1,965 B
  • docs README.md 1,000 B
  • docs SUMMARY.md 364 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 3 installs

SKILL.md

React Best Practices (Upstream)

This is a lightweight stub skill that fetches the latest React Best Practices guidance from Vercel's upstream repository at runtime.

It intentionally avoids vendoring the full rule set so updates can be adopted quickly and attribution stays clear.

Upstream Sources

Guidelines Source

Fetch fresh guidance before each review:

https://raw.githubusercontent.com/vercel-labs/agent-skills/main/skills/react-best-practices/AGENTS.md

Process

  1. Fetch the upstream AGENTS.md.
  2. Use it as the authoritative rulebook for React/Next.js performance.
  3. Apply relevant rules to the current code/task.

Output Format

  • Provide actionable recommendations.
  • When possible, cite the upstream rule section heading (and/or a short identifier) so the change can be traced to the upstream guidance.

Quality Checks

  • Do not propose micro-optimizations if there are obvious waterfalls or bundle bloat issues.
  • Prefer changes that are correct-by-construction (avoid flaky memoization patterns).
  • Be explicit about trade-offs and when not to apply a rule.

Offline Snapshot (Optional)

If you want an offline copy of the full rule set, install the upstream repo separately and link it into your Claude Code skills directory.

See skills/vercel-react-best-practices/README.md for an example.