react-patterns

Apply 62 React 19 performance rules and composition patterns from Vercel.

Updated Dec 14, 2025
One-click install
npx skills add https://github.com/toobutta/maptelli --skill react-patterns-toobutta
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-patterns
Source: https://github.com/toobutta/maptelli/tree/main/.claude/skills/react-patterns
Command: npx skills add https://github.com/toobutta/maptelli --skill react-patterns-toobutta

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Patterns and guidelines to help React teams write scalable, performant 19.x components with improved composition and fewer waterfalls.

Core Features & Use Cases

  • 62 performance rules and composition patterns sourced from Vercel Engineering.
  • Enforces compound components over boolean props to reduce prop explosion and improve API ergonomics.
  • Auto-applies best practices when authoring React components in React 19 / Next.js apps.

Quick Start

Apply these patterns to a new React component to improve composition and performance.

Frequently Asked Questions about react-patterns

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

FAQPage Schema
How do I optimize React 19 component performance during a UI review?

Optimize React 19 component performance by applying 62 specific rules and composition patterns sourced from Vercel Engineering to improve architecture and reduce render waterfalls during UI reviews.

Why should I avoid boolean props in React components and what is the alternative?

Avoid boolean props in React components to reduce prop explosion; instead, enforce compound components to improve API ergonomics and maintainable architecture within your application design.

Can I use these React composition patterns with Next.js apps?

Yes, you can use these composition patterns with Next.js apps, as the rules specifically apply to developers building scalable and performant components in React 19 and Next.js environments.

What is the best way to structure React components to prevent data waterfalls?

The best way to prevent data waterfalls is utilizing composition patterns and state management guidelines that help React teams write scalable 19.x components with improved data fetching architectures.

When do I need composition patterns for frontend React architecture?

You need composition patterns for frontend React architecture when authoring new components or refactoring existing ones to solve scalability issues and reduce prop explosion in complex user interfaces.