免费在 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.

中文简介正在准备中。当前显示原文说明。

tdimino/claude-code-minoan

集成工具Vercel

查看安装方法

包含的文件（3）

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

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

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:

Priority	Category	Impact
1	Eliminating Waterfalls	CRITICAL
2	Bundle Size Optimization	CRITICAL
3	Server-Side Performance	HIGH
4	Client-Side Data Fetching	MEDIUM-HIGH
5	Re-render Optimization	MEDIUM
6	Rendering Performance	MEDIUM
7	JavaScript Performance	LOW-MEDIUM
8	Advanced Patterns	LOW

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/

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能

academic-research

免费

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.

中文简介正在准备中。当前显示原文说明。