К основному содержанию
скилл CX Codex

feature-flags · react — скилл для Claude Code: флаги React и @gate

Скилл для работы с фича-флагами в репозитории React: подсказывает, где живут флаги, как гейтить тесты и почему падает конкретный канал.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add react/react --skill feature-flags -a claude-code
Открыть на GitHub

Что делает feature-flags

Скилл описывает, как устроены фича-флаги в React. Основные значения лежат в packages/shared/ReactFeatureFlags.js, а для отдельных каналов есть форки: ReactFeatureFlags.www.js, ReactFeatureFlags.native-fb.js, ReactFeatureFlags.test-renderer.js. Если флаг должен меняться в www или React Native, в форк-файле его ставят в __VARIANT__.

Гейтить тесты можно двумя способами. Прагма @gate на уровне теста подходит, когда без флага функциональности нет вовсе: тест тогда пропускается, а не падает. Инлайновый gate(flags => flags.name) нужен, когда поведение различается, и обе ветки должны выполняться. Синтаксис именно такой, gate('name') не сработает.

Добавление флага — это четыре шага: значение по умолчанию в основном файле, затем во всех форк-файлах, __VARIANT__ там, где нужно варьирование, и гейт в тестах. Забыть хотя бы один форк — типовая ошибка, из-за неё тесты канала ведут себя не так, как ожидается. Состояния флагов по каналам показывает /flags, сравнить два канала можно через /flags --diff <channel1> <channel2>.

Какие задачи решает

  • разобраться, в каком файле лежит нужный фича-флаг
  • загейтить тест прагмой @gate, чтобы он пропускался без флага
  • добавить новый флаг сразу во все форк-файлы
  • сравнить состояния флагов между двумя каналами
  • прогнать тесты канала www в обоих вариантах __VARIANT__

Примеры запросов агенту

  • Тест на view transitions падает — проверь, нужна ли прагма @gate enableViewTransition.
  • Добавь новый флаг в ReactFeatureFlags.js и во все форк-файлы, в www поставь __VARIANT__.
  • Сравни флаги между каналами: /flags --diff www native-fb.

Как установить feature-flags

1Через Skills CLI (Vercel)

npx skills add react/react --skill feature-flags -a claude-code

2Вручную: положить файлы

~/.claude/skills/feature-flags/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/feature-flags/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о feature-flags

Как установить feature-flags в Claude Code?

Выполните npx skills add react/react --skill feature-flags -a claude-code. Скилл появится по пути ~/.claude/skills/feature-flags/SKILL.md.

Что делает скилл feature-flags?

Помогает разбираться с фича-флагами React: где они хранятся, как гейтить тесты через @gate и инлайновый gate(), как добавить новый флаг и найти причину падения тестов в отдельном канале.

Чем @gate отличается от инлайнового gate()?

@gate ставится на весь тест и пропускает его, если флаг выключен. Инлайновый gate(flags => flags.name) оставляет тест запущенным и переключает ожидания внутри него.

Исходный текст

SKILL.md · MIT
---
name: feature-flags
description: Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
---

# React Feature Flags

## Flag Files

| File | Purpose |
|------|---------|
| `packages/shared/ReactFeatureFlags.js` | Default flags (canary), `__EXPERIMENTAL__` overrides |
| `packages/shared/forks/ReactFeatureFlags.www.js` | www channel, `__VARIANT__` overrides |
| `packages/shared/forks/ReactFeatureFlags.native-fb.js` | React Native, `__VARIANT__` overrides |
| `packages/shared/forks/ReactFeatureFlags.test-renderer.js` | Test renderer |

## Gating Tests

### `@gate` pragma (test-level)

Use when the feature is completely unavailable without the flag:

```javascript
// @gate enableViewTransition
it('supports view transitions', () => {
  // This test only runs when enableViewTransition is true
  // and is SKIPPED (not failed) when false
});
```

### `gate()` inline (assertion-level)

Use when the feature exists but behavior differs based on flag:

```javascript
it('renders component', async () => {
  await act(() => root.render(<App />));

  if (gate(flags => flags.enableNewBehavior)) {
    expect(container.textContent).toBe('new output');
  } else {
    expect(container.textContent).toBe('legacy output');
  }
});
```

## Adding a New Flag

1. Add to `ReactFeatureFlags.js` with default value
2. Add to each fork file (`*.www.js`, `*.native-fb.js`, etc.)
3. If it should vary in www/RN, set to `__VARIANT__` in the fork file
4. Gate tests with `@gate flagName` or inline `gate()`

## Checking Flag States

Use `/flags` to view states across channels. See the `flags` skill for full command options.

## `__VARIANT__` Flags (GKs)

Flags set to `__VARIANT__` simulate gatekeepers - tested twice (true and false):

```bash
/test www <pattern>              # __VARIANT__ = true
/test www variant false <pattern> # __VARIANT__ = false
```

## Debugging Channel-Specific Failures

1. Run `/flags --diff <channel1> <channel2>` to compare values
2. Check `@gate` conditions - test may be gated to specific channels
3. Run `/test <channel> <pattern>` to isolate the failure
4. Verify flag exists in all fork files if newly added

## Common Mistakes

- **Forgetting both variants** - Always test `www` AND `www variant false` for `__VARIANT__` flags
- **Using @gate for behavior differences** - Use inline `gate()` if both paths should run
- **Missing fork files** - New flags must be added to ALL fork files, not just the main one
- **Wrong gate syntax** - It's `gate(flags => flags.name)`, not `gate('name')`

© react · MIT · react/react

Похожие скиллы

Всё по теме «Тесты и QA» →
feature-flags-architect claude-code-skills Ведёт фиче-флаги по циклу: завести, раскатить, погасить. Пригодится, когда флаги копятся и никто не помнит, какие ещё живы. 469установок vercel-flags официальный Vercel Labs Скилл помогает внедрять фиче-флаги через Vercel Flags и SDK flags v4. Пригодится для настройки постепенных раскаток, A/B-тестов и Flags Explorer в Next.js или SvelteKit. CX Codex GP ChatGPT 4установок improve-codebase-architecture Matt Pocock Скилл ищет архитектурные узкие места в кодовой базе и показывает варианты углубления модулей в HTML-отчёте. Подойдёт для ревью перед рефакторингом. 1 163 035установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. CX Codex +1 678 700установок tdd Matt Pocock Скилл управляет циклом красный-зелёный в TDD: проверяет, что тесты пишутся до кода, держит их на уровне публичных интерфейсов и не завязывает на внутреннюю структуру. 1 141 062установок skill-creator официальный anthropics Помогает создать новый скилл, доработать существующий и проверить результат через тестовые промпты и оценки. 414 180установок agent-browser vercel-labs Скилл управляет браузером через CLI: открывает страницы, заполняет формы, нажимает кнопки и проверяет веб-приложения. Подходит для задач, где агенту нужно действовать в интерфейсе. CX Codex +1 1 200 000установок prototype Matt Pocock Создаёт временный прототип, чтобы проверить логику, модель состояния или вид интерфейса до работы над основным кодом. 986 201установок

Из того же набора5

Спонсоры проекта

Компании, которые помогают держать аналитику открытой