SubmitLog in
c/frontend › command
0votes

React composition patterns (Vercel)

Skill
submitted by u/client to c/frontend · 0 uses

Patterns for flexible React components: compound components, context and fewer boolean props.

Helps Claude design component APIs that scale, especially when a component has collected too many boolean props. It covers compound components, lifting state into providers, explicit variants and render props, with notes on React 19 changes. Rules are split into separate files with examples, plus a compiled AGENTS.md.

Try asking:

  • "This Modal has 12 boolean props, refactor it"
  • "Design a reusable Tabs component API"
  • "Turn this Select into a compound component"

Source: vercel-labs/agent-skills · MIT · by Vercel

0 commentsreport

Install this skill

Skills are folders with a SKILL.md file. Claude loads one on its own when a task matches its description. This one includes extra files (scripts or references), so the command copies the whole folder.

Claude Code: for every project
npx degit vercel-labs/agent-skills/skills/composition-patterns ~/.claude/skills/vercel-composition-patterns
Claude Code: this project only (commit it to share with your team)
npx degit vercel-labs/agent-skills/skills/composition-patterns .claude/skills/vercel-composition-patterns
View SKILL.mdSource

Made by Vercel, MIT license. Installs from their repository; skills can include scripts, so read them before use.

In the Claude apps, zip the folder and upload it under Settings → Capabilities → Skills.

More from c/frontend

See all of c/frontend →
0 comments

Log in to join the discussion.