vercel-composition-patterns

An agent skill by vercel-labs, from vercel-labs/agent-skills. Tags: api, design, developer-tools, react, web.

What it does

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

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

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

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/vercel-labs/agent-skills
cp -r agent-skills/skills/composition-patterns ~/.claude/skills/vercel-composition-patterns

Safety box score

Grade A, minimal risk: 0 of 100 risk points, rated 2026-10-19. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This is a documentation-only React composition guide: it contains markdown rules, examples, and metadata, but no scripts, installers, or runtime code. The main consideration is that it tells an agent how to refactor components and includes a React 19-specific section that should only be applied on React 19+ projects.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	0 (none)	No shell commands, scripts, or code-evaluation tooling is shipped; the files are markdown examples only.
Network access	0 (none)	The skill lists reference URLs like `https://react.dev`, but there is no code that fetches from or sends data to remote hosts.
Filesystem reach	0 (none)	Nothing reads, writes, or deletes files on the user's machine; the repository only contains documentation files such as `SKILL.md`, `README.md`, and `rules/*.md`.
Secrets & credentials	0 (none)	There is no handling of tokens, keys, passwords, `.env` files, browser sessions, or other secret material.
Privilege & persistence	0 (none)	The skill does not request sudo, global installs, services, scheduled tasks, or shell/OS configuration changes.
Instruction hijack surface	0 (none)	The text is instructional content for React refactoring and does not contain prompts to ignore instructions, hide behavior, or follow remote instructions.
Irreversible actions	0 (none)	It does not perform deploys, posts, payments, merges, or deletions; it only provides coding guidance.
Transparency	0 (none)	All shipped files are plain-text markdown or JSON; there are no binaries, base64 blobs, or generated installers.

Before installing

If you use this on a React 18 codebase, ignore the `react19-` section.
Skim `AGENTS.md` first if you want the full compiled guide; it is documentation, not executable setup code.

Rated 2026-10-19 by an automated review of 14 files from the skill's repository.

Source

Repository: vercel-labs/agent-skills (all skills from this repository)
Path: skills/composition-patterns/SKILL.md
Branch: main
Updated: 2026-09-19

figma — Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components.
expo-router — Framework (OSS). Navigation and routing for Expo Router.
shadcn-ui — Expert guidance for integrating and building applications with shadcn/ui components, including component discovery, installation, customization.
vercel-react-best-practices — React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing.
vercel-react-view-transitions — Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`.
algorithmic-art — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code.