
React Feature Flags
FreeManage and debug feature flags in React efficiently.
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 source1. Install with the skills CLI
npx skills add react/react/feature-flags --agent claude-code2. 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 reactReact 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
- Add to
ReactFeatureFlags.jswith default value - Add to each fork file (
*.www.js,*.native-fb.js, etc.) - If it should vary in www/RN, set to
__VARIANT__in the fork file - Gate tests with
@gate flagNameor inlinegate()
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
- Run
/flags --diff <channel1> <channel2>to compare values - Check
@gateconditions - test may be gated to specific channels - Run
/test <channel> <pattern>to isolate the failure - Verify flag exists in all fork files if newly added
Common Mistakes
- Forgetting both variants - Always test
wwwANDwww variant falsefor__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), notgate('name')
Frequently asked questions about React Feature Flags
Similar skills
Agent Host Debug Logs
Analyze Agent Host debug logs for deeper insights.
Code OSS Dev - Launch + Debug
Launch and debug Code OSS with isolated profiles.
Phoenix CLI
Debug LLM applications with structured analysis tools.
Power Automate Debugging
Diagnose and fix Power Automate flow errors effectively.
Arize Trace
Inspect and export traces for LLM applications.
Runtime Behavior Probe
Investigate real runtime behavior with precision.
