Vibe Index
🎯

feature-flags

🎯Skill

from facebook/react

VibeIndex|
What it does

Manages React feature flags across channels, enabling targeted testing, gating, and debugging of experimental features with precise control.

feature-flags

Installation

Install skill:
npx skills add https://github.com/facebook/react --skill feature-flags
79
AddedJan 27, 2026
View on GitHubBack to Skills

Skill Details

SKILL.md

Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.

Overview

# 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());

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 # __VARIANT__ = true

/test www variant false # __VARIANT__ = false

```

Debugging Channel-Specific Failures

  1. Run /flags --diff to compare values
  2. Check @gate conditions - test may be gated to specific channels
  3. Run /test 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')

More from this repository6

🎯
fix🎯Skill

Automatically fixes code formatting and linting issues to ensure clean, compliant code before committing.

🎯
verify🎯Skill

Validates code changes by running formatting, linting, type checking, and testing across source and www directories.

🎯
test🎯Skill

Runs React codebase tests across different release channels with configurable flags and test patterns.

🎯
extract-errors🎯Skill

Extracts and manages error codes for React, helping developers identify and assign unique codes to new error messages.

🎯
flow🎯Skill

Runs Flow type checking for React code, detecting type errors across different renderers like DOM, browser, and React Native.

🎯
flags🎯Skill

Checks and compares feature flag states across different release channels with detailed visualization and debugging capabilities.