react-best-practices

What This Skill Does

The react-best-practices skill provides a standardized framework for optimizing React and Next.js applications based on Vercel Engineering's rigorous performance standards. It enforces 57 distinct rules organized across eight critical categories, focusing on architectural efficiency and runtime performance. By integrating this skill, your OpenClaw agent gains the capability to automatically audit code, detect performance bottlenecks such as request waterfalls, suggest code-splitting strategies, and provide architectural guidance for Server Components (RSC). It acts as a continuous quality gate for your codebase, ensuring that your application maintains low bundle sizes and optimal Core Web Vitals.

Installation

To integrate the skill into your development environment, run the following command in your terminal:

npx clawhub@latest install react-best-practices

Use Cases

This skill is ideal for developers and teams working on complex Next.js projects. Use it when:

• Conducting code reviews to ensure new features follow performance best practices.
• Refactoring legacy components that cause excessive re-renders or layout shifts.
• Optimizing server-side data fetching to eliminate sequential request waterfalls.
• Analyzing bundle analysis reports to identify bloated dependencies.
• Implementing advanced patterns such as Suspense boundaries for streaming SSR.
• Troubleshooting production performance issues related to hydration or client-side JavaScript execution.

Example Prompts

1. "Analyze my current profile page component and suggest optimizations to eliminate the request waterfall between the user data fetch and the user settings fetch using async-parallel rules."
2. "Review the current import structure in my layout file and identify which modules should be converted to next/dynamic imports to improve initial bundle size."
3. "Refactor this component to minimize re-renders by applying rerender- rules and implementing proper memoization strategies for the expensive child calculations."

Tips & Limitations

• Prioritize CRITICAL: Always start with the 'Eliminating Waterfalls' and 'Bundle Size Optimization' categories, as they provide the highest impact on perceived load speed.
• Automation Caution: While the skill can suggest code changes, it is best practice to run your own integration tests after applying significant refactors to ensure no side effects are introduced.
• Contextual Awareness: Ensure the agent has full access to the file path or repository structure to provide the most accurate rule suggestions, as some patterns are highly dependent on file location and export structures.