AgentSkillsCN

vercel-react-best-practices

Vercel 工程团队提供的 React 与 Next.js 性能优化指南。在编写、审查或重构 React/Next.js 代码时，应运用此技能，以确保实现最优的性能模式。适用于涉及 React 组件、Next.js 页面、数据获取、包体积优化或性能提升的任务。

SKILL.md
--- frontmatter
name: vercel-react-best-practices
description: 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.
license: MIT
metadata:
  author: vercel
  version: "1.0.0"

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:

text
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.