composition-patterns

Name: composition-patterns
Author: vercel-labs

byvercel-labs· 154 skills

Installs

266k

Stars

29k

Forks

2.6k

How to install composition-patterns?

vercel-labs/agent-skills/composition-patterns

$npx -y skills add vercel-labs/agent-skills --skill composition-patterns

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/vercel-labs/agent-skills" --skill "vercel-labs/agent-skills/composition-patterns"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/vercel-labs/agent-skills" that are relevant to the current task. Run `npx skills add "https://github.com/vercel-labs/agent-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# React Composition Patterns
2
3	Composition patterns for building flexible, maintainable React components. Avoid
4	boolean prop proliferation by using compound components, lifting state, and
5	composing internals. These patterns make codebases easier for both humans and AI
6	agents to work with as they scale.
7
8	## When to Apply
9
10	Reference these guidelines when:
11
12	- Refactoring components with many boolean props
13	- Building reusable component libraries
14	- Designing flexible component APIs
15	- Reviewing component architecture
16	- Working with compound components or context providers
17
18	## Rule Categories by Priority
19
20	\| Priority \| Category \| Impact \| Prefix \|
21	\| -------- \| ----------------------- \| ------ \| --------------- \|
22	\| 1 \| Component Architecture \| HIGH \| `architecture-` \|
23	\| 2 \| State Management \| MEDIUM \| `state-` \|
24	\| 3 \| Implementation Patterns \| MEDIUM \| `patterns-` \|
25	\| 4 \| React 19 APIs \| MEDIUM \| `react19-` \|
26
27	## Quick Reference
28
29	### 1. Component Architecture (HIGH)
30
31	- `architecture-avoid-boolean-props` - Don't add boolean props to customize
32	behavior; use composition
33	- `architecture-compound-components` - Structure complex components with shared
34	context
35
36	### 2. State Management (MEDIUM)
37
38	- `state-decouple-implementation` - Provider is the only place that knows how
39	state is managed
40	- `state-context-interface` - Define generic interface with state, actions, meta
41	for dependency injection
42	- `state-lift-state` - Move state into provider components for sibling access
43
44	### 3. Implementation Patterns (MEDIUM)
45
46	- `patterns-explicit-variants` - Create explicit variant components instead of
47	boolean modes
48	- `patterns-children-over-render-props` - Use children for composition instead
49	of renderX props
50
51	### 4. React 19 APIs (MEDIUM)
52
53	> ⚠️ React 19+ only. Skip this section if using React 18 or earlier.
54
55	- `react19-no-forwardref` - Don't use `forwardRef`; use `use()` instead of `useContext()`
56
57	## How to Use
58
59	Read individual rule files for detailed explanations and code examples:
60
61	```
62	rules/architecture-avoid-boolean-props.md
63	rules/state-context-interface.md
64	```
65
66	Each rule file contains:
67
68	- Brief explanation of why it matters
69	- Incorrect code example with explanation
70	- Correct code example with explanation
71	- Additional context and references
72
73	## Full Compiled Document
74
75	For the complete guide with all rules expanded: `AGENTS.md`

6 picks

Type

composition-patterns

byvercel-labs· 154 skills

Installs

266k

Stars

29k

Forks

2.6k

How to install composition-patterns?

vercel-labs/agent-skills/composition-patterns

$npx -y skills add vercel-labs/agent-skills --skill composition-patterns

Installs into the current project.

›Prefer a prompt? Paste this to your agent

Use this skill

Run `npx skills use "https://github.com/vercel-labs/agent-skills" --skill "vercel-labs/agent-skills/composition-patterns"` and follow the generated skill instructions now. Read its complete output, redirecting it to a temporary file first if necessary. Resolve relative paths from the supporting-files directory it provides.

Use the whole pack

Use the skills in "https://github.com/vercel-labs/agent-skills" that are relevant to the current task. Run `npx skills add "https://github.com/vercel-labs/agent-skills"` and select the relevant skills, then follow their instructions.

Files · 1

View on GitHub

SKILL.md

1	# React Composition Patterns
2
3	Composition patterns for building flexible, maintainable React components. Avoid
4	boolean prop proliferation by using compound components, lifting state, and
5	composing internals. These patterns make codebases easier for both humans and AI
6	agents to work with as they scale.
7
8	## When to Apply
9
10	Reference these guidelines when:
11
12	- Refactoring components with many boolean props
13	- Building reusable component libraries
14	- Designing flexible component APIs
15	- Reviewing component architecture
16	- Working with compound components or context providers
17
18	## Rule Categories by Priority
19
20	\| Priority \| Category \| Impact \| Prefix \|
21	\| -------- \| ----------------------- \| ------ \| --------------- \|
22	\| 1 \| Component Architecture \| HIGH \| `architecture-` \|
23	\| 2 \| State Management \| MEDIUM \| `state-` \|
24	\| 3 \| Implementation Patterns \| MEDIUM \| `patterns-` \|
25	\| 4 \| React 19 APIs \| MEDIUM \| `react19-` \|
26
27	## Quick Reference
28
29	### 1. Component Architecture (HIGH)
30
31	- `architecture-avoid-boolean-props` - Don't add boolean props to customize
32	behavior; use composition
33	- `architecture-compound-components` - Structure complex components with shared
34	context
35
36	### 2. State Management (MEDIUM)
37
38	- `state-decouple-implementation` - Provider is the only place that knows how
39	state is managed
40	- `state-context-interface` - Define generic interface with state, actions, meta
41	for dependency injection
42	- `state-lift-state` - Move state into provider components for sibling access
43
44	### 3. Implementation Patterns (MEDIUM)
45
46	- `patterns-explicit-variants` - Create explicit variant components instead of
47	boolean modes
48	- `patterns-children-over-render-props` - Use children for composition instead
49	of renderX props
50
51	### 4. React 19 APIs (MEDIUM)
52
53	> ⚠️ React 19+ only. Skip this section if using React 18 or earlier.
54
55	- `react19-no-forwardref` - Don't use `forwardRef`; use `use()` instead of `useContext()`
56
57	## How to Use
58
59	Read individual rule files for detailed explanations and code examples:
60
61	```
62	rules/architecture-avoid-boolean-props.md
63	rules/state-context-interface.md
64	```
65
66	Each rule file contains:
67
68	- Brief explanation of why it matters
69	- Incorrect code example with explanation
70	- Correct code example with explanation
71	- Additional context and references
72
73	## Full Compiled Document
74
75	For the complete guide with all rules expanded: `AGENTS.md`

6 picks

Type

composition-patterns

How to install composition-patterns?

Related

composition-patterns

How to install composition-patterns?

Related