feature-flags · react — скилл для Claude Code: флаги React и @gate
Скилл для работы с фича-флагами в репозитории React: подсказывает, где живут флаги, как гейтить тесты и почему падает конкретный канал.
npx skills add react/react --skill feature-flags -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/feature-flags/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/feature-flags/
1Через Skills CLI (Vercel)
npx skills add react/react --skill feature-flags -a codex2Вручную: положить файлы
.agents/skills/feature-flags/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add react/react --skill feature-flags -a cursor2Вручную: положить файлы
.cursor/skills/feature-flags/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install react/react feature-flags2Вручную: положить файлы
.github/skills/feature-flags/SKILL.md1Через Skills CLI (Vercel)
npx skills add react/react --skill feature-flags -a gemini-cli2Командой платформы
gemini skills install https://github.com/react/react --path .claude/skills/feature-flagsВручную: положить файлы
.devin/skills/feature-flags/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add react/react --skill feature-flags -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в 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