New to Claude Skills? Learn how to install them →

Rreact on GitHub

React Feature Flags

Free

Manage and debug feature flags in React efficiently.

by react247.1k stars on react/react
Updated Aug 10, 2026
Get this skill

Free · Opens the source repo

What React Feature Flags does

React Feature Flags is a specialized tool designed for developers working with feature flags in React applications. It provides a structured approach to managing feature flags, enabling developers to easily add, update, and debug flags across different channels. By utilizing the built-in flag files, developers can control the availability of experimental features, ensuring that tests run only when specific flags are enabled. This is particularly useful for maintaining the stability of the application while experimenting with new functionalities.

The skill includes a set of predefined flag files that serve different purposes, such as default flags and channel-specific overrides. Developers can leverage the @gate pragma for test-level gating, ensuring that certain tests are only executed when the corresponding feature flag is enabled. Additionally, the inline gate() function allows for more granular control over assertions based on the current flag states, making it easier to handle variations in behavior depending on the feature flag status.

Adding new flags is straightforward, requiring updates to the main flag file and any relevant fork files. This ensures consistency across different environments, such as web and React Native. The skill also provides commands for checking flag states and debugging channel-specific test failures, helping developers quickly identify issues related to feature flags.

Overall, React Feature Flags is an essential tool for React developers who need to implement and manage feature flags effectively, ensuring a smoother development and testing process while minimizing the risk of introducing bugs during feature experimentation.

When to use it

Use this skill when you need to implement or debug feature flags in your React projects, especially when working with multiple channels or variants.

When not to use it

This skill may not be suitable for projects that do not utilize feature flags or for developers unfamiliar with React's flag management practices.

What you can build with it

Debugging Feature Flag Issues

When a feature flag test fails, use this skill to identify the root cause by checking flag states and comparing channel values.

Adding New Features Safely

Implement new features behind flags to control their rollout, ensuring they are tested thoroughly before being enabled for all users.

Testing Across Channels

Utilize the skill to manage and test feature flags across different environments like web and React Native, ensuring consistent behavior.

How to install React Feature Flags

View source

1. Install with the skills CLI

npx skills add react/react/feature-flags --agent claude-code

2. Or install it manually

Download the skill folder and drop it into ~/.claude/skills/ for all projects, or .claude/skills/ to scope it to one repo. Restart Claude Code so it picks up the new skill.

Anthropic's agentic coding CLI, and the reference implementation of Agent Skills. Drop a skill folder into ~/.claude/skills and Claude Code loads it automatically whenever a task matches the skill's description. Claude Code docs

Inside SKILL.md

Written by react

React Feature Flags

Flag Files

FilePurpose
packages/shared/ReactFeatureFlags.jsDefault flags (canary), __EXPERIMENTAL__ overrides
packages/shared/forks/ReactFeatureFlags.www.jswww channel, __VARIANT__ overrides
packages/shared/forks/ReactFeatureFlags.native-fb.jsReact Native, __VARIANT__ overrides
packages/shared/forks/ReactFeatureFlags.test-renderer.jsTest 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')

Frequently asked questions about React Feature Flags

Similar skills