home / skills / andrelandgraf / fullstackrecipes / feature-flags-setup

feature-flags-setup skill

safe

This skill helps you implement feature flags with Flags SDK for server-side evaluation, environment toggles, and Vercel Toolbar integration.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill feature-flags-setup

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

549 B

---
name: feature-flags-setup
description: Implement feature flags using the Vercel Flags SDK with server-side evaluation, environment-based toggles, and Vercel Toolbar integration.
---

# Feature Flags with Flags SDK

To set up Feature Flags with Flags SDK, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/feature-flags-setup`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/feature-flags-setup
```

Overview

This skill implements feature flags using the Vercel Flags SDK with server-side evaluation, environment-based toggles, and Vercel Toolbar integration. It provides production-ready patterns and a step-by-step recipe for integrating flags into full-stack TypeScript apps. The setup focuses on predictable rollouts, secure server-side checks, and easy developer tooling via the Vercel Toolbar.

How this skill works

The implementation uses the Vercel Flags SDK to evaluate flags on the server, ensuring consistent behavior regardless of client state. Flags can be toggled per environment (development, staging, production) and controlled from Vercel or local environment variables. Integration with the Vercel Toolbar exposes flag controls to developers for debugging and manual testing without changing code.

When to use it

Gradual rollouts of new features to subsets of users or environments.
A/B testing or experimentation where server-side consistency is required.
Enable/disable features quickly across environments without redeploying.
Safe feature launches that require immediate rollback capability.
Developer testing and debugging using the Vercel Toolbar controls.

Best practices

Evaluate flags server-side for authorization-sensitive or consistency-critical logic.
Keep flag names clear and scoped (feature.myFeature.enabled).
Default to safe behavior in code when a flag is missing or undefined.
Use environment-specific toggles and avoid coupling flags to local secrets.
Document flag intent and cleanup deprecated flags regularly.

Example use cases

Release a new recommendation algorithm to 10% of users in production while keeping 100% rollout in staging.
Turn off a high-risk endpoint immediately via a flag without code changes.
Test a UI redesign with a subset of internal users using Vercel Toolbar controls.
Toggle integrations (third-party APIs) per environment to control cost and risk.
Enable experimental ML features for specific user cohorts for metrics collection.

FAQ

Do I need client-side code to use Vercel Flags?

No — server-side evaluation is supported and recommended for security and consistency. Client flags can be added for UI-only behavior, but keep sensitive checks on the server.

How do I manage different environments?

Use environment-specific flag configurations in Vercel or environment variables for local testing. Treat staging and production separately and use the Toolbar for per-environment control.