Vercel Composition Patterns

React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing r...

Security Scan

This is an instruction-only React composition patterns guide whose files and runtime instructions match the described purpose, with no installs, secrets, or external endpoints requested.

Purpose & Capability

The skill's name, description, and included rule files all describe React composition patterns and the repo contents are documentation and examples — this aligns with the stated purpose. One provenance note: SKILL.md and metadata claim author 'vercel' and MIT license, but the registry/source is 'unknown' and there is no homepage; that is a provenance/attribution issue (not a technical capability mismatch) and worth verifying if you expect an official Vercel publication.

Instruction Scope

SKILL.md and the rule files are documentation-only and instruct the agent to read local rule files for guidance. The instructions do not ask the agent to read unrelated system files, access environment variables, call external endpoints, or perform I/O beyond reading the skill's own files.

Install Mechanism

There is no install spec and no code files that execute; this is instruction-only (documentation). No packages are downloaded or extracted and nothing is written to disk by an installer.

Credentials

The skill declares no required environment variables, no credentials, and no config paths. There are no unexpected secret or credential requests in SKILL.md or the provided files.

Persistence & Privilege

The skill does not request always:true and uses default invocation settings. It does not modify other skills or system-wide settings. Autonomous invocation is permitted (platform default) but the skill itself does not ask for elevated persistence.

Assessment

This skill is a documentation-only guide for React composition patterns and appears internally consistent and low-risk. Before installing: (1) confirm provenance if you require official Vercel authorship (metadata claims 'vercel' but the registry/source and homepage are missing), (2) verify the MIT license terms meet your needs, and (3) if you plan to let an agent apply these patterns to your codebase, review the agent's code-change permissions (commits, pushes) because the skill itself has no safeguards about how its guidance will be applied. Otherwise there are no installs, secrets, or external endpoints to be concerned about.

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