Technical & DevelopmentIntermediate
composition-patterns
React component composition and reusable patterns
Developer Setup
Setup & Installation
bash
npx skills add https://github.com/vercel-labs/next-skills --skill composition-patternsnpx skills add https://github.com/vercel-labs/next-skills --skill composition-patternsOr paste this URL into your assistant to install:
Overview
What This Skill Does
A set of React composition rules for structuring components without boolean prop proliferation. Covers compound components, context providers, state lifting, and React 19 API changes. Designed to keep component APIs clean as codebases grow.
Application
When to use this Skill
- Configuring integration settings for custom agent workflows.
- Optimizing query execution and response latency in production.
- Developing clean, standard-compliant implementations for enterprise services.
- Troubleshooting connection timeouts and authentication handshakes.
- Monitoring API rate limits and execution pipelines programmatically.
Documentation
Show Skills.md file
React Composition Patterns
Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.
When to Apply
Reference these guidelines when:
- Refactoring components with many boolean props
- Building reusable component libraries
- Designing flexible component APIs
- Reviewing component architecture
- Working with compound components or context providers
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Component Architecture | HIGH | architecture- |
| 2 | State Management | MEDIUM | state- |
| 3 | Implementation Patterns | MEDIUM | patterns- |
| 4 | React 19 APIs | MEDIUM | react19- |
Lines 1 - 25 of 75
Recommendations