f5792c40be
Pulled ALL skills from 15 source repositories: - anthropics/skills: 16 (docs, design, MCP, testing) - obra/superpowers: 14 (TDD, debugging, agents, planning) - coreyhaines31/marketingskills: 25 (marketing, CRO, SEO, growth) - better-auth/skills: 5 (auth patterns) - vercel-labs/agent-skills: 5 (React, design, Vercel) - antfu/skills: 16 (Vue, Vite, Vitest, pnpm, Turborepo) - Plus 13 individual skills from various repos Mosaic Stack is not limited to coding — the Orchestrator and subagents serve coding, business, design, marketing, writing, logistics, analysis, and more. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
90 lines
2.8 KiB
Markdown
90 lines
2.8 KiB
Markdown
---
|
|
name: vercel-composition-patterns
|
|
description:
|
|
React composition patterns that scale. Use when refactoring components with
|
|
boolean prop proliferation, building flexible component libraries, or
|
|
designing reusable APIs. Triggers on tasks involving compound components,
|
|
render props, context providers, or component architecture. Includes React 19
|
|
API changes.
|
|
license: MIT
|
|
metadata:
|
|
author: vercel
|
|
version: '1.0.0'
|
|
---
|
|
|
|
# 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-` |
|
|
|
|
## Quick Reference
|
|
|
|
### 1. Component Architecture (HIGH)
|
|
|
|
- `architecture-avoid-boolean-props` - Don't add boolean props to customize
|
|
behavior; use composition
|
|
- `architecture-compound-components` - Structure complex components with shared
|
|
context
|
|
|
|
### 2. State Management (MEDIUM)
|
|
|
|
- `state-decouple-implementation` - Provider is the only place that knows how
|
|
state is managed
|
|
- `state-context-interface` - Define generic interface with state, actions, meta
|
|
for dependency injection
|
|
- `state-lift-state` - Move state into provider components for sibling access
|
|
|
|
### 3. Implementation Patterns (MEDIUM)
|
|
|
|
- `patterns-explicit-variants` - Create explicit variant components instead of
|
|
boolean modes
|
|
- `patterns-children-over-render-props` - Use children for composition instead
|
|
of renderX props
|
|
|
|
### 4. React 19 APIs (MEDIUM)
|
|
|
|
> **⚠️ React 19+ only.** Skip this section if using React 18 or earlier.
|
|
|
|
- `react19-no-forwardref` - Don't use `forwardRef`; use `use()` instead of `useContext()`
|
|
|
|
## How to Use
|
|
|
|
Read individual rule files for detailed explanations and code examples:
|
|
|
|
```
|
|
rules/architecture-avoid-boolean-props.md
|
|
rules/state-context-interface.md
|
|
```
|
|
|
|
Each rule file contains:
|
|
|
|
- Brief explanation of why it matters
|
|
- Incorrect code example with explanation
|
|
- Correct code example with explanation
|
|
- Additional context and references
|
|
|
|
## Full Compiled Document
|
|
|
|
For the complete guide with all rules expanded: `AGENTS.md`
|