react-best-practicesReact and Next.js performance optimization guidelines from Vercel Engineering. 57 rules across 8 categories for writing, reviewing, and refactoring React code.
Install via ClawdBot CLI:
clawdbot install wpank/react-best-practicesGrade 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/shuding/better-all](https://github.com/shuding/better-allAudited Apr 16, 2026 · audit v1.0
Generated Mar 1, 2026
An e-commerce site built with Next.js needs to reduce page load times and eliminate request waterfalls during product listing and checkout flows. This skill helps implement async-parallel fetching for product data and dynamic imports for heavy components like product carousels, improving conversion rates.
A SaaS application with React-based dashboards experiences slow renders due to excessive re-renders from state updates. Using rules like rerender-memo and rerender-derived-state-no-effect, developers can optimize component performance, ensuring smooth user interactions for real-time data displays.
A media streaming platform uses React for its frontend and struggles with bundle size affecting initial load times on mobile devices. Applying bundle-dynamic-imports and bundle-preload rules allows deferring non-critical scripts and lazy-loading video player components, enhancing user experience.
A financial tool built with Next.js requires efficient server-side rendering for data-heavy charts and tables to handle concurrent user requests. Implementing server-cache-lru and server-parallel-fetching rules optimizes data caching and reduces server response times, crucial for real-time analytics.
This skill supports SaaS companies by improving application performance, leading to higher user retention and reduced churn. Optimized bundle sizes and faster renders enhance the user experience, justifying premium subscription tiers and upselling opportunities.
For e-commerce platforms, applying these rules reduces page load times and minimizes re-renders, directly boosting sales conversions and average order value. Faster sites improve SEO rankings and customer satisfaction, driving increased transaction volumes.
Web development agencies can leverage this skill to offer performance optimization audits and refactoring services to clients. By implementing critical rules like async-defer-await and bundle-optimization, agencies deliver measurable improvements, charging project-based or retainer fees.
💬 Integration Tip
Start by auditing existing code for waterfalls and bundle bloat using the priority categories, then incrementally apply high-impact rules like async-parallel and bundle-dynamic-imports to avoid overwhelming changes.
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.