A comprehensive collection of 62 performance optimization rules for React and Next.js maintained by Vercel Engineering.
Install & Download
1. ClawHub CLI
The fastest way to install a skill directly from the registry.
npx clawhub@latest install react-best-practices-2-0-1-0
2. Manual Installation
Copy the skill folder to one of these locations
~/.openclaw/skills/ <project>/skills/ Priority: Workspace > Local > Bundled
3. Prompt Installation
Copy this prompt to OpenClaw to install it automatically.
Help me install react-best-practices-2-0-1-0 using Clawhub. If Clawhub is not installed, install it first (npm i -g clawhub).
Prefer to download?
Get the raw skill files in a ZIP archive.
What is Vercel React Best Practices?
Vercel React Best Practices provides a rigorous framework for optimizing modern web applications. This repository of Openclaw Skills focuses on high-impact performance patterns, ranging from critical waterfall elimination to advanced JavaScript execution optimizations. By following these engineering guidelines, developers can ensure their React components and Next.js pages are lean, fast, and scalable.
The skill acts as a technical compass for both manual development and automated AI refactoring. It synthesizes complex performance concepts into actionable rules, categorized by their direct impact on the end-user experience and application metrics like Core Web Vitals.
Vercel React Best Practices Use Cases
- Identifying and resolving data fetching waterfalls in complex Next.js layouts.
- Reducing initial bundle size by auditing barrel imports and implementing dynamic imports.
- Optimizing React Server Components to minimize data serialization overhead.
- Refactoring component trees to prevent unnecessary re-renders using memoization and state colocation.
- Implementing efficient client-side data fetching strategies with SWR and request deduplication.
How Vercel React Best Practices Works
- The user identifies a React or Next.js development task, such as creating a new page or refactoring an existing component.
- The developer or AI agent references the Openclaw Skills rule categories to determine the priority of optimization needed.
- Specific rule prefixes like async-, bundle-, or server- are used to locate relevant performance patterns within the documentation.
- The user reviews the incorrect vs. correct code examples provided for each rule to understand the underlying performance issue.
- The optimized code is implemented, following the provided lifecycle steps to ensure the best possible performance profile.
Vercel React Best Practices Setup
To utilize these performance guidelines within your project as part of your Openclaw Skills library, follow these steps:
- Review the rule definitions in the
rules/directory for specific implementation details. - Incorporate the prefixes into your code review checklist or AI agent prompting instructions.
- Use the following command to access individual rule details directly from your terminal:
# View specific optimization guidelines for parallelizing promises
cat rules/async-parallel.md
Vercel React Best Practices Data Schema & Taxonomy
The skill organizes its optimization logic through a structured taxonomy of rules and impact levels:
| Priority | Category | Impact | Rule Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
Each rule entry includes a rationale, a negative code pattern, and a corresponding optimized solution.
Vercel React Best Practices Advanced Features
- Multi-category prioritization allows teams to focus on critical performance bottlenecks first.
- Detailed guidance on React Server Components (RSC) and server-side data fetching patterns.
- Specialized rules for optimizing SVG rendering and hydration-safe client-side data.
- Integration-ready format for AI coding agents to automate performance audits using Openclaw Skills.
- Comprehensive coverage of low-level JavaScript optimizations for high-frequency execution paths.
SKILL.md
Loading
Related Openclaw Skills
Duan Yongping Long-termism Check
A professional investment evaluation framework focused on identifying companies worthy of a 10-year holding period.
Flip
An offline, high-speed documentation reference tool designed to provide instant access to developer patterns and guides without API dependencies.
Unified News Skill
A comprehensive news aggregation service that unifies Web3, AI technology, and macroeconomic updates with automated deduplication and scheduled delivery.
Gallery
A local, high-speed reference tool providing instant access to implementation patterns, security guidelines, and development best practices.
Gin SSR Template Generator
A specialized AI skill that transforms Figma screenshots into fully functional, hard-coded Gin SSR HTML templates and CSS files.
Shopify Profit Calculator
An AI-powered profit analysis agent that calculates true net profit for Shopify stores by accounting for all fees, COGS, and ad spend.
Featured*
