vercel-composition-patterns by vercel-labs/agent-skills
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns构建灵活、可维护的 React 组件的组合模式。通过使用复合组件、状态提升和内部组合,避免布尔属性泛滥。这些模式使得代码库在扩展时,无论是人类还是 AI 代理都更容易处理。
在以下情况下参考这些指南:
| 优先级 | 类别 | 影响 | 前缀 |
|---|---|---|---|
| 1 | 组件架构 | 高 | architecture- |
| 2 | 状态管理 | 中 | state- |
| 3 | 实现模式 | 中 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
patterns-| 4 | React 19 API | 中 | react19- |
architecture-avoid-boolean-props - 不要添加布尔属性来自定义行为;使用组合architecture-compound-components - 使用共享上下文构建复杂组件state-decouple-implementation - 提供者是唯一知道状态如何管理的地方state-context-interface - 定义包含状态、操作、元数据的通用接口以进行依赖注入state-lift-state - 将状态提升到提供者组件中以便兄弟组件访问patterns-explicit-variants - 创建显式的变体组件,而不是布尔模式patterns-children-over-render-props - 使用 children 进行组合,而不是 renderX 属性⚠️ 仅限 React 19+。 如果使用 React 18 或更早版本,请跳过此部分。
react19-no-forwardref - 不要使用 forwardRef;使用 use() 代替 useContext()阅读各个规则文件以获取详细解释和代码示例:
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
每个规则文件包含:
要查看包含所有扩展规则的完整指南:AGENTS.md
每周安装量
74.6K
代码仓库
GitHub 星标
22.4K
首次出现
Jan 26, 2026
安全审计
安装于
opencode53.0K
codex52.2K
gemini-cli50.6K
github-copilot48.9K
claude-code45.6K
cursor43.9K
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.
Reference these guidelines when:
| 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- |
architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use compositionarchitecture-compound-components - Structure complex components with shared contextstate-decouple-implementation - Provider is the only place that knows how state is managedstate-context-interface - Define generic interface with state, actions, meta for dependency injectionstate-lift-state - Move state into provider components for sibling accesspatterns-explicit-variants - Create explicit variant components instead of boolean modespatterns-children-over-render-props - Use children for composition instead of renderX props⚠️ React 19+ only. Skip this section if using React 18 or earlier.
react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()Read individual rule files for detailed explanations and code examples:
rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md
Each rule file contains:
For the complete guide with all rules expanded: AGENTS.md
Weekly Installs
74.6K
Repository
GitHub Stars
22.4K
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode53.0K
codex52.2K
gemini-cli50.6K
github-copilot48.9K
claude-code45.6K
cursor43.9K
68,800 周安装