Vercel Composition Patterns

**Judgement:** A strong, specialized skill for React component architecture and composition, especially valuable for agents working on scalable UI libraries or refactors. It is best viewed as an architectural/style guide rather than an algorithmic or tooling skill. **What it does well** - Guides agents away from boolean-prop proliferation toward composition, compound components, and explicit variants. - Encourages robust state architecture via providers, lifted state, and clear state/action/meta interfaces. - Provides version-aware React 19 guidance (e.g., use() instead of useContext, avoiding forwardRef), with instructions to skip when on React 18 or earlier. - Uses rule files with incorrect vs. correct examples, helping agents generate cleaner, more maintainable code. **Key risks / limitations** - React 19 guidance may be ahead of some production environments; blindly applying React 19 rules in React 18 projects can break code. - Focuses on architecture and API design, not on performance optimization, data fetching strategies, or non-React concerns. - Opinionated patterns (e.g., children over render props, avoiding boolean props) might conflict with an existing codebase’s conventions and should be applied selectively. **Recommended scenarios** - Large React codebases where components have grown complex and difficult to maintain due to many boolean props or ad-hoc modes. - Building or refactoring design systems and shared component libraries that will be consumed by multiple teams or agents. - Greenfield or actively modernized projects planning for React 19, where adopting new APIs and patterns is desirable. - Code review or architecture review tasks where an agent needs a principled framework for evaluating component and provider design.