mcpField
A
adding-feature-flags

adding-feature-flags

github.com/revitalb-portDevelopment077 installsUpdated 11w ago
Repository

About adding-feature-flags

adding-feature-flags is a skill that guides developers through adding feature flags for toggles, gradual rollouts, and A/B tests. It describes PostHog-based evaluation as well as a local approach using environment variables.

Key features

  1. 01Guides feature flag implementation
  2. 02Covers PostHog client-side evaluation
  3. 03Explains server-side flag evaluation
  4. 04Provides an environment-variable-based local option
  5. 05Includes rollout cleanup and caching guidance

Use cases

  1. 01Gradually roll out a user-facing feature
  2. 02Enable features by user properties or rollout percentage
  3. 03Use local toggles without a third-party service

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/revitalb-port/skills-registry-demo --skill adding-feature-flags

After installing, type/adding-feature-flagsin Claude Code to confirm it loaded.

Details

From the project README

Add Feature Flags

Use this skill when the user asks to add feature flags, feature toggles, gradual rollouts, or A/B testing.

Option A: PostHog Feature Flags (Recommended)

  1. Install PostHog if not already present:

    npm install posthog-js

  2. Use feature flags in code:

    import { useFeatureFlagEnabled } from "posthog-js/react";

function MyComponent() {
  const showNewFeature = useFeatureFlagEnabled("new-checkout-flow");
  if (showNewFeature) return <NewCheckout />;
  return <OldCheckout />;
}

  3. Server-side evaluation — for server components or API routes:

    import { PostHog } from "posthog-node";

const posthog = new PostHog(process.env.POSTHOG_API_KEY!);
const isEnabled = await posthog.isFeatureEnabled("new-checkout-flow", userId);

  4. Create flags in the PostHog dashboard — set up targeting rules based on user properties, percentage rollouts, or cohorts.

Option B: Simple Local Feature Flags

For projects that don't need a third-party service:

  1. Create a flags config — lib/feature-flags.ts:

    export const FLAGS = {
  NEW_CHECKOUT: process.env.NEXT_PUBLIC_FF_NEW_CHECKOUT === "true",
  DARK_MODE: process.env.NEXT_PUBLIC_FF_DARK_MODE === "true",
} as const;

  2. Use in components:

    import { FLAGS } from "@/lib/feature-flags";

function App() {
  return FLAGS.NEW_CHECKOUT ? <NewCheckout /> : <OldCheckout />;
}

  3. Add env vars — add flags to .env and .env.example:

    NEXT_PUBLIC_FF_NEW_CHECKOUT=false
NEXT_PUBLIC_FF_DARK_MODE=true

Notes

  • Use feature flags for all user-facing changes during rollout, not just experiments.
  • Clean up stale flags — remove the flag and the old code path once a feature is fully rolled out.
  • For server-side flags, cache the evaluation result to avoid per-request API calls.
  • Name flags descriptively: new-checkout-flow not flag-1.

Comments

Markdown supported