Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.

Security Scan

This skill is an instruction-only collection of React composition guidelines; its files, declared requirements, and runtime instructions are coherent with the stated purpose and do not request credentials, install software, or perform I/O.

Purpose & Capability

The name/description promise React composition patterns and the included files are focused documentation and examples that match that goal. The only minor provenance note: source/homepage are unknown (but the packaged files themselves are documentation and match the stated purpose).

Instruction Scope

SKILL.md and the rule files are static guidance for refactoring and component design. They do not instruct the agent to read system files, access credentials, or send data to external endpoints; usage is limited to reading the included docs and examples.

Install Mechanism

No install spec and no code files to execute — this is instruction-only documentation, which is the lowest-risk install model.

Credentials

The skill declares no required environment variables, credentials, or config paths. Nothing in the documentation asks for secrets or unrelated credentials.

Persistence & Privilege

always is false and the skill does not request persistent or elevated privileges. It does not attempt to modify other skills or system-wide settings.

Assessment

This appears to be safe, self-contained documentation for React composition patterns. Before installing: (1) confirm you trust the skill publisher since source/homepage are not provided, (2) review AGENTS.md and the rule files yourself to ensure the guidance matches your codebase and React version (note the React 19-specific advice), and (3) remember this skill is documentation-only — it won't run code or access secrets. If you need stronger provenance, ask the publisher for a homepage or repository link before relying on the guidance in production.

React Composition Patterns

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.

When to Apply

Reference these guidelines when:

• Refactoring components with many boolean props
• Building reusable component libraries
• Designing flexible component APIs
• Reviewing component architecture
• Working with compound components or context providers

Rule Categories by Priority

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-

Quick Reference

1. Component Architecture (HIGH)

• architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
• architecture-compound-components - Structure complex components with shared context

2. State Management (MEDIUM)

• state-decouple-implementation - Provider is the only place that knows how state is managed
• state-context-interface - Define generic interface with state, actions, meta for dependency injection
• state-lift-state - Move state into provider components for sibling access

3. Implementation Patterns (MEDIUM)

• patterns-explicit-variants - Create explicit variant components instead of boolean modes
• patterns-children-over-render-props - Use children for composition instead of renderX props

4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip this section if using React 18 or earlier.

• react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()

How to Use

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:

• Brief explanation of why it matters
• Incorrect code example with explanation
• Correct code example with explanation
• Additional context and references

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md