react-performanceReact 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.
Install via ClawdBot CLI:
clawdbot install wpank/react-performanceGrade Fair — based on market validation, documentation quality, package completeness, maintenance status, and authenticity signals.
Calls external URL not in known-safe list
https://github.com/wpank/ai/tree/main/skills/frontend/react-performanceAudited Apr 17, 2026 · audit v1.0
Generated Mar 1, 2026
A retail company is building a Next.js product page that loads user reviews, inventory status, and related items sequentially, causing slow load times. Applying async patterns to parallelize data fetching and using Suspense boundaries can show the layout immediately while data streams in, improving user experience and conversion rates.
A SaaS platform has a React dashboard with heavy components like charts and editors that increase bundle size, leading to slow initial loads. Implementing dynamic imports for non-critical components and optimizing barrel file imports can reduce bundle size by hundreds of milliseconds, enhancing user retention.
A media company uses Next.js server components to render article pages but serializes excessive data across boundaries, slowing down page generation. Minimizing serialization and using React.cache() for deduplication can reduce server load and improve time-to-first-byte for high-traffic sites.
A fintech app has React components with redundant state updates and effects that cause unnecessary re-renders during real-time data updates. Deriving state during render instead of in effects can optimize performance for interactive charts and tables, ensuring smooth user interactions.
A healthcare portal built with React fetches patient data, appointments, and records in a waterfall pattern, delaying critical information display. Parallelizing independent operations and deferring awaits until needed can speed up data retrieval, improving efficiency for medical staff.
Companies offering performance monitoring or optimization tools as a service, where users pay monthly fees for access to analytics and automated suggestions. Revenue is generated through tiered pricing plans based on usage or features, targeting mid to large-scale enterprises.
Agencies specializing in React and Next.js performance audits and refactoring, charging project-based fees or hourly rates for code reviews and optimizations. Revenue comes from one-time engagements or retainer contracts with clients in e-commerce or tech industries.
Developers creating open-source libraries or plugins with premium features for advanced optimization, such as bundle analyzers or caching utilities. Revenue is generated through paid upgrades, sponsorships, or enterprise licenses, appealing to individual developers and teams.
💬 Integration Tip
Integrate this skill during code reviews or refactoring phases by setting up automated checks for common performance issues like sequential awaits and large bundle imports.
Scored Apr 19, 2026
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Frontend development with React, Next.js, Tailwind CSS. Build landing pages, dashboards, forms, components. Responsive, accessible, performant UI.
Use when building Next.js 14/15 applications with the App Router. Invoke for routing, layouts, Server Components, Client Components, Server Actions, Route Handlers, authentication, middleware, data fetching, caching, revalidation, streaming, Suspense, loading states, error boundaries, dynamic routes, parallel routes, intercepting routes, or any Next.js architecture question.
Write Tailwind utility classes with proper responsive design, dark mode, and configuration.
Create distinctive, production-grade static sites with React, Tailwind CSS, and shadcn/ui — no mockups needed. Generates bold, memorable designs from plain text requirements with anti-AI-slop aesthetics, mobile-first responsive patterns, and single-file bundling. Use when building landing pages, marketing sites, portfolios, dashboards, or any static web UI. Supports both Vite (pure static) and Next.js (Vercel deploy) workflows.
Look up domain WHOIS/RDAP info and check marketplace listings. Free API, no auth required.