1. 基本信息
项目自述名称：
vercel-composition-patterns（SKILL.md front matter 内name字段原值；正式名称按合集子技能规则补全为下表名称）
| 项目 | 内容 |
|---|---|
| 名称 | composition-patterns-vercel-labs-agent-skills |
| 作者/维护者 | Vercel（vercel-labs 官方工程团队维护） |
| 来源链接 | https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns |
| 许可证 | MIT（SKILL.md front matter 与仓库 README 双重声明，交叉确认） |
| GitHub Stars / Forks | 所属合集仓库 29,166 / 2,616（GitHub API 实测；仓库为多技能合集，此星数不直接等同本技能自身热度，主证据见下方安装量） |
| 最新版本 | SKILL.md front matter 声明 1.0.0；该子目录最近一次提交 2026-01-28（GitHub API 实测），仓库整体最近提交 2026-07-07 |
| 安装方式 | npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns（单技能）或 npx skills add vercel-labs/agent-skills（整包） |
2. 功能介绍与亮点
composition-patterns 是 Vercel 工程团队将其生产系统中沉淀的 React 组件架构经验封装成的 Agent 技能，核心内容是按优先级分级的组合模式规则集：
- 组件架构（HIGH）：拒绝用布尔 prop 定制行为，改用 compound components（复合组件）+ 共享 Context 的方式组织复杂组件
- 状态管理（MEDIUM）：State 提升到 Provider 层，兄弟组件通过共享状态互通；Provider 是唯一知道状态如何实现的地方，定义清晰的 state/actions/meta 接口
- 实现模式（MEDIUM）：优先用 children 组合而非 renderX 类 render prop；创建显式变体组件（如 ThreadComposer、EditComposer）而非靠一堆布尔开关切换的万能组件
- React 19 API（MEDIUM，明确标注仅 React 19+ 适用）：
forwardRef相关的新写法调整
每条规则单独成一个 markdown 文件，配“错误写法/正确写法”代码示例，同时全部编译进单一 AGENTS.md，方便 Agent 一次性查询。亮点：Vercel 官方工程团队出品，与已在业内验证的 React/Next.js 规则同源；据 skills.sh 官方页面，该技能自身安装量达 252.8K；页面标注已通过 Gen Agent Trust Hub、Socket、Snyk 三方安全审计平台审计。
3. 适用场景
所属分类：前端与设计
适合用 Claude Code / Codex 等 agent 编写或重构 React 组件的初中级前端开发者，尤其适合以下场景：组件因不断叠加布尔 prop 变得难以维护、需要为团队设计可复用的组件库 API、或需要理清 Context Provider 与子组件之间状态管理边界的架构决策时刻。
4. 跨 Agent 兼容性
- Claude Code：✅ 原生支持——SKILL.md 为标准技能格式，skills.sh 平台官方支持列表明确列出（已抓取核实）
- Codex：✅ 支持——skills.sh 平台官方支持列表明确列出（已抓取核实）
- OpenClaw：❓ 未验证——skills.sh 官方支持列表未见提及
- Hermes Agent：✅ 支持——skills.sh 平台支持列表列出 “Nous Research”（Hermes Agent 开发方，已抓取核实）
5. 推荐理由
“能跑但难维护”是 AI 生成 React 代码最常见的通病之一——不熟悉组件架构设计的开发者很容易让 Agent 用一堆布尔 prop 堆出一个逐渐失控的万能组件。这个技能把 Vercel 工程团队沉淀的组合模式规则编码成 Agent 会主动遵循的架构准则，让“组合优于配置”这套设计哲学在重构或新建组件时自动生效，不需要开发者自己先吃透这套理论。
6. 评分
| 维度 | 分数 | 说明 |
|---|---|---|
| 受欢迎程度 | 9 | 官方一线机构（Vercel）出品；skills.sh 显示该技能自身安装量 252.8K；合集仓库整体 29,166 stars（属整个合集，不直接代表本技能自身热度，已在上表注明） |
| 可用性 | 8 | 一条命令安装；文档完整分层（SKILL.md 速查 + 独立规则文件含代码示例 + 编译版 AGENTS.md）；无付费依赖；该子目录内容最近一次更新为 2026-01-28（约 5.5 个月前），更新间隔较长，故不满分 |
| 安全性 | 9 | 见下方安全检查清单 |
| 综合 | 8.7 |
安全检查清单：
| 检查项 | 结果 |
|---|---|
| ① Shell 命令及权限范围 | 无 shell 执行，纯 Markdown 架构规则说明，不修改、不运行代码 |
| ② 运行时联网外发 | 无网络调用，静态参考内容，不读取或外发用户代码 |
| ③ API Key / 凭据 | 不需要 |
| ④ 可疑指令（注入迹象） | 完整抓取 SKILL.md、README、metadata.json 及全部规则文件核实，内容均为正常的 React 架构规范说明，未发现要求执行流程外操作的可疑指令 |
| ⑤ 作者/组织信誉 | Vercel 工程团队，一线前端基础设施厂商，与同仓库已验证的姊妹技能同源 |
| ⑥ License 是否明确 | MIT，SKILL.md front matter 与仓库 README 双重确认，清晰明确 |
| ⑦ 最近维护时间 | 仓库整体活跃（最近提交 2026-07-07）；该子目录内容本身约 5.5 个月未更新 |
7. 跟同类 Skills 相比的优势
| Skill | 定位 | 与本技能的差异 |
|---|---|---|
| react-view-transitions（同仓库姊妹技能） | React View Transition API 动效实现指南 | 聚焦页面/元素切换动效的实现细节，不涉及组件架构拆分决策 |
| react-native-skills（同仓库姊妹技能） | React Native / Expo 移动端最佳实践 | 聚焦移动端性能与原生模块调用，非 Web 组件架构问题 |
| react-best-practices-vercel-labs-agent-skills | React / Next.js 性能优化规则库（70 条规则） | 关注“如何写得快”（异步瀑布流、包体积、重渲染），本技能关注“如何拆得对”（组件组合方式），两者互补而非重叠 |
| ui-ux-guide（oil-oil） | 通用 UI/UX 设计原则指南，含 CRAP 原则、HCI 法则等 | 面向视觉呈现与交互心理学原则，不涉及 React 代码层面的组件架构 |
| skill-email-html-mjml（framix-team） | 基于 MJML 生成响应式 HTML 邮件模板 | 聚焦邮件 HTML 这一细分场景，与通用组件架构设计无关 |
8. 用户评价
该技能在 skills.sh 官方页面及公开检索范围内暂无具名用户评价文字；页面显示安装量 252.8K，并标注已通过 Gen Agent Trust Hub、Socket、Snyk 三方平台的安全审计（审计报告原文未独立核实，仅转述平台页面标注）。
9. 其他补充
同仓库另有 vercel-optimize（项目性能审计）、writing-guidelines（文档写作规范审计）、vercel-cli-with-tokens（CLI 免鉴权部署）等姊妹技能，均遵循统一的 Agent Skills 格式，可通过 npx skills CLI 按需组合安装管理。
10. 安装使用方式
- 单技能安装：
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns - 整包安装（含全部姊妹技能）：
npx skills add vercel-labs/agent-skills - 手动方式：克隆仓库，将
skills/composition-patterns目录复制进.claude/skills/（或对应 agent 的 skills 目录） - 安装后无需重启；触发方式为对话中涉及重构组件、消除布尔 prop、设计 compound component、理清 Context Provider 状态管理等任务时自动生效；也可直接查阅仓库内
AGENTS.md获取全部规则的完整展开版本
11. 注意事项
- 该子目录内容本身自 2026-01-28 起未更新（约 5.5 个月），虽仓库整体维护活跃，但若 React 社区出现新的组合模式共识，规则库存在滞后可能
- OpenClaw 生态的兼容性未经验证，若在该平台使用建议先小范围测试
- 规则集面向 React（含 Next.js）技术栈，非 React 项目或使用 Vue / Svelte 等其他前端框架时不适用
- React 19 专属规则（
forwardRef相关）已在文档中明确标注仅 React 19+ 适用，React 18 及更早版本项目应跳过该部分