vercel-react-best-practices

仓库创建 2026年7月6日最近提交 23 天前SkillHot 收录 22 天前

▸ 精选理由

覆盖面广且按影响优先，适合自动化重构与审查。

这个 Skill 做什么

Vercel 的 React/Next.js 性能优化规则集与审查准则。

把 Vercel 工程团队总结的 React/Next.js 性能优化准则应用到代码写作、审查或重构中，覆盖组件、页面、数据获取和打包优化等场景。适合在要提升前端性能、减少包体积或改进数据加载时参考，规则按影响力优先排序便于取舍。特点是实践导向、规则具体，可用于自动重构或生成更高效的代码。

▸ 展开 SKILL.md 英文原文

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.

开发编程ReactNext.js性能优化通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/vivalsy/SDD_Template/main/.claude/skills/vercel-react-best-practices/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/vivalsy/SDD_Template/main/.claude/skills/vercel-react-best-practices/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 62 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

## When to Apply

Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
| 2 | Bun

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有