/flags-sdk

name: flags-sdk
description: "Implement feature flags in Next.js or SvelteKit code with the Flags SDK (`flags` npm package). Use when installing or configuring the SDK, declaring flags with `flag()`, reading a connected same-team project's flags through Project Connections (`createVercelAdapter({ projectId })`), wiring a provider adapter (`@flags-sdk/vercel`, Statsig, LaunchDarkly, PostHog, GrowthBook, Global Config, OpenFeature, and others), using `identify`, `dedupe`, or `evaluate`, keeping pages static with precompute, setting up Flags Explorer, or encrypting flag values. For planning a flag, Vercel Flags rollouts and experiments, the `vercel flags` CLI, or other frameworks, use the `vercel-flags` skill."
summary: "Flags SDK guidance for Next.js and SvelteKit — declare flags with flag(), connect provider adapters, precompute static variants, and set up the Flags Explorer endpoint."
metadata:
  priority: 6
  docs:
    - "https://vercel.com/docs/flags"
    - "https://flags-sdk.dev"
  sitemap: "https://vercel.com/sitemap.xml"
  pathPatterns:
    - 'flags.ts'
    - 'flags.tsx'
    - 'lib/flags.ts'
    - 'src/flags.ts'
    - 'lib/flags/**'
    - 'src/flags/**'
    - '.well-known/vercel/flags/**'
  importPatterns:
    - 'flags/next'
    - 'flags/sveltekit'
    - 'flags/react'
    - 'flags'
    - '@flags-sdk/*'
    - '@vercel/flags'
  bashPatterns:
    - '\bnpm\s+(install|i|add)\s+[^\n]*(?<![\w@/-])flags(?![\w/-])'
    - '\bpnpm\s+(install|i|add)\s+[^\n]*(?<![\w@/-])flags(?![\w/-])'
    - '\bbun\s+(install|i|add)\s+[^\n]*(?<![\w@/-])flags(?![\w/-])'
    - '\byarn\s+add\s+[^\n]*(?<![\w@/-])flags(?![\w/-])'
    - '\bnpm\s+(install|i|add)\s+[^\n]*@flags-sdk/'
    - '\bpnpm\s+(install|i|add)\s+[^\n]*@flags-sdk/'
    - '\bbun\s+(install|i|add)\s+[^\n]*@flags-sdk/'
    - '\byarn\s+add\s+[^\n]*@flags-sdk/'
  promptSignals:
    phrases:
      - "flags sdk"
      - "flags explorer"
      - "flag adapter"
      - "precompute flags"
      - "flags/next"
      - "flags/sveltekit"
      - "@flags-sdk"
    allOf:
      - [flag, precompute]
      - [flag, adapter]
      - [flag, next.js]
      - [flag, nextjs]
      - [flag, sveltekit]
    anyOf:
      - "flag"
      - "precompute"
      - "adapter"
    noneOf:
      - "command-line flag"
      - "command line flag"
      - "cli flag"
      - "compiler flag"
      - "flag emoji"
      - "rolling release"
    minScore: 6
retrieval:
  aliases:
    - flags sdk
    - flags/next
    - flags/sveltekit
    - flag adapters
  intents:
    - declare a feature flag in code
    - connect a flag provider adapter
    - read flags from a connected project
    - precompute flags for static pages
    - set up flags explorer
  entities:
    - Flags SDK
    - Flags Explorer
    - vercelAdapter
    - precompute
    - FLAGS_SECRET
chainTo:
  -
    pattern: 'precompute\s*\(|generatePermutations|flags/next.*precompute'
    targetSkill: routing-middleware
    message: 'Precompute pattern detected — loading Routing Middleware guidance for the middleware rewrites that serve static flag variants.'
  -
    pattern: '@flags-sdk/(edge|global)-config|create(Edge|Global)ConfigAdapter'
    targetSkill: vercel-storage
    message: 'Global Config flag adapter detected — loading Vercel storage guidance for Global Config setup and limits.'

Set up and use the Flags SDK

The Flags SDK (`flags` npm package) is a feature flags toolkit for Next.js and SvelteKit. It turns each feature flag into a callable function, works with any flag provider via adapters, and keeps pages static using the precompute pattern. Vercel Flags is the first-party provider; its adapter is `@flags-sdk/vercel`.

• Docs: https://flags-sdk.dev
• Repo: https://github.com/vercel/flags

This skill covers the code. Planning a flag, choosing between the Flags SDK, `@vercel/flags-core`, and OpenFeature, and managing flags in the dashboard or with the `vercel flags` CLI belong to the `vercel-flags` skill. Archiving a flag, deleting it, or removing a variant requires the checks in that skill (remove the code first, confirm no evaluations over the Skew Protection window, archive before `rm`); do not run those commands without it. If it is not available, suggest `npx skills add vercel/flags@vercel-flags` (do not auto-install) and run `vercel flags <cmd> --help` in the meantime. For a project on another framework, `@vercel/flags-core` replaces this SDK ([Core SDK](https://vercel.com/docs/flags/vercel-flags/sdks/core)).

When the user asks to install, configure, or set up the SDK, follow [Set up the SDK](#set-up-the-sdk) (including `vercel env pull` when `.env.local` is missing). When they ask to add a flag to the code, follow [Create a flag](#create-a-flag) or [Add a flag that already exists on Vercel](#add-a-flag-that-already-exists-on-vercel). Inside an app repository, treat an ambiguous request as the full flow. Do not leave CLI steps as "next steps" for the user; execute them yourself.

Core concepts

Flags as code

Each flag is declared as a function. No string keys at call sites:

import { flag } from 'flags/next';

export const exampleFlag = flag({
  key: 'example-flag',
  decide() { return false; },
});

const value = await exampleFlag();

Server-side evaluation

Flags evaluate server-side to avoid layout shift, keep pages static, and maintain confidentiality. Combine routing middleware with the precompute pattern to serve static variants from CDN.

Adapter pattern

Adapters replace `decide` and `origin` on a flag declaration, connecting your flags to a provider. Vercel Flags (`@flags-sdk/vercel`) is the first-party adapter. Third-party adapters are available for Statsig, LaunchDarkly, PostHog, and others.

import { flag } from 'flags/next';
import { vercelAdapter } from '@flags-sdk/vercel';

export const exampleFlag = flag({
  key: 'example-flag',
  adapter: vercelAdapter,
});

> **Version note**: The SDK is published as `flags` (renamed from `@vercel/flags`; that old name still app