Setup & Installation
openclaw skills install @kjaylee/react-perf
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
npx clawhub install react-perf
What This Skill Does
A collection of React and Next.js performance patterns covering waterfall elimination, bundle size reduction, re-render prevention, and server-side optimizations. Applies to standard React apps, Next.js projects, and Remotion video components.
Consolidates Vercel's 57-rule react-best-practices guide into prioritized, actionable patterns so developers skip research and apply fixes directly.
When to use it
- Parallelizing API calls that were running sequentially
- Reducing initial bundle size with dynamic imports
- Preventing unnecessary re-renders in complex component trees
- Optimizing server components to minimize client data transfer
- Improving Remotion video render performance with memoization
Example Workflow
Here's how your AI assistant might use this skill in practice.
INPUT
User asks: my Next.js page feels slow, multiple API calls on load
AGENT
- 1Identify sequential await chains in data-fetching code
- 2Replace sequential awaits with Promise.all for independent requests
- 3Check for barrel imports and replace with direct component imports
- 4Add next/dynamic for heavy below-the-fold components
- 5Wrap parallel fetch sections in Suspense boundaries for streaming
OUTPUT
Refactored data fetching runs in parallel, bundle splits load lazily, and the page streams content progressively