adding-feature-flags（添加功能标志）

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.