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
Build or update the BlueBubbles external channel plugin for Clawdbot (extension package, REST send/probe, webhook inbound).
Expert frontend design guidelines for creating beautiful, modern UIs. Use when building landing pages, dashboards, or any user interface.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when building web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
Curated collection of professional color and typography themes for styling artifacts — slides, docs, reports, landing pages. Use when applying visual themes to presentations, generating themed content, or creating custom brand palettes. Triggers on theme, color palette, font pairing, slide styling, presentation theme, brand colors.
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.