StealIt
Vercel OfficialClaude skill for frontend development

Vercel Composition Patterns

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.

Install

Run this in your project folder. It works with Claude Code, Cursor, Codex and dozens of other agents.

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

Needs Node.js. Add -g to install for every project, or -a claude-code to skip the agent picker.

How to use Vercel Composition Patterns

Once it's installed, Claude reads this skill on its own whenever a request matches what it's for, so you don't have to mention it by name. In Claude Code you can also run it directly by typing /vercel-composition-patterns.

It contains no scripts, only instructions and reference files, so it can't run code on its own.

What the instructions cover

  1. 1When to Apply
  2. 2Rule Categories by Priority
  3. 3Quick Reference
  4. 4How to Use
  5. 5Full Compiled Document

Section headings from the skill's SKILL.md file.

What's inside · 14 files

  • AGENTS.md
  • README.md
  • SKILL.md
  • metadata.json
  • rules/_sections.md
  • rules/_template.md
  • rules/architecture-avoid-boolean-props.md
  • rules/architecture-compound-components.md
  • rules/patterns-children-over-render-props.md
  • rules/patterns-explicit-variants.md
  • rules/react19-no-forwardref.md
  • rules/state-context-interface.md
  • rules/state-decouple-implementation.md
  • rules/state-lift-state.md

More from Vercel

See all →

Vercel React Best PracticesTop pick

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure…

FrontendVercel34k

Deploy To Vercel

Deploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a…

Cloud & DevOpsVercel34k

Vercel CLI With Tokens

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to…

Cloud & DevOpsVercel34k

Vercel Optimize

Use for Vercel cost and performance optimization on deployed projects, especially Next.js, SvelteKit, Nuxt, and limited Astro apps. Collect Vercel metrics, usage, project config…

Cloud & DevOpsVercel34k

More Claude skills for frontend development

See all →

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts…

FrontendAnthropic187k

Angular Migration

Migrate from AngularJS to Angular using hybrid mode, incremental component rewriting, and dependency injection updates. Use when upgrading AngularJS applications, planning…

FrontendSeth Hobson42k

Modern Javascript Patterns

Master ES6+ features including async/await, destructuring, spread operators, arrow functions, promises, modules, iterators, generators, and functional programming patterns for…

FrontendSeth Hobson42k

Nextjs App Router Patterns

Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or…

FrontendSeth Hobson42k