vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/analsharqy/react-best-practices-2What This Skill Does
The vercel-react-best-practices skill serves as an automated expert consultant for your React and Next.js development workflow. By codifying the rigorous performance standards established by Vercel Engineering, this tool acts as a proactive code reviewer and architectural guide. It systematically evaluates your application against 62 performance-critical rules, categorized from critical architectural patterns like 'Eliminating Waterfalls' to fine-tuned optimizations like 'Re-render Optimization'. Whether you are a solo developer or part of a large engineering team, this skill ensures that your codebase adheres to the latest standards for server-side rendering, bundle management, and efficient state orchestration.
Installation
To integrate this performance suite into your OpenClaw environment, execute the following command in your terminal:
clawhub install openclaw/skills/skills/analsharqy/react-best-practices-2
Once installed, the skill will automatically monitor relevant file types and provide contextual suggestions during your standard coding workflow.
Use Cases
- Legacy Refactoring: Identify and resolve performance bottlenecks in older Next.js projects by applying the 'Eliminating Waterfalls' ruleset.
- Architecture Review: Use the skill during pull request reviews to catch potential bundle bloating or server-side serialization issues before they hit production.
- Component Optimization: Refactor complex React components to ensure optimal rendering patterns, utilizing the 'Re-render Optimization' category to minimize unnecessary UI updates.
- Performance Audits: Run a full-scale analysis of your application to receive a prioritized report of actionable improvements based on the 8 core performance categories.
Example Prompts
- "Review my current Next.js server components and suggest ways to eliminate request waterfalls using the
async-category guidelines." - "Analyze this component code and tell me if I am violating any
bundle-best practices that would negatively impact my TTI or LCP scores." - "Refactor my data fetching logic to move from standard useEffect calls to more efficient server-side patterns using
server-cache-react."
Tips & Limitations
- Prioritize the Critical Rules: Always address
async-andbundle-prefixes first, as these provide the most significant impact on your core web vitals. - Context Matters: When asking for advice, provide the surrounding component context. The skill provides better recommendations when it understands the component's place in the tree.
- Limitations: While highly accurate, this skill performs static analysis and architectural guidance. Always verify performance gains with real-world profiling using tools like Lighthouse or Vercel Speed Insights.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-analsharqy-react-best-practices-2": {
"enabled": true,
"auto_update": true
}
}
}