Vercel-composition-patterns — скилл про составные React-компоненты

vercel-labs/agent-skills· Проверено 13.11.2026· 34 тыс.на GitHub

Паттерны композиции React-компонентов от Vercel: как заменить россыпь булевых пропсов составными компонентами, поднятием состояния и children. Отдельная группа правил — изменения API в React 19.

Как установить Vercel Composition Patterns

Личные скиллы лежат в ~/.claude/skills/, проектные — в .claude/skills/ репозитория. Проверка: команда /skills в сессии, вызов по имени — /vercel-composition-patterns.

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

Общая папка ~/.agents/skills/ (в проекте — .agents/skills/) читают Codex, Cursor, VS Code Copilot, Gemini CLI, Antigravity, OpenCode, Kilo Code, Goose, Qwen Code.

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

Установщик скиллов от Vercel, нужен Node.js 22.20 или новее. Без -g скилл ставится в текущий проект; флаг -a выбирает агента.

npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns -a claude-code

# для всех проектов
npx skills add vercel-labs/agent-skills --skill vercel-composition-patterns -g

Нужен тариф Pro, Max, Team или Enterprise с включённым выполнением кода.

Скачайте папку скилла с GitHub и упакуйте её в ZIP.
claude.ai → Customize → Skills → + → Create skill → Upload a skill
Загрузите ZIP и включите скилл переключателем.

Gemini CLI ставит скиллы из git-репозитория и хранит их в ~/.gemini/skills/.

gemini skills install https://github.com/vercel-labs/agent-skills.git --consent

# проверка
gemini skills list

Что умеет

Переписать компонент с кучей булевых пропсов на составные компоненты с общим контекстом

Вынести состояние в провайдер, чтобы соседние компоненты видели его без прокидывания пропсов

Сделать явные варианты компонента вместо булевых режимов

Заменить render-пропсы на children

Убрать forwardRef и перейти с useContext на use() в React 19

SKILL.md — оглавление из 4 групп: архитектура компонентов (HIGH), состояние, паттерны и React 19 (MEDIUM).

В rules/ 8 файлов: зачем правило, неверный и верный пример кода; AGENTS.md собирает всё в один документ.

Скриптов нет, агент только читает правила.

Что попросить агента

Отрефактори <Компонент>: у него 12 булевых пропсовАгент разобьёт его на составные компоненты с общим контекстом и явными вариантами

Спроектируй API для библиотеки компонентов <что>Агент заложит провайдер с интерфейсом state, actions, meta и композицию через children

Переведи компоненты на React 19Агент уберёт forwardRef и заменит useContext на use()

Ограничения

Правила группы React 19 к React 18 и старше не применяются.

Правил 8, все про архитектуру компонентов; про скорость — vercel-react-best-practices.

Лицензия MIT.

Описание из SKILL.md

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.

Частые вопросы

Где найти vercel labs agent skills?

На GitHub в vercel-labs/agent-skills, этот скилл — в папке skills/composition-patterns.

Какие скиллы Vercel есть для React?

vercel-react-best-practices про скорость, vercel-composition-patterns про архитектуру компонентов и vercel-react-native-skills для мобильных приложений.

Что за проблема с булевыми пропсами?

Каждый флаг вроде isCompact или showHeader добавляет режим, и компонент обрастает ветками. Скилл предлагает собирать варианты из частей.

Подойдёт ли для React 18?

Да, кроме группы React 19: её правила про forwardRef и use() скилл велит пропускать на React 18 и старше.

Чем отличается от vercel-react-best-practices?

Тот скилл про скорость: водопады, бандл, перерисовки. Этот — про устройство компонентов и их API.

Есть ли плагин для Claude Code?

Нет, маркетплейса плагинов в репозитории нет. Набор ставится командой npx skills add vercel-labs/agent-skills, отдельный скилл — с флагом --skill.