🎯

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(16 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.

🎯

deploy-to-vercel🎯Skill

Part of Vercel Labs agent skills collection that includes React/Next.js best practices, web design guidelines, React Native guidelines, and composition patterns — packaged as Agent Skills for AI coding agents.

🎯

vercel-cli-with-tokens🎯Skill

A skill from the Vercel Labs agent-skills collection that enables AI coding agents to interact with the Vercel CLI using authentication tokens for deployment and project management.

🎯

vercel-react-view-transitions🎯Skill

Implements smooth animations using React's View Transition API — the `<ViewTransition>` component, `addTransitionType`, transition classes, shared-element transitions, and Next.js `next/link` integration.

🎯

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.

🎯

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