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
252k14 skills4 agents

Claude Code

$ npx -y skills add react/react --skill feature-flags --agent claude-code

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
@facebook
Ships withreact

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

252k14 skills4 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
252.5k
Star history of facebook/react on GitHub, a chart by star-history.com

Other skills on react.

extract-errors

extract-errors

Use when adding new error messages to React, or seeing "unknown error code" warnings.

@facebook@facebookInstall Skill
fix

fix

Use when you have lint errors, formatting issues, or before committing code to ensure it passes CI.

@facebook@facebookInstall Skill
flags

flags

Use when you need to check feature flag states, compare channels, or debug why a feature behaves differently across release…

@facebook@facebookInstall Skill
flow

flow

Use when you need to run Flow type checking, or when seeing Flow type errors in React code.

@facebook@facebookInstall Skill
test

test

Use when you need to run tests for React core. Supports source, www, stable, and experimental channels.

@facebook@facebookInstall Skill
verify

verify

Use when you want to validate changes before committing, or when you need to check all React contribution requirements.

@facebook@facebookInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
act-on-feedback

act-on-feedback

Act on user feedback attached to the current session. Use when the user submits feedback on the session's changes via the Submit…

vscode4d195k
@microsoft@microsoftInstall Skill

Questions about feature-flags.

Which coding agents can use feature-flags?
feature-flags installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.