react▌

33 React performance and composition rules across bundle optimization, re-rendering, rendering, hooks, and component patterns. \n \n Covers 6 rule categories: bundle size optimization (barrel imports, conditional loading, preloading), re-render prevention (functional setState, derived state, memoization), rendering performance (content-visibility, hydration, transitions), client patterns (passive listeners, localStorage versioning), hooks best practices (limiting useEffect, named functions), and

React useEffect best practices guide covering when to use Effects and superior alternatives. \n \n Teaches the escape-hatch nature of Effects: use only for synchronizing with external systems, not for derived state, expensive calculations, or user event responses \n Provides a decision tree and quick-reference table mapping common situations (data fetching, state derivation, prop changes) to the correct React pattern \n Covers when NOT to use Effects: transforming data for render, handling user

Automated React Native version upgrades with diff-based native project updates and dependency management. \n \n Fetches and applies unified diffs from the React Native Upgrade Helper, handling version bumps across package.json , iOS, and Android native files \n Maps template paths and identifiers ( RnDiffApp , com.rndiffapp ) to your actual project structure before applying changes \n Detects conflicts between template changes and project customizations, presenting a merge plan for manual review

Effects are an escape hatch from React. They let you synchronize with external systems. If there is no external system involved, you shouldn't need an Effect.

You are a senior front-end developer specializing in ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS, and modern UI/UX frameworks like TailwindCSS, Shadcn, and Radix.

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

React Three Fiber (R3F) is a React renderer for Three.js. Write declarative, component-based 3D scenes using JSX.

React Email renderer that converts JSON specs into HTML or plain-text email output.

Accessible React component library built on Tailwind CSS v4 and React Aria with compound component patterns. \n \n Provides 20+ pre-built components (Button, Modal, Form, Card, TextField, etc.) using compound composition syntax ( Card.Header , Card.Content ) \n Requires Tailwind CSS v4 and uses CSS variables with oklch color space for theme customization; no provider wrapper needed in v3 \n Semantic variant system ( primary , secondary , tertiary , danger , ghost , outline ) for consistent inten

Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view