别再滥用 boolean 属性了，Vercel 的这套 React Skill 值得每个前端抄一遍

你有没有过这种经历：组件刚开始只有三五个 prop，后来为了支持各种场景，isOpen、isLoading、showHeader、withActions……一路加下去，最后组件变成了一团没人敢动的布尔属性泥潭？

这就是前端圈经典的 boolean prop proliferation。好消息是，Vercel Labs 最近开源了一个叫 vercel-composition-patterns 的 Skill，专门治这种病。

它不是什么普通教程

这不是又一篇“教你写 React”的博客。这是一个可执行的 Claude Skill，安装后 AI 就能按 Vercel 标准帮你重构组件。GitHub 上已经拿了 29k+ stars，说明被验证过、值得信。

四个核心原则，看完就能用

Skill 里总结了几个非常实用的原则：

• Composition over configuration：别堆 prop，让使用者拼装组件
• Lift your state：把状态放到 provider 里，别锁死在组件内部
• Compose your internals：子组件通过 context 通信，而不是传一堆 props
• Explicit variants：与其加 isThread 布尔开关，不如直接拆成 ThreadComposer、EditComposer

这几条听起来像范式，但它的 SKILL.md 里是带规则的，AI 跑的时候会按这些规则检查你的代码，直接给你重构建议。

谁该用

• 正在维护一个组件库，发现 prop 数已经失控
• 准备做 React 19 升级，想提前理清架构
• 甚至只是写了一个复杂 Modal，想让它好扩展

最后

如果你还在 if (x) else 这种写法里挣扎，建议装一下这个 Skill。Vercel 的工程标准一直在线，这次也没有例外。