How do I install the React Best Practices skill?

Run npx skillmds@latest add tomevault-io/react-best-practices-13 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is React Best Practices safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with React Best Practices?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is React Best Practices free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published React Best Practices?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

React Best Practices by tomevault-io

Name: React Best Practices
Author: tomevault-io

File contents

When to Use

Writing React/Next.js components
Data fetching implementation
Performance review
Bundle size optimization

Categories by Priority

Critical Priority

Waterfall Elimination

- Avoid sequential data fetching
- Use parallel data fetching
- Implement proper loading states
- Prefetch critical data

Bundle Optimization

- Minimize client-side JavaScript
- Use dynamic imports
- Tree-shake unused code
- Analyze bundle with tools

High Priority

Server-Side Performance

- Use Server Components by default
- Minimize 'use client' directives
- Implement streaming where possible
- Cache server responses

Medium-High Priority

Client-Side Fetching

- Use SWR or React Query
- Implement optimistic updates
- Handle loading/error states
- Cache API responses

Medium Priority

Rendering

- Avoid unnecessary re-renders
- Use React.memo strategically
- Implement useMemo/useCallback properly
- Virtualize long lists

Caching

- Implement proper cache headers
- Use ISR for dynamic content
- Cache database queries
- CDN caching strategies

Code Splitting

- Split by route
- Lazy load below-fold content
- Dynamic import heavy libraries
- Preload critical chunks

Low-Medium Priority

Image Optimization

- Use next/image
- Implement proper sizing
- Use modern formats (WebP, AVIF)
- Lazy load off-screen images

Execution Flow

1. Identify optimization area
2. Check relevant category rules
3. Apply recommendations
4. Verify improvements

Scripts

See scripts/ directory for automation helpers.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: react-best-practices-13description: React/Next.js performance optimization with 40+ rules in 8 categories Use when this capability is needed.---## When to Use- Writing React/Next.js components- Data fetching implementation- Performance review- Bundle size optimization## Categories by Priority### Critical Priority#### Waterfall Elimination```- Avoid sequential data fetching- Use parallel data fetching- Implement proper loading states- Prefetch critical data```#### Bundle Optimization```- Minimize client-side JavaScript- Use dynamic imports- Tree-shake unused code- Analyze bundle with tools```### High Priority#### Server-Side Performance```- Use Server Components by default- Minimize 'use client' directives- Implement streaming where possible- Cache server responses```### Medium-High Priority#### Client-Side Fetching```- Use SWR or React Query- Implement optimistic updates- Handle loading/error states- Cache API responses```### Medium Priority#### Rendering```- Avoid unnecessary re-renders- Use React.memo strategically- Implement useMemo/useCallback properly- Virtualize long lists```#### Caching```- Implement proper cache headers- Use ISR for dynamic content- Cache database queries- CDN caching strategies```#### Code Splitting```- Split by route- Lazy load below-fold content- Dynamic import heavy libraries- Preload critical chunks```### Low-Medium Priority#### Image Optimization```- Use next/image- Implement proper sizing- Use modern formats (WebP, AVIF)- Lazy load off-screen images```## Execution Flow```1. Identify optimization area2. Check relevant category rules3. Apply recommendations4. Verify improvements```## ScriptsSee `scripts/` directory for automation helpers.---> Converted and distributed by [TomeVault](https://tomevault.io/claim/baekenough) — claim your Tome and manage your conversions.

Frequently asked questions

React Best Practices