New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Official agent skill

Vercel Composition Patterns

by supabase in supabase/supabase

React composition patterns that scale. An agent skill from supabase/supabase.

OfficialMITAuto-check passedDevelopment

Install Vercel Composition Patterns

skills CLI
$ npx skills add supabase/supabase --skill vercel-composition-patterns -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install supabase/supabase vercel-composition-patterns --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/supabase/supabase.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/vercel-composition-patterns .claude/skills/vercel-composition-patterns && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
vercel-composition-patterns
GitHub stars
111k
Used in
59 other repos
Token cost
~726 tokens
SKILL.md length
262 words
Files
9
Skills in repo
22
Repo updated
First seen
Licence
MIT

At a glance

React composition patterns that scale. An agent skill from supabase/supabase.

  • Works in 4 steps: Component Architecture (HIGH) → State Management (MEDIUM) → Implementation Patterns (MEDIUM) → …
  • Refactoring components with boolean prop proliferation
  • SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use, plus 1 more section
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Vercel Composition Patterns is an agent skill from supabase/supabase, published by the product's own GitHub organization. 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.

Its SKILL.md is about 730 tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files (for example `rules/architecture-avoid-boolean-props.md`, `rules/architecture-compound-components.md` and `rules/patterns-children-over-render-props.md`).

It sits in Development, covering Design patterns and Design systems. It works with React and Vercel. The repository describes itself as: The Postgres development platform. Supabase gives you a dedicated Postgres database to build your web, mobile, and AI applications. The licence is MIT.

When your agent uses it

  • Refactoring components with boolean prop proliferation
  • Building flexible component libraries
  • Designing reusable APIs
  • Tasks involving compound components

Example prompts

  • “/vercel-composition-patterns”

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Component Architecture (HIGH)
  2. State Management (MEDIUM)
  3. Implementation Patterns (MEDIUM)
  4. React 19 APIs (MEDIUM)

What it can do on your machine

Read from SKILL.md and the folder at commit 26c838a. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Vercel Composition Patterns loads about 726 tokens when it runs. Until then it costs about 85 tokens; SKILL.md has 262 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~85
When it runs · the whole SKILL.md, loaded when a task matches
~726

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from supabase/supabase at commit 26c838a, republished under its MIT licence (© supabase). 262 words, ~726 tokens.

Download SKILL.mdSave it as .claude/skills/vercel-composition-patterns/SKILL.md (or your agent's skills folder). This skill also uses 8 other files; get the full folder from GitHub.
name
vercel-composition-patterns
description
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.
license
MIT
metadata.author
vercel
metadata.version
1.0.0

React Composition Patterns

Composition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale.

When to Apply

Reference these guidelines when:

  • Refactoring components with many boolean props
  • Building reusable component libraries
  • Designing flexible component APIs
  • Reviewing component architecture
  • Working with compound components or context providers

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Component ArchitectureHIGHarchitecture-
2State ManagementMEDIUMstate-
3Implementation PatternsMEDIUMpatterns-
4React 19 APIsMEDIUMreact19-

Quick Reference

1. Component Architecture (HIGH)
  • architecture-avoid-boolean-props - Don't add boolean props to customize behavior; use composition
  • architecture-compound-components - Structure complex components with shared context
2. State Management (MEDIUM)
  • state-decouple-implementation - Provider is the only place that knows how state is managed
  • state-context-interface - Define generic interface with state, actions, meta for dependency injection
  • state-lift-state - Move state into provider components for sibling access
3. Implementation Patterns (MEDIUM)
  • patterns-explicit-variants - Create explicit variant components instead of boolean modes
  • patterns-children-over-render-props - Use children for composition instead of renderX props
4. React 19 APIs (MEDIUM)

⚠️ React 19+ only. Skip these patterns if you're on React 18 or earlier.

  • react19-no-forwardref - Don't use forwardRef; use use() instead of useContext()

How to Use

Read individual rule files for detailed explanations and code examples:

rules/architecture-avoid-boolean-props.md
rules/state-context-interface.md

Each rule file contains:

  • Brief explanation of why it matters
  • Incorrect code example with explanation
  • Correct code example with explanation
  • Additional context and references

Full Compiled Document

For the complete guide with all rules expanded, read the files under rules/

© supabase, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 8 other files in .agents/skills/vercel-composition-patterns of supabase/supabase.

  • SKILL.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

Open the folder on GitHubat commit 26c838a

Used in at least 46 other repositories

We found 66 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 59 other GitHub owners. This page covers the copy in supabase/supabase, which our catalogue first saw on October 8, 2026.

…and 16 more copies not listed here.

Compare with similar skills

Vercel Composition Patterns next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Vercel Composition Patterns compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Vercel Composition Patterns this skillsupabase/supabase111k59 repos~726Automated safety check: PassMIT
React Render Types CompositionHorusGoul/eslint-plugin-react-render-types111—~1.1kAutomated safety check: PassMIT
Vercel Geist Design Systemsyhily/kobato114—~3.3kAutomated safety check: PassMIT
Cosscrafter-station/petdex4.2k—~1.4kAutomated safety check: PassMIT
Nextjs Nextra Starter Distillpdsuwwz/nextjs-nextra-starter318—~596Automated safety check: PassMIT
Nextjs Nextra Starter Distill Zhpdsuwwz/nextjs-nextra-starter318—~313Automated safety check: PassMIT

Similar skills

  • React Render Types Composition

    HorusGoul/eslint-plugin-react-render-types

    Composition patterns for building React components with @renders type annotations from eslint-plugin-react-render-types.

    111 GitHub stars~1.1k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Vercel Geist Design System

    syhily/kobato

    Community skill for applying the Geist design system to Vercel-inspired rendered frontend UI across React/Next.js/Vite/Astro/Svelte/Vue/HTML/CSS, Tailwind, shadcn, and Radix.

    114 GitHub stars~3.3k tokensUpdated 7 days ago
    Frontend & DesignAuto-check passed

  • Coss

    crafter-station/petdex

    Helps implement coss UI components correctly. An agent skill from crafter-station/petdex.

    4.2k GitHub stars~1.4k tokensUpdated 9 days ago
    Frontend & DesignAuto-check passed

  • Nextjs Nextra Starter Distill

    pdsuwwz/nextjs-nextra-starter

    Distill and apply this repository's Next.js Nextra starter architecture, implemented features, extension points, and migration patterns.

    318 GitHub stars~596 tokensUpdated 20 days ago
    Frontend & DesignAuto-check passed

  • Nextjs Nextra Starter Distill Zh

    pdsuwwz/nextjs-nextra-starter

    蒸馏并应用当前仓库的 Next.js Nextra 启动模板架构、已实现功能、二次开发扩展点与迁移模式。适用于理解本项目、继续二次开发、修改 docs/landing/i18n/theme/auth/UI 行为，或把这些 Next.js 16 + Nextra 4 + Tailwind CSS 4 模式复用到其他项目。

    318 GitHub stars~313 tokensUpdated 20 days ago
    Frontend & DesignAuto-check passed

  • Components Build

    Asymmetric-al/core

    Build modern, composable, and accessible React UI components following the components.build specification.

    381 GitHub stars~2.1k tokensUpdated today
    Frontend & DesignAuto-check passed

More from supabase/supabase

All 22 skills in this repo

  • Clickhouse Logs Queries

    supabase/supabase

    Official

    Write, review, and migrate Supabase logs queries against the ClickHouse-backed logs table (the logs.all.otel analytics endpoint).

    111k GitHub stars~2.4k tokensUpdated today
    Auto-check passed

  • Review The Docs

    supabase/supabase

    Official

    Review Supabase docs changes locally in your supabase/supabase checkout — either an open PR (triage, classify, verify) or your own branch before opening a PR (local self-review).

    111k GitHub stars~4.6k tokensUpdated today
    Auto-check passed

  • Vitest

    supabase/supabase

    Official

    Vitest API and config reference (Jest-compatible) — mocking with vi., spies, fake timers, coverage configuration, fixtures, snapshots, and test filtering.

    111k GitHub starsUsed in 12 repos~1.1k tokens
    Auto-check passed

  • Safe SQL Execution

    supabase/supabase

    Official

    A skill your agent uses whenever code will build, return, fetch, or execute SQL that runs against a user's real Postgres database — even when the request reads like an ordinary feature or bug fix…

    111k GitHub stars~4.2k tokensUpdated today
    Auto-check passed

  • Studio E2E Tests

    supabase/supabase

    Official

    Write and run Playwright E2E tests for Supabase Studio (e2e/studio).

    111k GitHub stars~2.8k tokensUpdated today
    Auto-check passed

  • Studio Error Handling

    supabase/supabase

    Official

    Error display and troubleshooting pattern for Supabase Studio.

    111k GitHub stars~1.3k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about Vercel Composition Patterns

What does Vercel Composition Patterns do?

React composition patterns that scale. An agent skill from supabase/supabase. Vercel Composition Patterns is an agent skill from supabase/supabase, published by the product's own GitHub organization. React composition patterns that scale.

When should I use Vercel Composition Patterns?

Vercel Composition Patterns fits situations like: refactoring components with boolean prop proliferation; building flexible component libraries; designing reusable APIs; tasks involving compound components.

How do I install Vercel Composition Patterns in Claude Code?

Run `npx skills add supabase/supabase --skill vercel-composition-patterns -a claude-code`. Or copy the skill folder (.agents/skills/vercel-composition-patterns in supabase/supabase) into .claude/skills/vercel-composition-patterns in your project. Claude Code loads it when a task matches its description.

How do I install Vercel Composition Patterns in Codex?

Run `npx skills add supabase/supabase --skill vercel-composition-patterns -a codex`. Or copy the skill folder (.agents/skills/vercel-composition-patterns in supabase/supabase) into .agents/skills/vercel-composition-patterns in your project. Codex loads it when a task matches its description.

Can I use Vercel Composition Patterns in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add supabase/supabase --skill vercel-composition-patterns -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/vercel-composition-patterns, .gemini/skills/vercel-composition-patterns, .github/skills/vercel-composition-patterns and .opencode/skills/vercel-composition-patterns in your project.

What does Vercel Composition Patterns need to run?

SKILL.md names no scripts, command-line tools or credentials: Vercel Composition Patterns is instructions for the agent only.

Does Vercel Composition Patterns access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Vercel Composition Patterns safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Vercel Composition Patterns use?

Vercel Composition Patterns is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Vercel Composition Patterns use?

About 726 tokens (SKILL.md is roughly 2.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Vercel Composition Patterns?

Skills that share tags, products or a category with Vercel Composition Patterns: React Render Types Composition (HorusGoul/eslint-plugin-react-render-types, 111 stars), Vercel Geist Design System (syhily/kobato, 114 stars), Coss (crafter-station/petdex, 4.2k stars) and Nextjs Nextra Starter Distill (pdsuwwz/nextjs-nextra-starter, 318 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Vercel Composition Patterns?

supabase (a GitHub organization, an official publisher) maintains it in supabase/supabase, which has 111,222 GitHub stars. The repository holds 22 skills in this directory. The repository was last updated on October 8, 2026.

Source: supabase/supabase on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.