ck:react-best-practices

Name: ck:react-best-practices
Availability: InStock
Author: EdgeHunt

Detect and fix React/Next.js performance anti-patterns using Vercel best practices.

Updated Apr 2, 2026

Search Tags:#performance #react #refactor #server #nextjs #bundle #client

Ready to run

npx skills add https://github.com/EdgeHunt/EdgeHunt --skill ck-react-best-practices-edgehunt

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ck:react-best-practices
Source: https://github.com/EdgeHunt/EdgeHunt/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/EdgeHunt/EdgeHunt --skill ck-react-best-practices-edgehunt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a comprehensive set of React/Next.js performance guidelines to optimize load times, bundle size, and server/client rendering, enabling teams to write, review, and refactor code with confidence. This skill contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Core Features & Use Cases

45 rules across 8 categories (async, bundle, server, client, rerender, rendering, js, advanced) to guide development and reviews.
Actionable patterns, real-world examples, and concrete refactoring guidance for reducing waterfalls, shrinking bundles, and speeding SSR/CSR.
Triggers on tasks involving React components, Next.js pages, data fetching, and performance improvements, supporting automated tooling and code-generation workflows.

Quick Start

Review a React/Next.js component or page against the rule set and apply the recommended patterns to improve performance.

Frequently Asked Questions about ck:react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix React performance anti-patterns in a Next.js project?▼

To fix React performance anti-patterns, apply Vercel best practices to detect and resolve issues in components and pages, reducing waterfalls, optimizing bundles, and improving SSR/CSR rendering.

What's the best way to reduce bundle size and speed up SSR in Next.js?▼

The best way to speed up Next.js SSR and reduce bundle size is applying rule-based patterns for lazy loading, parallel data fetching, and safe serialization to optimize client and server rendering.

How do I refactor React data fetching to prevent request waterfalls?▼

Refactor React data fetching to prevent request waterfalls by switching sequential fetching to parallel data fetching patterns, utilizing per-request caching and safe serialization for optimized loading.

Does this React performance guidelines rule set support automated code reviews?▼

Yes, the React performance guidelines support automated tooling and code-generation workflows by providing 45 prioritized rules across 8 categories with concrete refactoring guidance for reviewing components.

When should I apply lazy loading and per-request caching in React components?▼

Apply lazy loading and per-request caching in React components when optimizing bundle size and data-fetching logic, specifically to reduce render waterfalls and improve client-side rendering performance.