技能说明
适用于重构布尔属性过多的组件、设计可复用组件库和审查组件架构，覆盖复合组件、Context、Provider、状态提升和 React 19 API。React 19 专属建议需按项目版本选择。
关于此技能
Vercel 官方 React 组件架构指南，帮助把堆叠布尔属性的组件重构为可组合、可维护的 API，覆盖复合组件、状态提升、内部组合、Context 和 React 19 新接口。许可证以技能文件标注的 MIT 为准。
核心能力
减少布尔属性堆叠
用组合和明确的变体替代越来越多的 boolean props，让组件行为更容易理解和扩展。
复合组件与状态组织
通过共享 Context、Provider 和状态提升，让复杂组件保持清晰的内部边界。
React 19 适配提醒
提供 React 19 的组件 API 建议；React 18 项目应跳过对应章节并按当前版本核对。
适用场景
组件库重构
处理包含大量开关属性、条件分支和重复样式的组件，改造成可组合的组件 API。
新建可复用组件
在设计 Tabs、Menu、Form、Dialog 等复合组件时，先确定 Provider、Context 和子组件职责。
代码审查
检查 prop drilling、状态耦合、render props 滥用和 React 版本不匹配等架构问题。
使用步骤
- 01
安装技能
使用 npx skills add vercel-labs/agent-skills --skill composition-patterns -a codex -g 安装到 Codex 的全局技能目录。
- 02
识别组件问题
先看组件是否依赖大量布尔属性、跨兄弟组件共享状态或把实现细节暴露给调用方。
- 03
选择组合方式
按需要使用复合组件、Context、Provider、状态提升和显式变体，保持状态接口与实现解耦。
- 04
核对 React 版本
只有 React 19 项目采用 React 19 章节；React 18 及更早版本按兼容 API 复查示例。
常见问题
它和性能优化技能有什么区别？+
组件组合模式关注组件 API、状态边界和可维护性；性能最佳实践关注请求、包体积和渲染效率，两者可以配合但解决的问题不同。
React 18 能使用吗？+
大部分组合、Context 和状态组织规则适用；React 19 专属章节要跳过，并按项目版本核对实现。
会自动重写组件吗？+
技能提供规则和示例，是否重构、改动哪些文件仍应结合项目组件调用方式、测试和兼容约束决定。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/06
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
npx skills add vercel-labs/agent-skills --skill composition-patterns -a codex -g