React Client Best Practices

A structured repository for creating and maintaining React client-side best practices optimized for agents and LLMs. Adapted from Vercel Engineering's React Best Practices, with server-side/SSR rules removed and additional client-focused rules added.

Structure

• rules/ - Individual rule files (one per rule)
• SKILL.md - Skill metadata and quick reference index

Rule Categories

Priority	Category	Prefix	Rules
1	Eliminating Waterfalls	async-	3
2	Bundle Size Optimization	bundle-	5
3	Client-Side Patterns	client-	6
4	Re-render Optimization	rerender-	17
5	Rendering Performance	rendering-	13
6	JavaScript Performance	js-	14
7	Advanced Patterns	advanced-	4
	Total		62

Creating a New Rule

1. Create a new file in rules/ following the naming convention: area-description.md
2. Choose the appropriate area prefix:
   • async- for Eliminating Waterfalls (Section 1)
   • bundle- for Bundle Size Optimization (Section 2)
   • client- for Client-Side Patterns (Section 3)
   • rerender- for Re-render Optimization (Section 4)
   • rendering- for Rendering Performance (Section 5)
   • js- for JavaScript Performance (Section 6)
   • advanced- for Advanced Patterns (Section 7)
3. Fill in the frontmatter and content
4. Ensure you have clear examples with explanations
5. Update SKILL.md quick reference and AGENTS.md compiled document

Rule File Structure

Each rule file should follow this structure:

---
title: Rule Title Here
impact: MEDIUM
impactDescription: Optional description
tags: tag1, tag2, tag3
---

## Rule Title Here

Brief explanation of the rule and why it matters.

**Incorrect (description of what's wrong):**

\`\`\`typescript
// Bad code example
\`\`\`

**Correct (description of what's right):**

\`\`\`typescript
// Good code example
\`\`\`

Optional explanatory text after examples.

Impact Levels

• CRITICAL - Highest priority, major performance gains
• HIGH - Significant performance improvements
• MEDIUM-HIGH - Moderate-high gains
• MEDIUM - Moderate performance improvements
• LOW-MEDIUM - Low-medium gains
• LOW - Incremental improvements

Dependency Policy

Rules should only reference React core APIs and standard browser APIs. External libraries (SWR, Redux, etc.) should not be recommended as the primary solution. If a library is mentioned, it should be as a supplementary note with the vanilla React/JS solution presented first.

Acknowledgments

Originally created by @shuding at Vercel.

Adapted for client-side-only usage by @javierscode.