What problem does it solve?
This Skill helps you write, review, and refactor React and Next.js code for better performance, cleaner data flow, and more reliable agent-driven implementation. It focuses on preventing waterfalls, reducing bundle bloat, improving rendering efficiency, and avoiding common re-render and hydration pitfalls.
Core Features & Use Cases
- Waterfall elimination: Reorder async work, parallelize independent fetches, and add Suspense boundaries to speed up initial paint.
- Bundle optimization: Prefer direct imports, code splitting, deferred third-party loading, and user-intent preloading to reduce initial load costs.
- Server and client performance: Apply caching, serialization minimization, SWR deduplication, and non-blocking server patterns to keep apps responsive.
- React rendering best practices: Improve memoization, state updates, effect dependencies, and conditional rendering for smoother UI behavior.
- Use case: Review a Next.js page that feels slow, identify the hidden sequential awaits and oversized imports, and rewrite it into a faster, production-ready version.
Quick Start
Ask me to audit a React or Next.js component for performance issues and suggest safe, best-practice refactors.
