skills.rest
retrip-ai
retrip-aiOFFICIAL
Explore all skills by this author →
Website𝕏@retrip_aiGitHub

react-best-practices

Identify and optimize React performance pitfalls in Tanstack Start applications.

2|Updated Jan 14, 2026
Search Tags:#performance#react#refactor#code-review#bundle-size#tanstack-start
One-click install
npx skills add https://github.com/retrip-ai/agent-skills --skill react-best-practices-retrip-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/retrip-ai/agent-skills/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/retrip-ai/agent-skills --skill react-best-practices-retrip-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill consolidates React performance guidelines tailored for Tanstack Start applications, helping teams avoid common inefficiencies in components, data fetching, and bundling, and guiding automated improvements during refactoring and code reviews.

Core Features & Use Cases

  • 37+ rules across 8 categories to prioritize impact and provide actionable patterns.
  • Guidance for eliminating waterfalls, bundle size optimization, server-side rendering patterns, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns.
  • Use cases include writing new components, reviewing performance issues, refactoring existing code, and optimizing Tanstack Start, Query, and Router integration.

Quick Start

Use this skill to audit a React codebase and generate targeted refactoring prompts and implementation steps.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React performance issues in a Tanstack Start application?▼

Eliminate data fetching waterfalls in React by applying specific performance patterns for Tanstack Query and Tanstack Router integration, prioritizing parallel fetching and prefetching strategies outlined in the guidelines.

How do I reduce bundle size when using Tanstack Start and Tanstack Router?▼

Reduce bundle size in Tanstack Start by following dedicated optimization rules for code splitting, server-side rendering patterns, and JavaScript micro-optimizations provided within the performance guidelines.

Can I use this to guide refactoring and code reviews for React components?▼

Yes, you can audit a React codebase using these 37+ rules to identify re-render optimization opportunities, data fetching waterfalls, and bundle size issues, then generate targeted refactoring prompts and implementation steps.

What is the best way to prevent unnecessary re-renders in Tanstack Query?▼

Prevent unnecessary re-renders in Tanstack Query by applying specific rendering performance rules and client-side data fetching patterns designed to optimize component rendering across client and server contexts.

Does this React performance skill work for both client-side and server-side rendering contexts?▼

Yes, the performance guidelines apply to both client and server contexts, offering advanced patterns for server-side rendering and client-side data fetching within Tanstack Start, Tanstack Query, and Tanstack Router.

Related Skills

Explore More Software Engineering Skills→
wsimmondswsimmonds
109

nextjs-app-router-fundamentals

Migrate Next.js Pages Router projects to App Router conventions.

Community
Basic
georgekhananaevgeorgekhananaev
27

react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

Community
Advanced
balkhaevbalkhaev

vercel-react-best-practices

Enforce 70+ performance rules for React and Next.js applications.

Community
Advanced
blueprintuiblueprintui
335

testing-performance

Detect and prevent performance regressions in bundle size and render time.

Official
Intermediate