Skip to content
cccskills
FreePublished on GitHub

react-best-practices

Apply React and Next.js performance optimization guidelines from Vercel Engineering — 40+ rules covering components, data fetching, bundle optimization, and rendering. Triggers on React components, Next.js pages, bundle optimization, performance improvements, refactoring React code.

The English summary is being prepared. Showing the original description.

Works withVercel
See how to install

Files included (3)

  • SKILL.md3.0 KB
  • README.md2.4 KB
  • references/react-performance-guidelines.md45.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

React Best Practices

Overview

Comprehensive performance optimization guide for React and Next.js applications, containing 40+ rules across 8 categories. Rules are prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

  • Writing new React components or Next.js pages
  • Implementing data fetching (client or server-side)
  • Reviewing code for performance issues
  • Refactoring existing React/Next.js code
  • Optimizing bundle size or load times

Priority-Ordered Guidelines

Rules are prioritized by impact:

PriorityCategoryImpact
1Eliminating WaterfallsCRITICAL
2Bundle Size OptimizationCRITICAL
3Server-Side PerformanceHIGH
4Client-Side Data FetchingMEDIUM-HIGH
5Re-render OptimizationMEDIUM
6Rendering PerformanceMEDIUM
7JavaScript PerformanceLOW-MEDIUM
8Advanced PatternsLOW

Quick Reference

Critical Patterns (Apply First)

Eliminate Waterfalls:

  • Defer await until needed (move into branches)
  • Use Promise.all() for independent async operations
  • Start promises early, await late
  • Use better-all for partial dependencies
  • Use Suspense boundaries to stream content

Reduce Bundle Size:

  • Avoid barrel file imports (import directly from source)
  • Use next/dynamic for heavy components
  • Defer non-critical third-party libraries
  • Preload based on user intent

High-Impact Server Patterns

  • Use React.cache() for per-request deduplication
  • Use LRU cache for cross-request caching
  • Minimize serialization at RSC boundaries
  • Parallelize data fetching with component composition

Medium-Impact Client Patterns

  • Use SWR for automatic request deduplication
  • Defer state reads to usage point
  • Use lazy state initialization for expensive values
  • Use derived state subscriptions
  • Apply startTransition for non-urgent updates

Rendering Patterns

  • Animate SVG wrappers, not SVG elements directly
  • Use content-visibility: auto for long lists
  • Prevent hydration mismatch with inline scripts
  • Use explicit conditional rendering (? : not &&)

JavaScript Patterns

  • Batch DOM CSS changes via classes
  • Build index maps for repeated lookups
  • Cache repeated function calls
  • Use toSorted() instead of sort() for immutability
  • Early length check for array comparisons

References

Full documentation with code examples is available in:

  • references/react-performance-guidelines.md - Complete guide with all patterns

To look up a specific pattern, grep the references:

grep -l "suspense" references/
grep -l "barrel" references/
grep -l "swr" references/

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

Search academic papers, build literature reviews, and synthesize research findings — combines Exa search (publication category, domain and date filters) with arxiv-mcp-server for paper discovery, download, and deep analysis. Triggers on academic paper, literature review, research synthesis, arxiv, find papers, scholarly search.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 20, 2026

Automates browser interactions for web testing, form filling, screenshots, and data extraction. Use when the user needs to navigate websites, interact with web pages, fill forms, take screenshots, test web applications, or extract information from web pages.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 20, 2026

This skill should be used when creating, auditing, or maintaining AGENTS.md files and Codex CLI configuration for any project—including initializing AGENTS.md for cross-agent compatibility (Codex, Cursor, Copilot, Devin, Jules, Amp, Gemini CLI), generating config.toml or .rules files, scaffolding .agents/skills/, converting CLAUDE.md to AGENTS.md, or auditing existing agent configs for bloat and staleness. Complementary to codex-orchestrator (which executes subagents; this skill creates the config files they consume).

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 20, 2026

Academic research skill for Biblical Hebrew, Semitic linguistics, cuneiform studies, and comparative Ancient Near Eastern research. Provides Sefaria API for Hebrew Bible, CDLI/ORACC for cuneiform databases, and web discovery via Omnisearch, Exa, Firecrawl, and Obscura for finding scholarly sources across JSTOR, Perseus, Persée, Google Scholar, and academia.edu. Triggers on Hebrew quotes, cuneiform, Sefaria, ANE research, Minoan, search for scholarship, find papers, literature review, scholarly search, academic search, Genesis/Tehom, Ugaritic, Talmudic sources, extract from PDF, OCR academic.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 20, 2026

Build comprehensive ARCHITECTURE.md files following matklad's canonical guidelines — bird's-eye views, ASCII/Mermaid diagrams, codemaps, invariants, and layer boundaries. Triggers on document the architecture, create ARCHITECTURE.md, map this codebase, architectural overview.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 20, 2026

Generate physically-based atmospheric scattering shaders — sky domes, planetary atmospheres, LUT-optimized pipelines, depth-aware post-processing. Four modes — sky-dome, atmosphere-post, planet, lut. Triggers on atmospheric scattering, sky shader, sunset rendering, planet atmosphere, Rayleigh scattering, Mie scattering, volumetric sky, sky dome, atmosphere post-processing, aerial perspective, transmittance LUT, sky rendering, realistic sky, planetary rendering.

The English summary is being prepared. Showing the original description.

tdimino/claude-code-minoan41Updated Oct 20, 2026

See all skills by tdimino

Report a problem with this skill