---
id: manual-vercel-composition-patterns
name: "Vercel Composition Patterns"
nameZh: "Vercel 组件组合模式"
sourceCategory: "Vercel Skill"
sourceCategoryZh: "Vercel Skill"
url: "https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns"
sourceUrl: "https://github.com/vercel-labs/agent-skills"
tags: ["React","Components","Architecture"]
tagsZh: ["React","组件","架构"]
categorySlugs: ["dev","creative-design"]
---

# Vercel Composition Patterns

中文名称：Vercel 组件组合模式

## Description

Replaces boolean prop hell with compound component patterns.

用复合组件模式替代布尔 prop 地狱。

## 中文说明

用复合组件模式替代布尔 prop 地狱。

- 打开或安装 Skill：https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns
- 查看原始来源：https://github.com/vercel-labs/agent-skills
- 分类：dev, creative-design
- 标签：React、组件、架构

## Use This Skill

- Open or install the skill from: https://github.com/vercel-labs/agent-skills/tree/main/skills/composition-patterns
- Review the original source: https://github.com/vercel-labs/agent-skills
- Categories: dev, creative-design
- Tags: React, Components, Architecture
- 中文标签：React、组件、架构

## README SEO Report

### Detailed Overview

A structured repository for React composition patterns that scale. These patterns help avoid boolean prop proliferation by using compound components, lifting state, and composing internals.

### Installation

No explicit installation section was found in the archived README. Open the original source for the official setup path; the download button provides the local Markdown copy saved by EasyGlobe.

### Usage

Use this skill when the task involves React, Components, Architecture. It can be adapted into Claude Skills, Codex Skills, Gemini Skills, Kimi Skills, GLM Skills, or a team SOP.

### Capabilities

Primary workflow coverage: dev, creative-design.

### Source Archive

- Archive source type: github
- Primary README/SKILL doc: github/skills/composition-patterns/README.md
- Archived docs: github/skills/composition-patterns/README.md, github/skills/composition-patterns/SKILL.md, github/skills/composition-patterns/AGENTS.md, github/skills/composition-patterns/rules/_sections.md, github/skills/composition-patterns/rules/_template.md, github/skills/composition-patterns/rules/state-lift-state.md, github/skills/composition-patterns/rules/react19-no-forwardref.md, github/skills/composition-patterns/rules/state-context-interface.md, github/skills/composition-patterns/rules/patterns-explicit-variants.md, github/skills/composition-patterns/rules/state-decouple-implementation.md, github/skills/composition-patterns/rules/architecture-avoid-boolean-props.md, github/skills/composition-patterns/rules/architecture-compound-components.md

## 3W FAQ

### What is this skill?

Replaces boolean prop hell with compound component patterns.

### Who is this skill for?

This skill is for teams or AI agents working on dev, creative-design workflows.

### When should you use it?

Use it when the task matches these tags: React, Components, Architecture.

## 中文 3W FAQ

### What：这个 skill 是什么？

用复合组件模式替代布尔 prop 地狱。

### Who：适合谁使用？

适合处理 dev、creative-design 工作流的团队、运营人员、开发者或 AI Agent。

### When：什么时候使用？

当任务涉及 React、组件、架构，或需要沉淀为 Claude Skills、Codex Skills、Gemini Skills、Kimi Skills、GLM Skills 或团队 SOP 时使用。