flags-sdk

Implement feature flags and A/B tests in Next.js and SvelteKit using the Flags SDK.

Updated Dec 17, 2022
One-click install
npx skills add https://github.com/Foodshareclub/foodshare-web --skill flags-sdk-foodshareclub
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: flags-sdk
Source: https://github.com/Foodshareclub/foodshare-web/tree/main/.agents/skills/flags-sdk
Command: npx skills add https://github.com/Foodshareclub/foodshare-web --skill flags-sdk-foodshareclub

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires flags, @flags-sdk/vercel, @vercel/toolbar, and includes references (resource) components.

What problem does it solve? Rolling out features safely and running A/B tests requires server-side flag evaluation, provider integrations, and static-page compatibility, which is complex to wire up correctly by hand. ## Core Features & Use Cases - Flag Declaration and Evaluation: Declare flags as callable functions with flag(), evaluate them server-side, and batch evaluations with evaluate() for better performance. - Provider Adapters: Connect flags to Vercel Flags, Statsig, LaunchDarkly, PostHog, GrowthBook, Hypertune, Flagsmith, Reflag, OpenFeature, and more, or write custom adapters. - Precompute Pattern: Keep pages static by evaluating flags in middleware and encoding results into URLs, with ISR and prerendering support. - Use Case: Add a new feature flag end-to-end: register it with vercel flags add, pull environment variables, declare it in flags.ts with vercelAdapter, and conditionally render UI in a Next.js page. ## Quick Start Ask the agent to create a new boolean feature flag named "new-dashboard" with the Flags SDK and use it to toggle content on the homepage.

Frequently Asked Questions about flags-sdk

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a feature flag with the Flags SDK?

Install flags and @flags-sdk/vercel, run vercel flags add to register the flag, then run vercel env pull to get FLAGS and FLAGS_SECRET. Declare the flag in flags.ts using flag() with vercelAdapter and call it in your page or component.

How do I evaluate multiple feature flags at once?

Use evaluate() from flags/next instead of awaiting flags individually or using Promise.all. It pre-reads headers, cookies, and overrides once for the batch and lets adapters resolve groups through a single bulkDecide call.

Which feature flag providers work with the Flags SDK?

Adapters exist for Vercel Flags, Statsig, LaunchDarkly, PostHog, GrowthBook, Hypertune, Flagsmith, Reflag, OpenFeature, and Global Config. Split and Optimizely currently support Flags Explorer data only, and you can write custom adapters.

Does the Flags SDK work with SvelteKit?

Yes, the flags/sveltekit module provides flag(), createHandle for hooks.server.ts, precompute, and generatePermutations. It supports the reroute hook, middleware, ISR, and prerendering for static pages.

Why is my Vercel flag not evaluating locally?

The vercelAdapter requires the FLAGS and FLAGS_SECRET environment variables, which are written by running vercel env pull after creating the flag. Also verify the project is linked by checking for a .vercel directory.

How do I keep pages static while using feature flags?

Use the precompute pattern: middleware evaluates a flag group and rewrites the URL with an encoded code, and the page reads values via the code. Combine with generatePermutations for build-time prerendering of all variants.