Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.
bunx add-skill facebook/react -s feature-flagsLoading…
| 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 |
@gate pragma (test-level)Use when the feature is completely unavailable without the flag:
// @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:
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');
}
});
ReactFeatureFlags.js with default value*.www.js, *.native-fb.js, etc.)__VARIANT__ in the fork file@gate flagName or inline gate()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):
/test www <pattern> # __VARIANT__ = true
/test www variant false <pattern> # __VARIANT__ = false
/flags --diff <channel1> <channel2> to compare values@gate conditions - test may be gated to specific channels/test <channel> <pattern> to isolate the failurewww AND www variant false for __VARIANT__ flagsgate() if both paths should rungate(flags => flags.name), not gate('name')Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release channels.
Use when you need to run Flow type checking, or when seeing Flow type errors in React code.
Use when you want to validate changes before committing, or when you need to check all React contribution requirements.
Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.