React Composition Patterns

Name: React Composition Patterns
Author: Vercel

React composition patterns that scale and avoid boolean prop proliferation.

Skill32.5k stars on vercel-labs/agent-skills · shared by 10 skills

Install

Use it in

Terminal is for Claude Code, Codex, Cursor and Copilot.

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

Works in Claude Code, Codex, Gemini CLI, Cursor and Copilot. The command picks the right folder for your agent.

Part of

Guided workflow Step 1 of 6Build a UI feature that holds upDevelopers · in the Frontend kit Get the workflow file

About

Guides implementation of compound components, state lifting, internal composition, and prop drilling avoidance. Helps structure React components for maintainability and reuse.

react
composition
components
patterns
architecture

Next in the Frontend kit

Whole kit

next-devtools-mcp
Next.js development tools MCP server with stdio transport
Connects to Next devtools
828GitHub stars for vercel/next-devtools-mcp
Magic MCP (21st.dev)
AI-driven UI component generation with a modern React/Tailwind component library.
Connects to Magic
6kGitHub stars for 21st-dev/magic-mcp
Figma Dev Mode MCP
Figma's official MCP server exposing design structure, auto-layout, and styles to AI coding agents.
Connects to Figma Dev Mode
2.1kGitHub stars for figma/mcp-server-guide