行业动态
skills.sh ·
Vercel React 最佳实践技能
Vercel Labs 的 React 最佳实践技能，安装量 686,190，安全扫描显示 GEN: SAFE，SNYK: LOW。
AI推荐理由 React 最佳实践技能，安装量高，对前端开发有参考价值，但摘要未提供具体内容。
70
安装 156
榜单名次 13
正文
vercel-react-best-practices
ReactNext.js
安装
命令提示符
$ npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
摘要
React 和 Next.js 性能优化，涵盖 70 条规则，按影响程度排序。
分为 8 个类别，从关键（消除瀑布流、包优化）到低优先级（高级模式），每条规则都有具体、可操作的指导，并带有前缀以便参考
涵盖服务器端性能，包括 React.cache() 去重、并行获取和序列化最小化
解决客户端问题：通过记忆化和依赖管理优化重渲染，使用 CSS 策略和水合模式优化渲染性能
包括 JavaScript 级别的优化，如 DOM 批处理、缓存和 Set/Map 查找以实现 O(1) 性能
每条规则都包含详细解释、错误和正确的代码示例，以及用于自动化重构和代码生成的上下文指导
SKILL.md
Vercel React 最佳实践
由 Vercel 维护的 React 和 Next.js 应用综合性能优化指南。包含 8 个类别的 70 条规则，按影响程度排序，以指导自动化重构和代码生成。
何时应用
在以下情况参考这些指南：
编写新的 React 组件或 Next.js 页面
实现数据获取（客户端或服务器端）
审查代码以发现性能问题
重构现有的 React/Next.js 代码
优化包大小或加载时间
按优先级分类的规则类别
显示更多
相关技能
更多 React 相关
vercel-composition-patterns
复合组件、渲染属性和上下文模式，用于可扩展的组件 API
vercel-labs/agent-skills
shadcn
shadcn/ui 组件使用、定制和 Tailwind 集成
shadcn/ui
webapp-testing
测试 React 应用：单元测试、集成测试和端到端模式
anthropics/skills
typescript-advanced-types
可辨识联合、条件类型、模板字面量类型和工具类型模式
wshobson/agents
tailwind-design-system
使用 Tailwind 实现设计系统：令牌、变体和组件模式
wshobson/agents
更多 Next.js 相关
vercel-composition-patterns
用于可扩展 Next.js 应用的可组合组件架构模式
vercel-labs/agent-skills
next-best-practices
文件约定、RSC 边界、数据模式、异步 API 和元数据
vercel-labs/next-skills
deploy-to-vercel
使用正确的配置和环境设置将 Next.js 应用部署到 Vercel
vercel-labs/agent-skills
next-cache-components
PPR、使用缓存指令、cacheLife、cacheTag 和 revalidateTag
vercel-labs/next-skills
turborepo
Turborepo 任务管道、缓存、远程缓存和 CI 配置
vercel/turborepo
安装量
693.2K
仓库
vercel-labs/agent-skills
GitHub 星标
30.9K
首次出现
2026年1月19日
安全审计
Gen Agent Trust Hub通过
Socket通过
Snyk通过
查看原文（中文正文为 AI 翻译）
vercel-react-best-practices
ReactNext.js
Installation
CommandPrompt
$ npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
Summary
React and Next.js performance optimization across 70 rules prioritized by impact.
Organized into 8 categories from critical (eliminating waterfalls, bundle optimization) to low priority (advanced patterns), each with specific, actionable rules prefixed for easy reference
Covers server-side performance including React.cache() deduplication, parallel fetching, and serialization minimization
Addresses client-side concerns: re-render optimization through memoization and dependency management, rendering performance with CSS strategies and hydration patterns
Includes JavaScript-level optimizations like DOM batching, caching, and Set/Map lookups for O(1) performance
Each rule includes detailed explanations, incorrect and correct code examples, and contextual guidance for automated refactoring and code generation
SKILL.md
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 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
Show more
Related skills
More in React
vercel-composition-patterns
Compound components, render props, and context patterns for scalable component APIs
vercel-labs/agent-skills
shadcn
shadcn/ui component usage, customization, and Tailwind integration
shadcn/ui
webapp-testing
Testing React apps: unit, integration, and end-to-end patterns
anthropics/skills
typescript-advanced-types
Discriminated unions, conditional types, template literals, and utility type patterns
wshobson/agents
tailwind-design-system
Design system implementation with Tailwind: tokens, variants, and component patterns
wshobson/agents
More in Next.js
vercel-composition-patterns
Composable component architecture patterns for scalable Next.js apps
vercel-labs/agent-skills
next-best-practices
File conventions, RSC boundaries, data patterns, async APIs, and metadata
vercel-labs/next-skills
deploy-to-vercel
Deploy Next.js apps to Vercel with correct config and environment setup
vercel-labs/agent-skills
next-cache-components
PPR, use cache directive, cacheLife, cacheTag, and revalidateTag
vercel-labs/next-skills
turborepo
Turborepo task pipelines, caching, remote cache, and CI configuration
vercel/turborepo
Installs
693.2K
Repository
vercel-labs/agent-skills
GitHub Stars
30.9K
First Seen
Jan 19, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass