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.

1.19x

Quality

71%

Does it follow best practices?

Impact

100%

1.19x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./skills/composition-patterns/SKILL.md

Evaluation results

100%

38%

Refactor a Notification Panel Component

Compound component refactoring

Criteria

Without context

With context

No boolean props on core

33%

100%

Context created

100%

Sub-components access context

100%

Compound component export

100%

Explicit variants

100%

Children composition

50%

100%

Provider isolates state

100%

No conditional boolean logic

20%

100%

state/actions/meta interface

100%

TypeScript interfaces

100%

Build a Multi-Step Form with External Summary Panel

State lifting and provider boundary

Criteria

Without context

With context

Provider owns state

100%

No useEffect syncing

100%

No ref-based state reading

100%

Context interface: state

87%

100%

Context interface: actions

75%

100%

Provider boundary wraps siblings

100%

UI components use context

100%

Provider decoupled from UI

100%

Swappable state

100%

TypeScript context interface

70%

100%

Build a Rich Text Editor Toolbar with React 19

React 19 API patterns

Criteria

Without context

With context

No forwardRef usage

100%

Ref as regular prop

100%

use() for context

100%

No useContext calls

100%

Compound component export

100%

Context with state/actions

75%

100%

Provider owns state

100%

Children composition

100%

TypeScript types

100%

React 19 comment

100%

Repository: vercel-labs/agent-skills
Commit: 73140fc

Evaluated: 29 days ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Refactor a Notification Panel Component Build a Multi-Step Form with External Summary Panel Build a Rich Text Editor Toolbar with React 19

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.