A comprehensive performance optimization guide and rule-set for React and Next.js applications 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-3
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-3 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 is a specialized library of 64 high-impact rules designed to eliminate performance bottlenecks in modern web applications. Developed by Vercel Engineering, this Openclaw Skills resource provides a structured framework for writing, reviewing, and refactoring React and Next.js code. It focuses on critical areas like eliminating async waterfalls, minimizing bundle sizes, and optimizing server-side execution to ensure lightning-fast user experiences.
By integrating these guidelines, developers and AI agents can automatically identify sub-optimal patterns—such as inefficient data fetching or excessive re-renders—and replace them with industry-standard solutions. Whether you are building a new feature or optimizing an existing codebase, this skill serves as a definitive technical compass for high-performance React development.
Vercel React Best Practices Use Cases
- Refactoring legacy React components to reduce unnecessary re-renders and improve responsiveness.
- Auditing Next.js pages to eliminate data fetching waterfalls and implement parallel loading.
- Optimizing JavaScript bundle sizes by identifying and replacing heavy barrel imports with dynamic loading.
- Implementing server-side performance improvements using React.cache() and efficient serialization.
- Automating code reviews to ensure all new pull requests adhere to Vercel Engineering standards.
How Vercel React Best Practices Works
- The skill analyzes the current React or Next.js code context, identifying patterns related to data fetching, rendering, or imports.
- It cross-references the code against 64 prioritized rules categorized by impact level (Critical to Low).
- The agent identifies specific performance anti-patterns, such as sequential awaits or inline component definitions.
- It suggests or applies the optimized code pattern based on the corresponding rule documentation (e.g., replacing Promise chains with Promise.all()).
- Finally, it validates the changes against the rule hierarchy to ensure maximum performance gain with minimal architectural friction.
Vercel React Best Practices Setup
To utilize these performance rules within your development environment, ensure your AI agent is pointed to the Openclaw Skills repository.
# Navigate to your project's skill directory
cd .cursor/skills/vercel-react-practices
# Reference the compiled rules for your AI agent
# The agent will now use AGENTS.md for context
Vercel React Best Practices Data Schema & Taxonomy
The skill organizes its optimization logic through a strict taxonomy of priorities and prefixes to help Openclaw Skills agents navigate the rule-set effectively:
| Category | Prefix | Impact Level | Description |
|---|---|---|---|
| Eliminating Waterfalls | async- |
CRITICAL | Fixes blocking data fetches and sequential awaits. |
| Bundle Size | bundle- |
CRITICAL | Focuses on tree-shaking and dynamic imports. |
| Server Performance | server- |
HIGH | Optimizes RSC props and server action security. |
| Re-render Logic | rerender- |
MEDIUM | Minimizes component updates and state overhead. |
| JS Performance | js- |
LOW-MEDIUM | Standardizes efficient O(1) lookups and loop logic. |
Vercel React Best Practices Advanced Features
- Multi-stage Waterfall Elimination: Advanced logic to move awaits into conditional branches for non-blocking UI.
- Granular Bundle Control: Rules for deferring third-party scripts and preloading resources on user intent.
- Intelligent Memoization: Strategies to avoid the 'memo-everything' trap by using primitive dependencies and derived state.
- Strategic Server Actions: Best practices for authenticating and non-blocking operations using the after() pattern.
- Automated Refactoring Hooks: Triggers that automatically suggest functional setState or lazy state initialization for expensive operations.
SKILL.md
Loading
Related Openclaw Skills
uwillberich
A professional decision-oriented A-share analysis skill that converts market tape and macro data into actionable next-session trading plans.
MiniMax Multimodal Toolkit
A comprehensive multimodal tool wrapper for generating images, videos, music, and synthesized speech using official MiniMax APIs.
Kai Realtime Voice
A high-performance Openclaw skill for real-time, low-latency voice generation using the MiniMax WebSocket API.
AI Icon Generator
A high-performance REST API that transforms natural language descriptions into professional, ready-to-use icon assets.
WebDAV Sync
A robust automation skill for creating deterministic archives and syncing them securely to WebDAV storage with integrated notifications.
Find Skills
A high-priority discovery and installation engine for adding new capabilities to AI coding agents.
Featured*
