Skip to content
Development
Skill

/feature-flags

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

From plugin
react
250k14 skills4 agents
Install
$ npx -y skills add facebook/react --skill feature-flags --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/feature-flags

Context preview

The summary Claude sees to decide when to auto-load this skill.

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

SKILL.md

feature-flags.SKILL.md
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:

// @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');
  }
});

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):

/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')`
Read more
Ships withreact

React is a JavaScript library for building user interfaces. Declarative: React makes it painless to create interactive UIs.

Get the whole plugin
Stats
250,412
Stars
51,337
Forks
Active
Maintenance
JavaScript
Language
MIT
License
1d ago
Last commit
13y ago
Created

Repo: facebook/react

Other skills on react.