react-performance
React and Next.js performance optimization patterns. Use when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance. Triggers on tasks involving components, data fetching, bundle optimization, re-render reduction, or server component architecture.
Why use this skill?
Optimize your React and Next.js applications with expert guidance on eliminating waterfalls, reducing bundle sizes, and improving rendering performance.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/wpank/react-performanceWhat This Skill Does
The react-performance skill serves as an expert architectural consultant for React and Next.js applications. It systematically analyzes codebase patterns to optimize application responsiveness, payload sizes, and server-side rendering logic. By leveraging a hierarchy of seven optimization categories—ranging from critical waterfall elimination to micro-optimizations like re-render reduction—the skill acts as a guardrail for performance-sensitive development. It helps developers move away from inefficient patterns like sequential fetching and barrel-file bloated imports, providing actionable refactoring advice for modern architectures like React Server Components and Suspense-driven data flows.
Installation
To integrate this optimization engine into your environment, run the following command in your terminal:
npx clawhub@latest install react-performance
Alternatively, if you are using the internal registry for OpenClaw skills:
clawhub install openclaw/skills/skills/wpank/react-performance
Use Cases
This skill is designed for scenarios where application performance is paramount. Use it when:
- Refactoring legacy React codebases that suffer from long time-to-interactive (TTI) metrics.
- Architecting new Next.js pages that require complex, data-heavy content loading.
- Performing bundle audits to trim excessive third-party dependencies.
- Debugging unexpected re-renders in large component trees that cause input lag or jittery UI.
- Migrating existing components to React Server Components to reduce client-side JavaScript overhead.
Example Prompts
- "Review my current page data-fetching logic; I have three sequential API calls in my useEffect hooks that are causing significant loading waterfalls. How can I parallelize these?"
- "I'm seeing a massive bundle size warning in my Next.js build output. Can you audit my imports and suggest how to remove unused barrel file exports?"
- "My dashboard component is lagging when users interact with the filter sidebar. Help me identify unnecessary re-renders and suggest where to place memoization or Suspense boundaries."
Tips & Limitations
To get the best results, always provide the skill with specific file snippets rather than asking for general advice. While the skill excels at identifying architectural bottlenecks, performance is highly context-dependent; always profile your application using Chrome DevTools or the Next.js profiler to verify the impact of proposed changes. Note that this skill does not execute code directly; it provides refactoring guidance based on best practices and proven performance patterns.
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-wpank-react-performance": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
mermaid-diagrams
Create software diagrams using Mermaid syntax. Use when users need to create, visualize, or document software through diagrams including class diagrams, sequence diagrams, flowcharts, ERDs, C4 architecture diagrams, state diagrams, git graphs, and other diagram types. Triggers include requests to diagram, visualize, model, map out, or show the flow of a system.
api-design-principles
Skill by wpank
auto-context
Automatically read relevant context before major actions. Loads TODO.md, roadmap.md, handoffs, task plans, and other project context files so the AI operates with full situational awareness. Use when starting a task, implementing a feature, refactoring, debugging, planning, or resuming a session.
clear-writing
Write clear, concise prose for humans — documentation, READMEs, API docs, commit messages, error messages, UI text, reports, and explanations. Combines Strunk's rules for clearer prose with technical documentation patterns, structure templates, and review checklists.
track-performance
Track the performance of Uniswap LP positions over time — check which positions need attention, are out of range, or have uncollected fees. Use when the user asks how their positions are doing.