A comprehensive set of 57 performance optimization rules for React and Next.js applications developed 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. 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 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 React Best Practices?
React Best Practices is a specialized skill designed to enhance web development workflows through rigorous performance standards. It provides a curated library of 57 actionable rules across 8 critical categories, ranging from eliminating request waterfalls to JavaScript micro-optimizations. By integrating this into your environment via Openclaw Skills, you gain access to the collective engineering wisdom of Vercel, ensuring your applications are fast, scalable, and maintainable.
The skill focuses on practical, real-world scenarios that developers face daily. Whether you are dealing with bloated bundle sizes or complex server-side rendering logic, these rules provide the exact patterns needed to resolve issues. It acts as a continuous performance auditor, helping developers write cleaner code and review existing projects for optimization opportunities.
React Best Practices Use Cases
- Drafting new React components or Next.js pages with performance-first principles.
- Performing deep-dive code reviews to identify hidden request waterfalls and rendering bottlenecks.
- Refactoring legacy React applications to reduce bundle size and improve load times.
- Debugging complex hydration mismatches or slow server-side data fetching.
- Implementing advanced patterns like parallel fetching and dynamic imports correctly.
How React Best Practices Works
- The skill categorizes optimization rules by impact level, prioritizing critical fixes like request waterfalls and bundle size.
- Users can access individual rule definitions within the rules directory, which provide detailed explanation and code comparisons.
- The AI agent analyzes the project code against these rules to suggest specific refactors or improvements.
- Developers can reference the compiled AGENTS.md for a full overview of all 57 performance patterns in a single document.
- The lifecycle involves applying these rules during the development, review, and optimization phases of the software development life cycle.
React Best Practices Setup
To install the React Best Practices skill, use the following command in your terminal:
npx clawhub@latest install react-best-practices
Once installed, you can access the rules through your AI agent or by browsing the individual markdown files in the skill directory.
React Best Practices Data Schema & Taxonomy
The skill organizes its knowledge into a structured hierarchy for easy consumption by both humans and AI agents within the Openclaw Skills ecosystem:
| Component | Format | Purpose |
|---|---|---|
| Rules Directory | Markdown Files | Individual rule definitions with 'Incorrect' vs 'Correct' code examples. |
| Full Guide | AGENTS.md | A comprehensive 2900+ line reference of all rules expanded. |
| Metadata | YAML/SKILL.md | Technical specifications including versioning and tags. |
Rules are taxonomized by prefixes such as async-, bundle-, server-, and rerender- to indicate their specific functional domain.
React Best Practices Advanced Features
- Impact-prioritized rule sets ranging from Critical (Waterfalls/Bundle) to Low (Advanced Patterns).
- Specific guidelines for React Server Components (RSC) and server-side serialization.
- Micro-optimizations for JavaScript execution, including O(1) lookups and loop efficiency.
- Advanced event handler management and stable callback patterns to prevent unnecessary re-renders.
- Integration-ready for complex Next.js architectures including Edge and Middleware environments.
SKILL.md
Loading
Related Openclaw Skills
Quality Gates
An automated framework for enforcing technical standards and security protocols at every stage of the software development lifecycle.
Prometheus Monitoring & Observability
A comprehensive framework for deploying production-grade Prometheus monitoring, alerting, and service discovery.
Project Documentation Meta-Skill
A comprehensive meta-skill for establishing a professional docs-first development workflow using standardized templates and directory structures.
Professional Communication
A specialized communication framework for technical teams to draft clear, actionable emails, messages, and meeting agendas.
React Composition Patterns
A technical blueprint for building flexible, maintainable React components by replacing boolean props with compound components and context-driven state lifting.
React Modernization
A comprehensive system for upgrading React applications from legacy class components to modern hooks and the latest React 19 concurrent features.
Featured*
