skills.rest
PostHog
PostHogOFFICIAL
Explore all skills by this author →
Website𝕏@PostHogGitHub

setting-feature-flags-in-storybook

Configure feature flags in Storybook stories using the featureFlags story parameter.

713|118|Updated Aug 11, 2020
Search Tags:#storybook#visual regression#feature flags#Testing#PostHog#multivariate#reAct
One-click install
npx skills add https://github.com/PostHog/posthog-foss --skill setting-feature-flags-in-storybook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: setting-feature-flags-in-storybook
Source: https://github.com/PostHog/posthog-foss/tree/main/.agents/skills/setting-feature-flags-in-storybook
Command: npx skills add https://github.com/PostHog/posthog-foss --skill setting-feature-flags-in-storybook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Writing Storybook stories for components gated behind feature flags often fails silently: imperatively calling featureFlagLogic.actions.setFeatureFlags passes in jest but renders the flag-off branch in visual-regression snapshots, producing wrong screenshots while unit tests stay green.

Core Features & Use Cases

  • Boolean flags via array form: Set parameters: { featureFlags: [FEATURE_FLAGS.MY_FLAG] } so flags evaluate to true in every story of the file.
  • Multivariate and experiment variants via record form: Pin a specific variant per story, e.g. featureFlags: { [FEATURE_FLAGS.THEME_OVERRIDE]: 'control' } for one story and 'intent_plus' for another.
  • Pitfall guidance: Explains why per-story parameters shallow-merge over meta-level flags (requiring re-listing), and why disabling posthog-js flags breaks the app shell.
  • Use Case: You are writing a Storybook story for a React component behind an A/B experiment flag and need both control and treatment arms rendered correctly in visual-regression snapshots.

Quick Start

Add the featureFlags parameter with the needed flag keys or variant values to my Storybook story so the gated component renders the flag-on branch.

Frequently Asked Questions about setting-feature-flags-in-storybook

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set feature flags in a Storybook story?▼

Use the featureFlags story parameter instead of calling featureFlagLogic actions. Pass an array of flag keys for boolean flags, or a record mapping flag keys to variant strings for multivariate flags, at either the meta or story level.

How to test multivariate feature flag variants in Storybook?▼

Use the record form of the featureFlags parameter, mapping the flag key to the variant string, such as { [FEATURE_FLAGS.THEME_OVERRIDE]: 'control' }. Define separate stories per experiment arm, each pinning a different variant value.

Why does my Storybook snapshot render the flag-off branch?▼

Imperatively calling setFeatureFlags gets wiped when posthog-js fires onFeatureFlags with an empty set in the built visual-regression Storybook. The featureFlags parameter writes to the always-merged persisted baseline, so the empty callback cannot clobber it.

Why do per-story featureFlags remove my meta-level flags?▼

Storybook shallow-merges story parameters over meta parameters, so a per-story featureFlags value replaces the meta-level one entirely. Re-list every meta flag you still need inside the story-level parameter.

Can I disable posthog-js feature flags to fix Storybook stories?▼

No. Disabling posthog-js flags suppresses the onFeatureFlags callback that sets receivedFeatureFlags, which the app shell requires before rendering. Every Scenes-App story then stalls behind a timeout and flakes.

Related Skills

Explore More Software Engineering Skills→
gaiastudio-aigaiastudio-ai
2

figma-integration

Gate premium Figma integration behind an enterprise license flag with markdown-only fallback.

Official
Basic
theslashdojotheslashdojo

jest

Run JavaScript and TypeScript unit tests with coverage and snapshot reports.

Official
Intermediate
thinkeloquentthinkeloquent

feature-flag-visibility

Gate presentational component containers behind optional feature flags.

Official
Intermediate
PostHogPostHog
58

feature-flags-nextjs

Manage and evaluate PostHog feature flags in Next.js apps.

Official
Advanced