AutoGineer
Generated banner for Feature Flags Web
Generated logo for Feature Flags Web

Feature Flags Web

PostHogOfficialCreated by PostHog

  • Skill
  • Tool integration
  • Data and AI
  • MIT
  • No issues found
Download ZIP

From the author

PostHog feature flags for Web (JavaScript) applications
— the description by PostHog

AutoGineer summary

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

This skill provides guidance and code patterns for implementing PostHog feature flags within JavaScript web applications. It covers installation, flag evaluation, handling asynchronous loading, and best practices for maintaining clean, performant code. The skill emphasizes strategies to minimize UI flicker, ensure consistent user experiences through proper identification, and improve performance via local evaluation and bootstrapping.

What it does

  • Provides code snippets for implementing boolean and multivariate feature flags.
  • Explains how to handle asynchronous flag loading using callbacks.
  • Offers techniques for bootstrapping flags to ensure immediate availability.
  • Details methods for reloading flags and overriding server-side properties.
  • Outlines best practices for flag naming, targeting, and architectural organization.
  • Supports management of flags via PostHog MCP tools if connected.

When to use it

  • When you need to perform feature rollouts or A/B testing in a web application.
  • When you want to decouple feature deployment from code deployment.
  • When you need to ensure consistent user experiences across sessions and devices.
  • When you are looking to optimize flag performance and reduce network latency in your app.

Advantages

  • Reduces the risk of deploying new features by allowing instant toggling.
  • Improves application performance through local evaluation and bootstrapping.
  • Provides clear patterns for maintaining clean code when using flags.
  • Helps prevent UI flicker by leveraging server-side evaluation or bootstrapping.

Usage examples

“How do I check if a boolean feature flag is enabled in my JavaScript app?”
The agent provides the posthog.isFeatureEnabled('flag-key') code snippet and explains how to use it within your application logic.
“How can I ensure my feature flags are ready before my page renders?”
The agent explains the use of the posthog.onFeatureFlags callback to wait for flag definitions to load before executing dependent code.

Install

  1. Download the skill as a ZIP:

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

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

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

Documentation by PostHog

PostHog feature flags for Web (JavaScript)

This skill helps you add PostHog feature flags to Web (JavaScript) applications.

Reference files

  • references/web.md - Web feature flags installation - docs

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

  • references/best-practices.md - Feature flag best practices - docs

Consult the documentation for API details and framework-specific patterns.

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.

PostHog MCP tools

Check if a PostHog MCP server is connected. If available, look for tools related to feature flag management (creating, listing, updating, deleting flags). Use these tools to manage flags directly in PostHog rather than requiring the user to do it manually in the dashboard.

Framework guidelines

No specific framework guidelines.

Files

references/web.md

Web feature flags installation - Docs

  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

    PostHog AI

    <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=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",(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||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init os ds Ie us vs ss ls capture calculateEventProperties register register_once register_for_session unregister unregister_for_session ws getFeatureFlag getFeatureFlagPayload getFeatureFlagResult isFeatureEnabled reloadFeatureFlags updateFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey displaySurvey cancelPendingSurvey canRenderSurvey canRenderSurveyAsync 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 startExceptionAutocapture stopExceptionAutocapture loadToolbar get_property getSessionProperty bs ps createPersonProfile setInternalOrTestUser ys es $s opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing get_explicit_consent_status is_capturing clear_opt_in_out_capturing cs debug M gs getPageViewId captureTraceFeedback captureTraceMetric Qr".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-01-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:

    PostHog AI

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

    JavaScript

    PostHog AI

    import posthog from 'posthog-js'
posthog.init('<ph_project_token>', {
    api_host: 'https://us.i.posthog.com',
    defaults: '2026-01-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 AI

    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.getFeatureFlagPayload('flag-key')
}

  4. 4

    Use multivariate feature flags

    Optional

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

    if (posthog.getFeatureFlag('flag-key') == 'variant-key') { // replace 'variant-key' with the key of your variant
    // Do something differently for this user
    // Optional: fetch the payload
    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')
}

  5. 5

    Use feature flag payloads

    Optional

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

    const matchedFlagPayload = posthog.getFeatureFlagPayload('flag-key')

  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
Community questions

Ask a question

Was this page useful?

HelpfulCould be better

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

Security

No issues found by our static scan· No issues found

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/posthog/feature-flags/skills/web · commit a5d30e7
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced
Also distributed in
PostHog/skills

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 feature-flags-web.zip