React Patterns
Apply a ranked React 19 performance and composition checklist when building or fixing slow Vite + Cloudflare UI.
Overview
React Patterns is an agent skill most often used in Build (also Ship review and perf debugging) that applies 50+ ranked React 19 rules for waterfalls, bundles, re-renders, and composition on Vite + Cloudflare projects.
Install
npx skills add https://github.com/jezweb/claude-skills --skill react-patternsWhat is this skill?
- 50+ rules ranked by impact—fix CRITICAL waterfall issues before MEDIUM items
- CRITICAL section targets sequential async and parallelization fixes
- Re-render prevention, bundle optimization, and composition over boolean props
- React 19 APIs and server/client boundary guidance for Cloudflare-oriented projects
- Checklist for new components, audits, refactors, and pre-merge code review
- CRITICAL waterfall section prioritized before MEDIUM fixes
Adoption & trust: 822 installs on skills.sh; 841 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your React UI feels slow or re-renders constantly, but you lack an ordered checklist that separates waterfall fixes from bundle and composition work.
Who is it for?
Solo builders shipping React 19 frontends on Vite with Cloudflare who want a repeatable review and refactor playbook.
Skip if: Teams that only need generic React tutorials without performance ranking, or non-React stacks where Vite/Cloudflare boundaries do not apply.
When should I use this skill?
Writing or reviewing React components, refactoring prop-heavy UI, or when triggers like 'react patterns', 'react performance', 'why is it slow', or 'reduce re-renders' appear.
What do I get? / Deliverables
Components and pages follow impact-ranked React 19 patterns so critical waterfalls are fixed first and reviews catch perf issues before merge.
- Impact-ordered fix list applied to target components
- Refactor or review notes aligned to CRITICAL-then-MEDIUM rules
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill targets component and page implementation; it also supports pre-merge review and perf fixes that overlap Ship. Frontend is where waterfalls, bundle size, re-renders, and composition patterns live in the stack described (React 19 + Vite).
Where it fits
Apply CRITICAL waterfall rules while implementing a new dashboard page on Vite.
Run the ranked checklist on a PR that adds data-fetching components before merging.
Refactor boolean-prop sprawl and cut re-renders after users report sluggish interactions.
Design a reusable component library with composition patterns and React 19 APIs.
How it compares
Use as a ranked checklist during implementation and review instead of ad-hoc “make it faster” chat without CRITICAL-vs-MEDIUM ordering.
Common Questions / FAQ
Who is react-patterns for?
Solo and indie builders using Claude Code on React 19 + Vite (often with Cloudflare Workers) who write, review, or refactor UI and need impact-ordered performance and composition rules.
When should I use react-patterns?
During Build when writing components or libraries; during Ship when reviewing or refactoring before merge; and when debugging slow loads, waterfalls, or excess re-renders in production-like setups.
Is react-patterns safe to install?
The skill limits tools to Read, Glob, and Grep—no shell or network by default. Review the Security Audits panel on this Prism page before trusting any third-party skill in your repo.
SKILL.md
READMESKILL.md - React Patterns
# React Patterns Performance and composition patterns for React 19 + Vite + Cloudflare Workers projects. Use as a checklist when writing new components, a review guide when auditing existing code, or a refactoring playbook when something feels slow or tangled. Rules are ranked by impact. Fix CRITICAL issues before touching MEDIUM ones. ## When to Apply - Writing new React components or pages - Reviewing code for performance issues - Refactoring components with too many props or re-renders - Debugging "why is this slow?" or "why does this re-render?" - Building reusable component libraries - Code review before merging ## 1. Eliminating Waterfalls (CRITICAL) Sequential async calls where they could be parallel. The #1 performance killer. | Pattern | Problem | Fix | |---------|---------|-----| | **Await in sequence** | `const a = await getA(); const b = await getB();` | `const [a, b] = await Promise.all([getA(), getB()]);` | | **Fetch in child** | Parent renders, then child fetches, then grandchild fetches | Hoist fetches to the highest common ancestor, pass data down | | **Suspense cascade** | Multiple Suspense boundaries that resolve sequentially | One Suspense boundary wrapping all async siblings | | **Await before branch** | `const data = await fetch(); if (condition) { use(data); }` | Move await inside the branch — don't fetch what you might not use | | **Import then render** | `const Component = await import('./Heavy'); return <Component />` | Use `React.lazy()` + `<Suspense>` — renders fallback instantly | **How to find them**: Search for `await` in components. Each `await` is a potential waterfall. If two awaits are independent, they should be parallel. ## 2. Bundle Size (CRITICAL) Every KB the user downloads is a KB they wait for. | Pattern | Problem | Fix | |---------|---------|-----| | **Barrel imports** | `import { Button } from '@/components'` pulls the entire barrel file | `import { Button } from '@/components/ui/button'` — direct import | | **No code splitting** | Heavy component loaded on every page | `React.lazy(() => import('./HeavyComponent'))` + `<Suspense>` | | **Third-party at load** | Analytics/tracking loaded before the app renders | Load after hydration: `useEffect(() => { import('./analytics') }, [])` | | **Full library import** | `import _ from 'lodash'` (70KB) | `import debounce from 'lodash/debounce'` (1KB) | | **Lucide tree-shaking** | `import * as Icons from 'lucide-react'` (all icons) | Explicit map: `import { Home, Settings } from 'lucide-react'` | | **Duplicate React** | Library bundles its own React → "Cannot read properties of null" | `resolve.dedupe: ['react', 'react-dom']` in vite.config.ts | **How to find them**: `npx vite-bundle-visualizer` — shows what's in your bundle. ## 3. Composition Architecture (HIGH) How you structure components matters more than how you optimise them. | Pattern | Problem | Fix | |---------|---------|-----| | **Boolean prop explosion** | `<Card isCompact isClickable showBorder hasIcon isLoading>` | Explicit variants: `<CompactCard>`, `<ClickableCard>` | | **Compound components** | Complex component with 15 props | Split into `<Dialog>`, `<Dialog.Trigger>`, `<Dialog.Content>` with shared context | | **renderX props** | `<Layout renderSidebar={...} renderHeader={...} renderFooter={...}>` | Use children + named slots: `<Layout><Si