Flags SDK skill

Two skills: flag code with the Flags SDK for Next.js and SvelteKit, and Vercel Flags work through the dashboard and vercel flags

  • 629 ★ on the repository
  • Last commit
  • MIT
SkillOfficial

Extended access

Why this level

  • The `vercel flags` commands create, change and archive flags in a Vercel project, which changes what users see
  • Setup writes `FLAGS_SECRET` into Vercel environment variables with `vercel env add`
All reasons and checks

vercel/flags

Install

In your terminal, with SkillFoxx CLI

npx skillfoxx add skills/flags-sdk

Detects the agents on your machine, shows the access level and pins the version.

Other ways to install

Access and checks

How we review

Extended accessThe tool runs code or makes network calls and only reads external data.

  • The `vercel flags` commands create, change and archive flags in a Vercel project, which changes what users see
  • Setup writes `FLAGS_SECRET` into Vercel environment variables with `vercel env add`

This is third-party code. Review the repository files before installing.

What it does

The vercel/flags repository holds the Flags SDK library (the `flags` npm package) and two agent skills in the skills folder. The flags-sdk skill guides installing and configuring the package, declaring flags with `flag()`, wiring adapters (Vercel, Statsig, LaunchDarkly, PostHog, GrowthBook, OpenFeature, Split, Flagsmith, Reflag, Optimizely or your own), `identify`, `dedupe`, `evaluate`, precompute for static pages, Flags Explorer with the Vercel Toolbar and value encryption. It works with Next.js and SvelteKit. The vercel-flags skill covers everything around the code: planning a flag, choosing between the Flags SDK, `@vercel/flags-core` and OpenFeature, working in the Vercel dashboard, the `vercel flags` commands (create, inspect, set, split, rollout, rules, segments, evaluations, archive, connections), project connections, OIDC and SDK keys, and the `FLAGS_SECRET` variable. Before archiving or deleting a flag the skill requires removing the code first and confirming there were no evaluations across the Skew Protection window.

Who it is for. Teams on Next.js or SvelteKit hosted on Vercel that introduce feature flags, A/B tests and gradual rollouts.

Good fit when

  • A new Next.js feature is hidden behind a flag and switched on gradually by percentage
  • Pages must stay static while experiment variants are computed ahead through precompute
  • You are choosing between the Flags SDK, `@vercel/flags-core` and OpenFeature for a project on another framework
  • An old flag is due for removal: code, an evaluation check and archiving go in order

Not a fit when

  • The project is not on Vercel, Next.js or SvelteKit: the flags-sdk skill is written for those frameworks
  • You only need a ready flag provider with a dashboard and no code changes: the provider's own docs are enough
  • You want a general Vercel skill set for deployment and the AI SDK: the official Vercel plugin covers that

Example request

Add a new-checkout flag to the Next.js project with the Flags SDK and the Vercel adapter and enable it for 10% of users

Limitations

The repository README does not describe installing the skills; the command `npx skills add vercel/flags@vercel-flags` comes from the SKILL.md itself. The `FLAGS_SECRET` variable is mandatory: 32 random bytes in base64, a separate value per environment and marked Sensitive for Preview and Production. The `vercel flags` commands need the Vercel CLI and a signed-in user. For projects on other frameworks `@vercel/flags-core` replaces this SDK.

How to disable. Delete the flags-sdk and vercel-flags folders from the agent's skills directory. Remove the `flags` package from the project with `npm uninstall flags`.

FAQ

How do I create FLAGS_SECRET?

Generate 32 random bytes: `node -e "console.log(crypto.randomBytes(32).toString('base64url'))"`. Each environment needs its own value; store it with `vercel env add FLAGS_SECRET production --sensitive --value <secret>`.

How is flags-sdk different from vercel-flags?

Flags-sdk is about code: declaring flags, adapters, precompute. Vercel-flags covers planning, the dashboard and the `vercel flags` commands. They point to each other, each saying when the other is needed.

Do I need a flag provider?

No, the SDK works with any provider, a custom setup or none at all. Vercel's own provider, Vercel Flags, connects through the `@flags-sdk/vercel` adapter.

How do I install the Flags SDK itself?

Run `npm install flags`, set the `FLAGS_SECRET` variable and declare a flag in `app/flags.tsx` with `flag()` from `flags/next`. Calling the flag in a server component returns its value.

Which flag providers are supported?

The README names LaunchDarkly, Optimizely and Statsig, and the skill adds PostHog, GrowthBook, OpenFeature, Split, Flagsmith, Reflag and Global Config. You can write a custom adapter.

Discussion

No questions or reviews yet.

Skills

Over 200 skills by stack and practice: React, Next.js, Rails, Rust, Python, debugging, TDD and UI review

SkillMinimal access225Repository stars
Official

Vercel AI SDK skill: an agent writes chat, streaming and agents from the docs of the installed package version

SkillExtended access27.9KRepository stars

Dart and Flutter skills by kevmoo: Effective Dart, language features, tests, coverage, profiling and finding outdated patterns

PluginMinimal access148Repository stars

An installer for a .NET skill catalog that picks skills from project files for Claude Code, Codex, Copilot and Gemini CLI

CLIExtended access513Repository stars
Official

Skills for the experimental Native SDK: the agent reads version-matched guidance from the installed CLI for building desktop apps in TypeScript

SkillExtended access7.8KRepository stars

A plugin of 24 Claude Code skills for AI apps on Next.js, AI SDK 7, shadcn/ui and pgvector, with in-browser UI checks

PluginExtended access71Repository stars

Comparison with similar tools

Cards that share the main search query, and how they differ.

ToolOfficialRepository starsMain difference
Flags SDK (this card)yes629
Vercel Pluginno334the general Vercel plugin with an ecosystem graph and deploys, while this is two skills only about flags
Vercel skills for agentsno33,964skills on React and Next.js performance, while this is about flags and experiments

README in short

The README presents the Flags SDK as a feature-flag toolkit for Next.js and SvelteKit from the makers of Next.js, shows the `npm install flags` setup, the `FLAGS_SECRET` configuration, a flag example for a server component and lists the adapters. Full documentation lives at flags-sdk.dev.

README badge

Original SKILL.md

---
name: vercel-flags
description: >
  Feature flags, A/B tests, and gradual rollouts with Vercel Flags, in any app or framework.
  Use whenever the user is planning, adding, changing, or cleaning up a feature flag, toggle, kill switch,
  experiment, percentage rollout, or targeting rule, or wants to gate or hide a feature for some
  users, even before a library or provider is chosen. Covers choosing an integration (Flags SDK,
  `@vercel/flags-core`, OpenFeature), the Vercel dashboard, the `vercel flags` CLI (create, inspect,
  set, split, rollout, rules, segments, evaluations, archive, connections), Project Connections, OIDC vs SDK keys, `FLAGS_SECRET`, and
  Flags Explorer overrides. For `flag()` declarations, adapters, precompute, and the Flags Explorer
  endpoint in Next.js or SvelteKit code, load the `flags-sdk` skill.
---

# Vercel Flags

Vercel Flags is Vercel's feature flags platform. Flags are created and managed in the Vercel dashboard or with the `vercel flags` CLI, evaluated server-side in your app, and switched per environment (Development, Preview, Production) without a redeploy.

- Docs: https://vercel.com/docs/flags
- CLI reference: https://vercel.com/docs/cli/flags

Use this skill to decide how a feature should be flagged, to create and change flags, and to run rollouts and experiments. Write app code with the skill that matches the stack (see [Choose an approach](#choose-an-approach)). Do not leave CLI steps as "next steps" for the user; execute them yourself.

## Route the request

- **Planning** ("put this behind a flag", "roll this out to 10%", "A/B test the pricing page", "add a kill switch"): follow [Plan a flag](#plan-a-flag), then [Choose an approach](#choose-an-approach).
- **Create or manage a flag with no code change** (create, inspect, enable, set, split, rollout, rules, archive): follow [Manage flags with the CLI](#manage-flags-with-the-cli). This needs an authenticated CLI, not SDK packages, Toolbar, Flags Explorer, or `.env.local` (except `vercel flags override`, which reads `FLAGS_SECRET`).
- **Share flags between projects**: follow [Project Connections](references/cli.md#project-connections) to connect projects in the same team, then configure the consumer application.
- **Clean up or remove a flag** ("remove this flag", "clean up stale flags", "inline this flag"): follow [references/cleanup.md](references/cleanup.md), then [Lifecycle and safety](references/cli.md#lifecycle-and-safety) before archiving.
- **Add a flag to an app that already uses the Flags SDK** (`flags` in `package.json`): load the `flags-sdk` skill right away; it creates the flag on Vercel and declares it in code.
- **Implement in code otherwise**: follow [Choose an approach](#choose-an-approach) and load the matching skill or reference. Inside an app repository, treat an ambiguous request as plan, create, and implement.

## Choose an approach

Check the project before writing code.

- **Already using another flag provider** (Statsig, LaunchDarkly, PostHog, GrowthBook, and so on): keep it. On Next.js or SvelteKit, the Flags SDK connects to it through an adapter; load the `flags-sdk` skill. On any other stack, use the provider's own SDK. Rollouts, targeting, and experiments for that provider are configured in its own dashboard, not with `vercel flags`; the CLI and lifecycle sections of this skill do not apply.
- **No provider yet**: use Vercel Flags. Pick the integration by stack ([SDKs](https://vercel.com/docs/flags/vercel-flags/sdks)):
  - **Next.js or SvelteKit**: the Flags SDK (`flags` + `@flags-sdk/vercel`). It adds Flags Explorer integration and precompute for static pages. Load the `flags-sdk` skill. If it is not available, suggest `npx skills add vercel/flags@flags-sdk` (do not auto-install).
  - **Any other framework or a plain server** (for example Express): `@vercel/flags-core`. See [Other frameworks](#other-frameworks).
  - **The user wants provider portability or already uses OpenFeature**: the Vercel Flags OpenFeature provider ([Using OpenFeature with Vercel Flags](https://vercel.com/docs/flags/vercel-flags/sdks/openfeature)).

The dashboard and the `vercel flags` CLI work the same for every integration.

## Plan a flag

Report a problem