flags-sdk

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).

When the user asks to install, configure, or set up the SDK, follow 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 or 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.