Claude MarketplacesSubmit
jezweb avatar

React Patterns

jezweb/claude-skills

A checklist of 50+ React performance and composition patterns ranked by impact, focused on React 19 + Vite + Cloudflare stacks. It's organized around what actually slows apps down: waterfalls, bundle bloat, bad composition, unnecessary re-renders. The tables are terse and scannable, showing problem code next to fixes. Use it during code review or when something feels slow and you need a systematic audit. The critical section on eliminating waterfalls alone (parallel fetches, hoisting data, collapsing Suspense boundaries) will catch most production performance issues. Strong opinions on composition over boolean props and when to actually worry about re-renders versus when to ignore them.

skills.sh installs
1.3K
GitHub stars
1.1K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add jezweb/claude-skills --skill react-patterns --agent claude-code

Installs into .claude/skills of the current project.

Files

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.

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/jezweb/claude-skills
Categories
Frontend Development, Backend & APIs, Git & Pull Requests, Documentation, Code Review & Quality, Debugging, Cloud & Infrastructure
First seen
May 16, 2026

More from jezweb/claude-skills

All 166

Recommended

More Frontend Development
1react-native-community avatarupgrade-react-nativereact-native-community/skillsUse when upgrading react-native to a newer version. Handles version bumps, native project changes (Android/iOS), dependency updates, and breaking change migrati1.3Kskills.sh installs
2capawesome-team avatarcapacitor-angularcapawesome-team/skillsGuides the agent through Angular-specific patterns for Capacitor app development. Covers project structure, adding Capacitor to Angular projects, using Capacito1.3Kskills.sh installs
3aviz85 avatarhtml-to-pdfaviz85/claude-skills-libraryConvert HTML to PDF with pixel-perfect rendering and excellent Hebrew/RTL support. Use when the user asks to 'convert HTML to PDF', 'generate PDF from HTML', 'c1.2Kskills.sh installs
4vercel-labs avatarreduxvercel-labs/json-renderRedux adapter for json-render's StateStore interface. Use when integrating json-render with Redux or Redux Toolkit for state management via @json-render/redux.1.1Kskills.sh installs
5patternsdev avatarreact-render-optimizationpatternsdev/skillsTeaches React rendering performance optimization patterns. Use when reducing unnecessary re-renders, optimizing memoization, improving state design, or diagnosi1.1Kskills.sh installs
6spences10 avatarsvelte-runesspences10/svelte-skills-kitSvelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.1.1Kskills.sh installs