🎯

composition-patterns

🎯Skill

from vercel-labs/agent-skills

What it does

Guides AI agents in implementing robust software design patterns for component composition, modularity, and reusability across different programming paradigms.

Overview

A skill from Vercel Engineering that guides AI agents in implementing React composition patterns. Part of the vercel-labs/agent-skills collection, focused on component modularity and reusability through compound components, state management, and internal composition.

Key Features

Compound component patterns to replace boolean prop overload
State lifting and shared context patterns
Flexible component API design for libraries
Review guidelines for evaluating component architecture

Who is this for?

Frontend developers building scalable React applications who need Claude to help design flexible component APIs that avoid prop proliferation.

📦

Same repository

vercel-labs/agent-skills(14 items)

📚 Related Resources

📝Introducing: React Best Practices

vercel.com

📝Agent Skills Explained: An FAQ

vercel.com

composition-patterns

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

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

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

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

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/composition-patterns/SKILL.md

SKILL.md

18,056Installs

18,734

Last UpdatedJan 29, 2026

View on GitHub Back to Skills

More from this repository10

🎯

vercel-react-best-practices🎯Skill

React and Next.js performance optimization guidelines from Vercel Engineering. 40+ rules across 8 categories covering component performance, data fetching, and bundle size optimization.

🎯

web-design-guidelines🎯Skill

Web interface best practices auditor from Vercel Engineering. Reviews UI code against 100+ standards covering accessibility, animations, forms, images, and UX fundamentals.

🎯

vercel-composition-patterns🎯Skill

React composition patterns skill from Vercel Labs that helps avoid boolean prop proliferation through compound components, state lifting, and internal composition techniques.

🎯

vercel-react-native-skills🎯Skill

React Native best practices skill with 16 rules across 7 sections covering performance, layout, animation, images, state management, architecture, and platform-specific patterns for Expo and React Native apps.

🎯

react-native-skills🎯Skill

React Native best practices optimized for AI agents from Vercel Engineering. 16 rules across 7 sections covering mobile performance, layout patterns, animations, and platform-specific implementation.

🎯

deploy-to-vercel🎯Skill

Skill

🎯

vercel-deploy🎯Skill

Automates Vercel deployment configuration and deployment processes for AI agents, generating optimal deployment settings and triggering builds programmatically.

🎯

find-skills🎯Skill

Skill

🎯

react-composition-patterns🎯Skill

Skill

🎯

frontend-design🎯Skill

Skill