AutoGineer
Generated banner for Instrument Feature Flags
Generated logo for Instrument Feature Flags

Instrument Feature Flags

PostHogOfficialCreated by PostHog

  • Skill
  • Tool integration
  • Data and AI
  • MIT
  • Low risk
Download ZIP

From the author

Add PostHog feature flags to gate new functionality. Use after implementing features or reviewing PRs to ensure safe rollouts with feature flag controls. Also handles initial PostHog SDK setup if not yet installed.
— the description by PostHog

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a structured approach to instrumenting PostHog feature flags within your codebase. It handles the end-to-end process, including detecting your platform, setting up the PostHog SDK if necessary, configuring environment variables, and implementing the code required to gate features. It emphasizes best practices such as using environment variables for configuration, preferring server-side evaluation to prevent UI flicker, and ensuring minimal, non-intrusive code changes.

What it does

  • Detects your project's platform and language automatically.
  • Initializes the PostHog SDK if it is not already present in the project.
  • Configures required environment variables securely without hardcoding.
  • Provides platform-specific code patterns for implementing feature flag checks.
  • Guides the integration of boolean and multivariate feature flags.
  • Ensures PostHog configuration does not break application boot or runtime stability.

When to use it

  • When you need to gate new functionality for controlled releases.
  • After implementing a new feature that requires a safe rollout strategy.
  • When reviewing pull requests that introduce features needing toggle controls.
  • When you need to set up PostHog instrumentation in a new or existing project.

Advantages

  • Supports a wide range of languages, frameworks, and platforms.
  • Promotes safe, production-ready instrumentation patterns.
  • Prevents common issues like UI flicker through server-side evaluation.
  • Maintains clean code by avoiding hardcoded configuration keys.

Usage examples

“Add a PostHog feature flag to gate the new checkout button in my React app.”
The agent will analyze your React project, verify PostHog setup, and provide the code snippet using posthog.isFeatureEnabled to conditionally render the button.
“I need to instrument a new feature flag for my Node.js backend.”
The agent will detect the Node.js environment, ensure the SDK is initialized, and guide you through adding the flag check logic to your server-side code.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/posthog/instrument-feature-flags/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip instrument-feature-flags.zip -d .agents/skills

Documentation by PostHog

Add PostHog feature flags

Use this skill to add PostHog feature flags that gate new or changed functionality. Use it after implementing features or reviewing PRs to ensure safe rollouts with feature flag controls. If PostHog is not yet installed, this skill also covers initial SDK setup. Supports any platform or language.

Supported platforms: React, Next.js, React Native, Web (JavaScript), Node.js, Python, PHP, Ruby, Go, Java, Rust, .NET, Elixir, Android, iOS, Flutter, and the REST API.

Instructions

Follow these steps IN ORDER:

STEP 1: Analyze the codebase and detect the platform.

Look for dependency files (package.json, pubspec.yaml, Podfile, Package.swift, requirements.txt, go.mod, Gemfile, composer.json, mix.exs, etc.) to determine the language and framework.

Look for lockfiles (pnpm-lock.yaml, package-lock.json, yarn.lock, bun.lockb, go.sum, pubspec.lock, Podfile.lock, Package.resolved, mix.lock) to determine the package manager.

  • Check for existing PostHog setup (SDK initialization, env vars, etc.). If PostHog is already installed and initialized, skip to STEP 3.

STEP 2: Research instrumentation. (Skip if PostHog is already set up.) 2.1. Find the reference file below that matches the detected platform — it is the source of truth for SDK initialization, flag evaluation methods, and framework-specific patterns. Read it now. 2.2. If no reference matches, fall back to your general knowledge and web search. Use posthog.com/docs as the primary search source.

STEP 3: Create or find the feature flag.

  • Check if a PostHog MCP server is connected. If available, use its tools to search for an existing feature flag the user wants to instrument, or create a new one.

  • If no MCP server is available, instruct the user to create the flag in the PostHog dashboard.

STEP 4: Plan release conditions.

  • Determine the rollout strategy (percentage rollout, user targeting, group targeting, etc.).

  • Plan how the feature flag will gate the new functionality in code.

STEP 5: Instrument the feature.

  • Add the feature flag code following the platform-specific reference patterns.

  • Use server-side evaluation when possible to avoid UI flicker.

  • Do not alter the fundamental architecture of existing files. Make additions minimal and targeted.

  • You must read a file immediately before attempting to write it.

STEP 6: Set up environment variables.

  • Check if the project already has PostHog environment variables configured (e.g. in .env, .env.local, or framework-specific env files). If valid values already exist, skip this step.

  • If the PostHog project token is missing, use the PostHog MCP server's projects-get tool to retrieve the project's api_token. If multiple projects are returned, ask the user which project to use. If the MCP server is not connected or not authenticated, ask the user for their PostHog project token instead.

  • For the PostHog host URL: check the projects-get MCP response for a region field — US maps to https://us.i.posthog.com, EU maps to https://eu.i.posthog.com. If the region is not available from the MCP response or from existing project configuration, ask the user: "Are you on PostHog US Cloud or EU Cloud?" Do not assume US Cloud.

  • Write these values to the appropriate env file using the framework's naming convention.

  • Reference these environment variables in code instead of hardcoding them.

Reference files

  • references/react.md - React feature flags installation

  • references/react-native.md - React native feature flags installation

  • references/web.md - Web feature flags installation

  • references/nodejs.md - Node.js feature flags installation

  • references/python.md - Python feature flags installation

  • references/django.md - Django

  • references/flask.md - Flask

  • references/php.md - Php feature flags installation

  • references/laravel.md - Laravel

  • references/ruby.md - Ruby feature flags installation

  • references/ruby-on-rails.md - Ruby on rails

  • references/go.md - Go feature flags installation

  • references/java.md - Java feature flags installation

  • references/rust.md - Rust feature flags installation

  • references/dotnet.md - .net feature flags installation

  • references/dotnet.md - .net

  • references/elixir.md - Elixir feature flags installation

  • references/android.md - Android feature flags installation

  • references/ios.md - Ios feature flags installation

  • references/usage.md - Ios SDK usage

  • references/flutter.md - Flutter feature flags installation

  • references/api.md - API feature flags installation

  • references/next-js.md - Next.js

  • references/adding-feature-flag-code.md - Adding feature flag code

  • references/best-practices.md - Best practices for production-ready flags

  • references/COMMANDMENTS.md - Framework-specific rules the integration must follow

Each platform reference contains SDK-specific installation, flag evaluation, and code examples. Find the one matching the user's stack. If unlisted, use the API reference as a fallback.

Key principles

  • Environment variables: Always use environment variables for PostHog keys. Never hardcode them.

  • Minimal changes: Add feature flag code alongside existing logic. Don't replace or restructure existing code.

  • Boolean flags first: Default to boolean flag checks unless the user specifically asks for multivariate flags.

  • Server-side when possible: Prefer server-side flag evaluation to avoid UI flicker.

Files

references/web.md

AI agents: this is one page from PostHog's docs. Full index of Markdown docs for LLMs: https://posthog.com/llms.txt

Web Feature Flags installation

Canonical URL: https://posthog.com/docs/feature-flags/installation/web

Cloud region: This page uses US Cloud hosts. For an EU Cloud project, use https://eu.i.posthog.com instead of https://us.i.posthog.com (ingestion host).

On this page

  • Choose an installation method

  • Send events

  • Use boolean feature flags

  • Use multivariate feature flags

  • Use feature flag payloads

  • Ensure flags are loaded

  • Reload feature flags

  • Running experiments

  • Next steps

  1. 1

    Choose an installation method

    Required

    You can either add the JavaScript snippet directly to your HTML or install the JavaScript SDK via your package manager.

    HTML snippet

    Add this snippet to your website within the <head> tag. This can also be used in services like Google Tag Manager:

    HTML

    <script>
    !function(t,e){var o,n,p,r;e.__SV||(window.posthog && window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}p||((p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",p.onerror=function(){p=null},(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r));var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],Object.defineProperty(u,"toString",{configurable:!0,enumerable:!0,writable:!0,value:function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e}}),Object.defineProperty(u.people,"toString",{configurable:!0,enumerable:!0,writable:!0,value:function(){return u.toString(1)+".people (stub)"}}),o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagResult isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
    posthog.init('<ph_project_token>', {
        api_host: 'https://us.i.posthog.com',
        defaults: '2026-08-30',
    })
</script>

    JavaScript SDK

    Install the PostHog JavaScript library using your package manager. Then, import and initialize the PostHog library with your project token and host:

    npm
    npm install posthog-js
    yarn
    yarn add posthog-js
    pnpm
    pnpm add posthog-js
    bun
    bun add posthog-js

    JavaScript

    import posthog from 'posthog-js'

posthog.init('<ph_project_token>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2026-08-30'
})

  2. 2

    Send events

    Recommended

    Once installed, PostHog will automatically start capturing events. You can also manually send events to test your integration:

    Click around and view a couple pages to generate some events. PostHog automatically captures pageviews, clicks, and other interactions for you.

    If you'd like, you can also manually capture custom events:

    JavaScript

    posthog.capture('my_custom_event', { property: 'value' })

  3. 3

    Use boolean feature flags

    Required

    Check if a feature flag is enabled:

    if (posthog.isFeatureEnabled('flag-key')) {
    // Do something differently for this user
    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagResult('flag-key')?.payload
}

  4. 4

    Use multivariate feature flags

    Optional

    For multivariate flags, check which variant the user has been assigned:

    const matchedFlag = posthog.getFeatureFlagResult('flag-key')
if (matchedFlag?.variant == 'variant-key') { // replace 'variant-key' with the key of your variant
    // Do something differently for this user
    // Optional: read the payload from the same result
    const matchedFlagPayload = matchedFlag?.payload
}

  5. 5

    Use feature flag payloads

    Optional

    Feature flags can include payloads with additional data. Fetch the payload like this:

    const matchedFlagPayload = posthog.getFeatureFlagResult('flag-key')?.payload

  6. 6

    Ensure flags are loaded

    Optional

    Every time a user loads a page, we send a request in the background to fetch the feature flags that apply to that user. We store those flags in your chosen persistence option (local storage by default).

    This means that for most pages, the feature flags are available immediately — except for the first time a user visits.

    To handle this, you can use the onFeatureFlags callback to wait for the feature flag request to finish:

    posthog.onFeatureFlags(function (flags, flagVariants, { errorsLoading }) {
    // feature flags are guaranteed to be available at this point
    if (posthog.isFeatureEnabled('flag-key')) {
        // do something
    }
})

  7. 7

    Reload feature flags

    Optional

    Feature flag values are cached. If something has changed with your user and you'd like to refetch their flag values:

    posthog.reloadFeatureFlags()

  8. 8

    Running experiments

    Optional

    Experiments run on top of our feature flags. Once you've implemented the flag in your code, you run an experiment by creating a new experiment in the PostHog dashboard.

  9. 9

    Next steps

    Recommended

    Now that you're evaluating flags, continue with the resources below to learn what else Feature Flags enables within the PostHog platform.

    ResourceDescription
    Creating a feature flagHow to create a feature flag in PostHog
    Adding feature flag codeHow to check flags in your code for all platforms
    Framework-specific guidesSetup guides for React Native, Next.js, Flutter, and other frameworks
    How to do a phased rolloutGradually roll out features to minimize risk
    More tutorialsOther real-world examples and use cases

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an MCP server, Needs Python, Needs Node.js

Security

What our scanner noticed· Low risk

  • Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
PostHog
Publisher
PostHog (Official)
Source
PostHog/skills · skills/omnibus/instrument-feature-flags · commit a5d30e7
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by PostHog or PostHog.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download instrument-feature-flags.zip