React composition patterns skill: what it does and how to install it

Source: vercel-labs/agent-skills · Maintainer: Vercel · License: MIT (per the SKILL.md frontmatter and repo README; no LICENSE file in the repo) · Checked: 24 October 2026

What is the React composition patterns skill?

The React composition patterns skill teaches your coding agent to build React components out of small composable parts instead of one component with a growing pile of boolean props. It covers compound components, state lifted into providers, explicit variant components, children over render props, and the React 19 API changes. It is for developers who build component libraries or shared UI with an agent and want the agent to stop adding isThread, isEditing and isDMThread flags.

The skill lives in the composition-patterns folder of vercel-labs/agent-skills, but its frontmatter name is vercel-composition-patterns, and that is the name you install it by. The description reads: "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."

As of 24 October 2026, its skills.sh page listed about 414,800 installs (snapshot, 24 October 2026).

What does it do?

The SKILL.md tells the agent to reference the rules when refactoring components with many boolean props, building reusable component libraries, designing flexible component APIs, reviewing component architecture, or working with compound components and context providers. Like Vercel's other rule skills, it works as an index: a priority table, a one-line summary per rule, and a pointer to the full rule file.

The four categories, as the SKILL.md ranks them:

What each rule asks of the agent:

• Avoid boolean props. Don't customize behavior with flags like isThread or isEditing. The rule file says "Each boolean doubles possible states and creates unmaintainable conditional logic."
• Use compound components. Structure complex components as a set of subcomponents (Composer.Frame, Composer.Input, Composer.Footer) that read shared state from context, so consumers compose only the pieces they need.
• Lift state into providers. Move state into a provider so components outside the main UI, like a forward button in a dialog footer, can reach it without prop drilling, refs or effects that sync state upward.
• Define a generic context interface. Shape the context as state, actions and meta, so the same UI can run on different state implementations.
• Decouple state from UI. The provider is the only place that knows whether state comes from useState, Zustand or a server sync.
• Create explicit variants. Write ThreadComposer and EditComposer instead of one Composer with modes.
• Prefer children over render props. Use children for static structure, and keep render props for cases where the parent passes data back to the child.
• React 19 changes. ref is a regular prop, so forwardRef isn't needed, and use() replaces useContext().

Every rule file has a short explanation, an incorrect example and a correct example. The examples share one running case, a chat message composer with channel, thread, DM, edit and forward variants, which makes the rules easy to compare.

What's in the folder:

• SKILL.md: the priority table and rule index.
• rules/: 8 rule files, plus _sections.md and _template.md for maintainers.
• AGENTS.md: all rules compiled into one document of about 950 lines, which the SKILL.md offers as "the complete guide with all rules expanded."
• README.md and metadata.json: structure notes for contributors and document metadata (Vercel Engineering, January 2026, with references to react.dev pages on context and use).

How do you install the composition patterns skill?

skills.sh lists this command for the skills CLI:

npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-composition-patterns

Use vercel-composition-patterns, not the folder name. The CLI matches --skill against the name in each SKILL.md's frontmatter. Add -g to install for every project, or -a claude-code to skip the agent prompt. Running npx skills add vercel-labs/agent-skills with no --skill, as the repo README shows, lets you choose from all of Vercel's skills in the repo.

For Claude Code, the skill lands in your project's .claude/skills/vercel-composition-patterns/ folder, or ~/.claude/skills/vercel-composition-patterns/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

claude.ai. Custom skills upload as a ZIP of the skill folder under Customize, then Skills (Claude Help Center). Unlike some of Vercel's skills, this one has no prebuilt ZIP in the repo, so zip the folder yourself. The Agent Skills spec says the name must match the parent folder, so rename the folder to vercel-composition-patterns first.

How do you use it?

The description names compound components, render props, context providers and component architecture, so the agent should load it when your request touches those. To be sure, name it: "use the composition patterns skill."

Example prompts (suggestions, not quotes from the repo):

• "Our Modal has eleven boolean props. Refactor it into compound components and show the call sites before and after."
• "Design the API for a reusable DataTable with sorting, selection and an optional toolbar. Follow the composition patterns skill."
• "This form's state is synced up to the parent with useEffect. Lift it into a provider instead."
• "We're on React 19. Remove forwardRef from the input components and switch useContext calls to use."
• "Review the components/editor folder for render props that should be children."

There are no packages, CLIs or API keys to install. The examples use React with TypeScript; some use React Native's TextInput, but the patterns are the same on the web.

Tips and limits

• It is guidance, not a refactoring tool. The skill tells the agent what good structure looks like. Moving a widely used component to compound components touches every call site, so ask for a plan first on big components.
• Impact labels disagree in places. The SKILL.md rates component architecture High, while the architecture-avoid-boolean-props rule file and the folder README label it Critical. The README also lists only three categories and leaves out the React 19 rule. Treat the SKILL.md table as the index and the rule files as the detail.
• Check your React version. The react19- rule is marked "React 19+ only." On React 18 the agent should skip it; push back if it removes forwardRef anyway.
• Composition isn't free. More subcomponents and a context provider add files and indirection. For a small component used in two places, a couple of props can still be the simpler choice.
• Security. The folder has no scripts. As of 24 October 2026, its skills.sh page showed Pass from Gen Agent Trust Hub, Socket and Snyk.
• License. The SKILL.md frontmatter says license: MIT and the repo README ends with "MIT", but the repo has no LICENSE file.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box. Kipt reads the SKILL.md and its files, including the rules/ folder; for a repo with many skills, like this one, it shows a list to pick from, so you can take the React best practices skill at the same time. You can also drop the folder or a .zip. Your skills live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Vercel.

Similar skills

• React best practices skill: Vercel's 70 React and Next.js performance rules, from the same repo.
• React Native skill: Vercel's React Native and Expo rules, which reuse the compound component pattern for design systems.
• shadcn skill: the official shadcn/ui skill, whose components are built in a composable style.
• Web design guidelines skill: Vercel's UI and accessibility audit.