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, letting you manage flags from the Vercel dashboard or the vercel flags CLI.
Fetches flags-sdk from vercel/flags and configures it for Cursor.
3
Select Cursor when prompted
The CLI shows a list of agents. Use arrow keys and space to select Cursor:
◆ Which agents do you want to install to?
│
│ ── Universal (.agents/skills) ────────────────
│ · Cline · Codex · Goose · Windsurf
│ ●Cursor(selected)
│ · Cursor · Aider · Continue
4
Verify installation
Confirm successful installation by checking the skill directory location:
.cursor/skills/flags-sdk
Restart Cursor to activate flags-sdk. Access via /flags-sdk in your agent's command palette.
⚠
Security Notice
We perform automated surface-level scans (Gen AI Scanner, Socket, Snyk) during installation. These checks detect common vulnerabilities but do not guarantee complete security. Always review skill source code and verify the publisher's reputation before production use.
Skills execute code in your environment. Always review source, verify the publisher, and test in isolation before production.
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, letting you manage flags from the Vercel dashboard or the vercel flags CLI.
Each flag is declared as a function. No string keys at call sites:
import{ flag }from'flags/next';exportconst exampleFlag =flag({ key:'example-flag',decide(){returnfalse;},});const value =awaitexampleFlag();
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';exportconst exampleFlag =flag({ key:'example-flag', adapter:vercelAdapter(),});
Agent workflow: Creating a new flag
When a user asks you to create or add a feature flag, follow these steps in order. Do not leave CLI steps as "next steps" for the user — execute them yourself.
Before you start
Check the project state to adapt commands and decide which steps you can skip:
Which lockfile is present (pnpm-lock.yaml, package-lock.json, yarn.lock, bun.lockb)? → Adapt all package manager commands accordingly (pnpm add, npm install, yarn add, bun add).
Is flags in package.json? → Skip install (step 1)
Does .vercel/ directory exist? → Project is linked, skip vercel link in step 2
Does .env.local contain FLAGS=? → Env vars already pulled, skip step 3
Does flags.ts (or lib/flags.ts, src/flags.ts) exist? → Add to it rather than creating from scratch (step 4)
Is @vercel/toolbar in package.json? → Skip toolbar setup (step 6)
Does app/.well-known/vercel/flags/route.ts exist? → Flags Explorer already set up, skip step 7
Steps
Install packages (if not already in package.json):
pnpm i flags @flags-sdk/vercel
Register the flag with Vercel: Run vercel flags add <flag-key> --kind boolean --description "<description>".
Prerequisite: The vercel flags commands require the Vercel CLI to be installed and authenticated. If the Vercel CLI is not installed, run pnpm i -g vercel. For authentication or linking issues, read and follow the vercel-cli skill. If it's not installed, run npx skills add https://github.com/vercel/vercel --skill vercel-cli.
Before running vercel flags add, verify the project is linked to Vercel. Check for a .vercel directory in the project root. If it doesn't exist, run vercel link first.
Pull environment variables: Run vercel env pull to write FLAGS and FLAGS_SECRET to .env.local. Without these environment variables, vercelAdapter() will not be able to evaluate flags. This step is mandatory after creating a flag.
Declare the flag in code: Add it to flags.ts (or create the file if it doesn't exist) using vercelAdapter():
import{ flag }from'flags/next';import{ vercelAdapter }from'@flags-sdk/vercel';exportconst myFlag =flag({ key:'my-flag', adapter:vercelAdapter(),});
Use the flag: Call it in your page or component and conditionally render based on the result:
Set up Flags Explorer (if not already present): Create app/.well-known/vercel/flags/route.ts — see the Flags Explorer setup section below.
Vercel Flags
Vercel Flags is Vercel's feature flags platform. You create and manage flags from the Vercel dashboard or the vercel flags CLI, then connect them to your code with the @flags-sdk/vercel adapter. When you create a flag in Vercel, the FLAGS and FLAGS_SECRET environment variables are configured automatically.
To create a flag end-to-end, follow the Agent workflow above.
For the full Vercel provider reference — user targeting, vercel flags CLI subcommands, custom adapter configuration, and Flags Explorer setup — see references/providers.md.
Declaring flags
When using Vercel Flags, declare flags with vercelAdapter() as shown in the Agent workflow. For other providers, see references/providers.md. Below are the general flag() patterns.
Basic flag
import{ flag }from'flags/next';// or 'flags/sveltekit'exportconst showBanner =flag<boolean>({ key:'show-banner', description:'Show promotional banner', defaultValue:false, options:[{ value:false, label:'Hide'},{ value:true, label:'Show'},],decide(){returnfalse;},});
Flag with evaluation context
Use identify to establish who the request is for. The returned entities are passed to decide:
