composition-patterns
Use when working with composition-patterns tasks or workflows
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 Use
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 customizearchitecture-compound-components- Structure complex components with shared
behavior; use composition
context
2. State Management (MEDIUM)
state-decouple-implementation- Provider is the only place that knows how- `state-context
state is managed
Subscribers only
The full skill, its 11 bundled files and every download is included with every paid Complete AI plan.
Details
| Source | vercel-labs/agent-skills |
|---|---|
| License | — |
| Risk label | safe ("critical" means the skill may run commands or touch files — read before use) |
| Files | SKILL.md, rules/_sections.md, rules/_template.md, rules/architecture-avoid-boolean-props.md, rules/architecture-compound-components.md, rules/patterns-children-over-render-props.md, rules/patterns-explicit-variants.md, rules/react19-no-forwardref.md, rules/state-context-interface.md, rules/state-decouple-implementation.md, rules/state-lift-state.md |
| Added | 2026-06-02 |
Related skills
accesslint-diff
Diff a live page's accessibility violations against a baseline — by default compares uncommitted changes (stash-based), or pass --branch [<name>] to diff against a branch. Reports only new violations introduced, violations fixed, and pre-existing count. Use `scan` for a full audit with no diffing.
accesslint-scan
Audit a live page for accessibility issues, locate each WCAG violation precisely, and return a selector-grounded fix worklist without editing.
accint-commitments
Triage acc's open promises and close them with honest real-world verdicts via acc_act(runtime="outcome").
accint-frames
Drain acc's deliberation queue — open/waiting brain_frames checkpointed by headless runs — via acc_act(runtime="continue").
accint-solve
Route a goal through acc's scored-memory loop via acc_act(runtime="solve"); deliberate any returned brain_frame and submit via continue.
ad-creative
Create, iterate, and scale paid ad creative for Google Ads, Meta, LinkedIn, TikTok, and similar platforms. Use when generating headlines, descriptions, primary text, or large sets of ad variations for testing and performance optimization.