Rules(73)

AGENTS.md—Expanded instruction guide for react-best-practices.

rules/_sections.md—Rule file rules/_sections.md

rules/_template.md—Rule file rules/_template.md

rules/advanced-effect-event-deps.md—Rule file rules/advanced-effect-event-deps.md

rules/advanced-event-handler-refs.md—Rule file rules/advanced-event-handler-refs.md

rules/advanced-init-once.md—Rule file rules/advanced-init-once.md

rules/advanced-use-latest.md—Rule file rules/advanced-use-latest.md

rules/async-api-routes.md—Rule file rules/async-api-routes.md

rules/async-cheap-condition-before-await.md—Rule file rules/async-cheap-condition-before-await.md

rules/async-defer-await.md—Rule file rules/async-defer-await.md

rules/async-dependencies.md—Rule file rules/async-dependencies.md

rules/async-parallel.md—Rule file rules/async-parallel.md

rules/async-suspense-boundaries.md—Rule file rules/async-suspense-boundaries.md

rules/bundle-analyzable-paths.md—Rule file rules/bundle-analyzable-paths.md

rules/bundle-barrel-imports.md—Rule file rules/bundle-barrel-imports.md

rules/bundle-conditional.md—Rule file rules/bundle-conditional.md

rules/bundle-defer-third-party.md—Rule file rules/bundle-defer-third-party.md

rules/bundle-dynamic-imports.md—Rule file rules/bundle-dynamic-imports.md

rules/bundle-preload.md—Rule file rules/bundle-preload.md

rules/client-event-listeners.md—Rule file rules/client-event-listeners.md

rules/client-localstorage-schema.md—Rule file rules/client-localstorage-schema.md

rules/client-passive-event-listeners.md—Rule file rules/client-passive-event-listeners.md

rules/client-swr-dedup.md—Rule file rules/client-swr-dedup.md

rules/js-batch-dom-css.md—Rule file rules/js-batch-dom-css.md

rules/js-cache-function-results.md—Rule file rules/js-cache-function-results.md

rules/js-cache-property-access.md—Rule file rules/js-cache-property-access.md

rules/js-cache-storage.md—Rule file rules/js-cache-storage.md

rules/js-combine-iterations.md—Rule file rules/js-combine-iterations.md

rules/js-early-exit.md—Rule file rules/js-early-exit.md

rules/js-flatmap-filter.md—Rule file rules/js-flatmap-filter.md

rules/js-hoist-regexp.md—Rule file rules/js-hoist-regexp.md

rules/js-index-maps.md—Rule file rules/js-index-maps.md

rules/js-length-check-first.md—Rule file rules/js-length-check-first.md

rules/js-min-max-loop.md—Rule file rules/js-min-max-loop.md

rules/js-request-idle-callback.md—Rule file rules/js-request-idle-callback.md

rules/js-set-map-lookups.md—Rule file rules/js-set-map-lookups.md

rules/js-tosorted-immutable.md—Rule file rules/js-tosorted-immutable.md

rules/rendering-activity.md—Rule file rules/rendering-activity.md

rules/rendering-animate-svg-wrapper.md—Rule file rules/rendering-animate-svg-wrapper.md

rules/rendering-conditional-render.md—Rule file rules/rendering-conditional-render.md

rules/rendering-content-visibility.md—Rule file rules/rendering-content-visibility.md

rules/rendering-hoist-jsx.md—Rule file rules/rendering-hoist-jsx.md

rules/rendering-hydration-no-flicker.md—Rule file rules/rendering-hydration-no-flicker.md

rules/rendering-hydration-suppress-warning.md—Rule file rules/rendering-hydration-suppress-warning.md

rules/rendering-resource-hints.md—Rule file rules/rendering-resource-hints.md

rules/rendering-script-defer-async.md—Rule file rules/rendering-script-defer-async.md

rules/rendering-svg-precision.md—Rule file rules/rendering-svg-precision.md

rules/rendering-usetransition-loading.md—Rule file rules/rendering-usetransition-loading.md

rules/rerender-defer-reads.md—Rule file rules/rerender-defer-reads.md

rules/rerender-dependencies.md—Rule file rules/rerender-dependencies.md

rules/rerender-derived-state-no-effect.md—Rule file rules/rerender-derived-state-no-effect.md

rules/rerender-derived-state.md—Rule file rules/rerender-derived-state.md

rules/rerender-functional-setstate.md—Rule file rules/rerender-functional-setstate.md

rules/rerender-lazy-state-init.md—Rule file rules/rerender-lazy-state-init.md

rules/rerender-memo-with-default-value.md—Rule file rules/rerender-memo-with-default-value.md

rules/rerender-memo.md—Rule file rules/rerender-memo.md

rules/rerender-move-effect-to-event.md—Rule file rules/rerender-move-effect-to-event.md

rules/rerender-no-inline-components.md—Rule file rules/rerender-no-inline-components.md

rules/rerender-simple-expression-in-memo.md—Rule file rules/rerender-simple-expression-in-memo.md

rules/rerender-split-combined-hooks.md—Rule file rules/rerender-split-combined-hooks.md

rules/rerender-transitions.md—Rule file rules/rerender-transitions.md

rules/rerender-use-deferred-value.md—Rule file rules/rerender-use-deferred-value.md

rules/rerender-use-ref-transient-values.md—Rule file rules/rerender-use-ref-transient-values.md

rules/server-after-nonblocking.md—Rule file rules/server-after-nonblocking.md

rules/server-auth-actions.md—Rule file rules/server-auth-actions.md

rules/server-cache-lru.md—Rule file rules/server-cache-lru.md

rules/server-cache-react.md—Rule file rules/server-cache-react.md

rules/server-dedup-props.md—Rule file rules/server-dedup-props.md

rules/server-hoist-static-io.md—Rule file rules/server-hoist-static-io.md

rules/server-no-shared-module-state.md—Rule file rules/server-no-shared-module-state.md

rules/server-parallel-fetching.md—Rule file rules/server-parallel-fetching.md

rules/server-parallel-nested-fetching.md—Rule file rules/server-parallel-nested-fetching.md

rules/server-serialization.md—Rule file rules/server-serialization.md

written by Forgecat

Forgecat

Vercel React Best Practices

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Installation

npx forgecat install @forgecat/vercel-labs_agent-skills_react-best-practices

Skills

vercel-react-best-practices — React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

Details

Field	Value
Author	vercel
Original repository	https://github.com/vercel-labs/agent-skills
Version	`0.0.0`
Original commit	`47863b2`
License	MIT
Source platform	Claude Code skills (Agent Skills format)

Compatibility

Platforms

Platform	Status
Claude Code	Tested
Cursor	Partial
Codex	Partial

Dependencies

None

written by original source

React Best Practices

A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.

Structure

rules/ - Individual rule files (one per rule)
- _sections.md - Section metadata (titles, impacts, descriptions)
- _template.md - Template for creating new rules
- area-description.md - Individual rule files
src/ - Build scripts and utilities
metadata.json - Document metadata (version, organization, abstract)
AGENTS.md - Compiled output (generated)
test-cases.json - Test cases for LLM evaluation (generated)

Getting Started

Install dependencies:

pnpm install
Build AGENTS.md from rules:

pnpm build
Validate rule files:

pnpm validate
Extract test cases:

pnpm extract-tests

Creating a New Rule

Copy rules/_template.md to rules/area-description.md
Choose the appropriate area prefix:
- async- for Eliminating Waterfalls (Section 1)
- bundle- for Bundle Size Optimization (Section 2)
- server- for Server-Side Performance (Section 3)
- client- for Client-Side Data Fetching (Section 4)
- rerender- for Re-render Optimization (Section 5)
- rendering- for Rendering Performance (Section 6)
- js- for JavaScript Performance (Section 7)
- advanced- for Advanced Patterns (Section 8)
Fill in the frontmatter and content
Ensure you have clear examples with explanations
Run pnpm build to regenerate AGENTS.md and test-cases.json

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):

// Good code example

Optional explanatory text after examples.

Reference: Link

File Naming Convention

Files starting with _ are special (excluded from build)
Rule files: area-description.md (e.g., async-parallel.md)
Section is automatically inferred from filename prefix
Rules are sorted alphabetically by title within each section
IDs (e.g., 1.1, 1.2) are auto-generated during build

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

Scripts

pnpm build - Compile rules into AGENTS.md
pnpm validate - Validate all rule files
pnpm extract-tests - Extract test cases for LLM evaluation
pnpm dev - Build and validate

Contributing

When adding or modifying rules:

Use the correct filename prefix for your section
Follow the _template.md structure
Include clear bad/good examples with explanations
Add appropriate tags
Run pnpm build to regenerate AGENTS.md and test-cases.json
Rules are automatically sorted by title - no need to manage numbers!

Acknowledgments

Originally created by @shuding at Vercel.

heating the forge...

vercel-labs_agent-skills_react-best-practices

Who I Am

Skills(1)

Rules(73)

README.md

Vercel React Best Practices

Tags

Installation

Skills

Details

Compatibility

Platforms

Dependencies

React Best Practices

Structure

Getting Started

Creating a New Rule

Rule File Structure

File Naming Convention

Impact Levels

Scripts

Contributing

Acknowledgments

Tags

Creator

Details

Platforms

Models

Dependencies