mcpField
A
adding-feature-flags

adding-feature-flags

github.com/spencerpaulyDevelopment868367 installsUpdated 13w ago
Repository

About adding-feature-flags

A coding skill for adding feature flags with PostHog or a local configuration. It describes client- and server-side evaluation as well as targeting rules and rollout practices.

Key features

  1. 01PostHog client-side flags
  2. 02Server-side flag evaluation
  3. 03Dashboard targeting rules
  4. 04Environment-based local flags
  5. 05Flag cleanup guidance

Use cases

  1. 01Gradually rolling out a new feature
  2. 02Targeting flags by user properties or cohorts
  3. 03Running flags without a third-party service
  4. 04Evaluating flags in server routes

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --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