react-patterns

Identify and fix React 19 performance issues in Vite and Cloudflare Workers components.

Updated May 23, 2026
One-click install
npx skills add https://github.com/devturco/thiago-dev-template --skill react-patterns-devturco
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/devturco/thiago-dev-template/tree/main/.claude/skills/react-patterns
Command: npx skills add https://github.com/devturco/thiago-dev-template --skill react-patterns-devturco

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you stop slow UI, wasted renders, and tangled component APIs by enforcing practical React 19 + Vite + Cloudflare performance and architecture patterns.

Core Features & Use Cases

  • Eliminates waterfalls by identifying sequential async work and restructuring with parallelism and better data-flow boundaries.
  • Reduces bundle size by flagging anti-pattern imports and missing code-splitting opportunities.
  • Improves composition architecture by replacing boolean-prop explosions and overly complex components with variants and compound/named-slot structures.
  • Prevents unnecessary re-renders by detecting unstable props and derive-on-effect mistakes, then steering toward memoization and stable dependencies.
  • Covers React 19 specifics like new hooks/APIs and React 19 behavior changes that impact UI correctness and performance.
  • Provides a review checklist workflow for auditing components using priority-ranked findings (CRITICAL → MEDIUM).

Quick Start

Use the react-patterns skill on a component file path like /src/components/UserDashboard.tsx, then report findings as file:line — [rule] description of issue.

Frequently Asked Questions about react-patterns

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

FAQPage Schema
How do I fix unnecessary React 19 re-renders and waterfall async flows?▼

Fix React 19 re-renders and waterfall async flows by identifying sequential data fetching and unstable props, then restructuring components with parallel data execution and stable dependency boundaries to reduce wasted renders.

How do I reduce React bundle size caused by anti-pattern imports?▼

Reduce React bundle size by flagging anti-pattern imports and missing code-splitting opportunities during component authoring or refactoring, enforcing structural changes that optimize bundle construction for Vite projects.

What is the best way to refactor complex React components with boolean-prop explosions?▼

Refactor complex React components by replacing boolean-prop explosions with component variants and compound or named-slot composition structures, improving architecture maintainability and enforcing a priority-ranked review checklist.

Can I audit specific React component files for performance issues?▼

Yes, you can audit specific React component files by providing a targeted file or component path like /src/components/UserDashboard.tsx, which generates actionable file:line issue reports ranked from CRITICAL to MEDIUM.

Does this React performance analysis work with Vite and Cloudflare Workers?▼

Yes, this React performance analysis supports Vite and Cloudflare Workers projects, checking React 19 API usage and composition patterns specific to that stack to prevent slow UI and tangled component APIs.