react-perf
React and Next.js performance optimization patterns. Use when writing, reviewing, or optimizing React code for web apps, Remotion videos, or any React-based UI. Covers waterfall elimination, bundle optimization, re-render prevention, and server-side patterns.
Why use this skill?
Master React and Next.js performance with expert optimization patterns. Reduce bundle sizes, eliminate waterfalls, and fix re-render issues with this AI agent skill.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/kjaylee/react-perfWhat This Skill Does
The react-perf skill is a specialized knowledge-based agent tool designed to help developers architect, audit, and optimize React and Next.js applications. It encodes expert-level patterns to prevent common performance pitfalls, such as rendering bottlenecks, excessive bundle sizes, and network waterfalls. Whether you are building high-traffic web applications, complex dashboards, or dynamic Remotion video compositions, this skill provides actionable advice on streamlining codebases and improving Core Web Vitals.
Installation
To install this skill, run the following command in your terminal:
clawhub install openclaw/skills/skills/kjaylee/react-perf
Use Cases
- Web Application Audit: Use this to analyze existing components for unnecessary re-renders or high CPU tasks.
- Bundle Optimization: Use this when your lighthouse scores are low due to large JavaScript payloads or heavy dependency bloat.
- Network Performance: Use this to restructure data fetching patterns in Next.js Server Components to prevent cascading request waterfalls.
- Remotion Video Production: Use this to optimize high-frame-rate video components that require efficient computation.
Example Prompts
- "I am seeing a lot of layout shifts in my Next.js page. Can you review this component and suggest optimizations to reduce the waterfall?"
- "My React app feels laggy when typing in the search bar. Help me identify if I have unnecessary re-renders and show me how to use refs or memoization to fix it."
- "I have a large data array I'm rendering in a list. How can I optimize this for performance using react-perf patterns?"
Tips & Limitations
The react-perf skill focuses on static code analysis and architectural patterns. It works best when provided with specific code snippets or component descriptions. While it can suggest advanced optimizations like startTransition or React.cache(), it cannot execute code against your production database or monitor real-time user traffic. For the best results, pair this skill with actual performance profiles from Chrome DevTools or Lighthouse reports. Remember that over-optimization can sometimes reduce code readability, so apply these patterns selectively where performance is a verified bottleneck.
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-kjaylee-react-perf": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Related Skills
ui-ux-pro-max
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS, React, Next.js, Vue, Svelte, Tailwind). Includes workflows for (1) generating new UI layouts and styling, (2) improving existing UI/UX, (3) producing design-system tokens and component guidelines, and (4) turning UX recommendations into concrete code changes.
ralph-loop
AI 자율 구현 방법론. 구현/개발/코딩 요청 시 자동 적용. 메인은 마더 서브에이전트를 spawn하고, 마더가 워커들을 관리. specs/ → IMPLEMENTATION_PLAN.md → 1태스크씩 구현 → 2단계 리뷰 → 테스트 → 반복.
game-dev-rust-godot
Game development workflow using Rust+WASM or Godot 4.x for HTML5 games. Use when creating new games, implementing game mechanics, or porting existing games. Follows TDD-based production pipeline v3.1 with asset-first approach. Covers Rust(Macroquad/Bevy), Godot HTML5 Export, asset acquisition, test case writing, and QA automation. Master directive (2026-02-06) - ONLY Rust+WASM or Godot allowed, JS/TS frameworks prohibited.
subagent-dev
Execute implementation plans using fresh subagents per task with two-stage review (spec compliance + code quality). Use when executing multi-task plans with independent work units. Enhances ralph-loop methodology.
systematic-debugging
Root-cause-first debugging methodology. Use when encountering any bug, test failure, or unexpected behavior BEFORE proposing fixes. Prevents random fix attempts that waste time and create new bugs.