feature-flags
Feature flag patterns for safe feature rollout without deployment: boolean flags, percentage rollouts, user targeting, and flag lifecycle. Covers LaunchDarkly, Unleash, homegrown Redis-based, and trunk-based development.
Best use case
feature-flags is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Feature flag patterns for safe feature rollout without deployment: boolean flags, percentage rollouts, user targeting, and flag lifecycle. Covers LaunchDarkly, Unleash, homegrown Redis-based, and trunk-based development.
Teams using feature-flags should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/feature-flags/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How feature-flags Compares
| Feature / Agent | feature-flags | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Feature flag patterns for safe feature rollout without deployment: boolean flags, percentage rollouts, user targeting, and flag lifecycle. Covers LaunchDarkly, Unleash, homegrown Redis-based, and trunk-based development.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# Feature Flags Skill
Deploy code without releasing features. Feature flags decouple deployment from release, enabling dark launches, gradual rollouts, A/B tests, and instant kill switches.
## When to Activate
- Rolling out a feature to a subset of users first
- Enabling trunk-based development (no long-lived feature branches)
- Implementing A/B testing or experiments
- Needing an instant kill switch for a risky feature
- Testing a feature in production before public launch
- Managing feature access by plan tier or user segment
---
## Flag Types
| Type | Use Case | Example |
|------|----------|---------|
| Boolean | On/Off for everyone | `new-checkout-flow: true` |
| Percentage | Gradual rollout | 10% → 50% → 100% of users |
| User-targeted | Beta users, internal team | `user.id IN [123, 456]` |
| Attribute-based | By plan, country, etc. | `user.plan == 'pro'` |
---
## Option A: Managed Service (LaunchDarkly / Unleash)
**Pros:** Real-time updates, rich targeting, analytics, no infrastructure
**Cons:** Cost, vendor dependency
### LaunchDarkly (TypeScript)
```typescript
import { init } from '@launchdarkly/node-server-sdk';
const ldClient = init(process.env.LAUNCHDARKLY_SDK_KEY);
await ldClient.waitForInitialization({ timeout: 10 });
// Evaluate a flag
const showNewCheckout = await ldClient.variation(
'new-checkout-flow',
{ key: user.id, email: user.email, custom: { plan: user.plan } },
false, // default value if flag not found
);
if (showNewCheckout) {
return newCheckoutFlow();
}
return legacyCheckoutFlow();
```
### Unleash (self-hosted, TypeScript)
```typescript
import { initialize } from 'unleash-client';
const unleash = initialize({
url: process.env.UNLEASH_URL,
appName: 'order-service',
customHeaders: { Authorization: process.env.UNLEASH_TOKEN },
});
await new Promise(resolve => unleash.on('synchronized', resolve));
if (unleash.isEnabled('new-checkout-flow', { userId: user.id })) {
return newCheckoutFlow();
}
```
---
## Option B: Homegrown Redis-Based (simple, no external service)
Best for small teams, internal flags, or when vendor cost is prohibitive.
```typescript
// src/lib/flags.ts
import { createClient } from 'redis';
const redis = createClient({ url: process.env.REDIS_URL });
export interface FlagConfig {
enabled: boolean;
percentage?: number; // 0-100, if set: enabled for X% of users
allowList?: string[]; // specific user IDs always enabled
denyList?: string[]; // specific user IDs always disabled
}
export async function isEnabled(flagName: string, userId?: string): Promise<boolean> {
const raw = await redis.get(`flag:${flagName}`);
if (!raw) return false;
const config: FlagConfig = JSON.parse(raw);
if (!config.enabled) return false;
if (userId) {
if (config.denyList?.includes(userId)) return false;
if (config.allowList?.includes(userId)) return true;
if (config.percentage !== undefined) {
// Deterministic: same user always gets same result
const hash = hashUserId(userId + flagName);
return (hash % 100) < config.percentage;
}
}
return config.enabled;
}
function hashUserId(input: string): number {
let hash = 5381;
for (let i = 0; i < input.length; i++) {
hash = ((hash << 5) + hash) + input.charCodeAt(i);
}
return Math.abs(hash);
}
// Management API (admin only)
export async function setFlag(name: string, config: FlagConfig) {
await redis.set(`flag:${name}`, JSON.stringify(config));
}
// Usage
const enabled = await isEnabled('new-checkout-flow', req.user.id);
```
---
## Trunk-Based Development with Flags
Feature flags enable everyone to merge to main continuously, even for incomplete features:
```plantuml
@startuml
start
:Feature branch\n(short-lived, < 1 day);
:Add flag: new-feature OFF;
:Merge to main\n(flag is off — safe);
:Continue development\non main behind flag;
:Internal testing\n(flag on for team only);
:Beta rollout\n(flag on for 5% of users);
:Full rollout\n(flag on for 100%);
:Remove flag\nclean up code;
stop
@enduml
```
**Rule:** Every new feature that takes > 1 day gets a flag. No feature branches longer than a day.
---
## Flag Lifecycle
Flags MUST be cleaned up. Stale flags are technical debt.
```typescript
// WRONG: permanent flag code
if (await isEnabled('new-checkout', userId)) {
// This if-block stays in codebase for years ← tech debt
}
// RIGHT: flag lifecycle
// Phase 1: Add flag (flag=false)
// Phase 2: Roll out (flag=10% → 100%)
// Phase 3: Stabilize (2 weeks at 100%, confirm no issues)
// Phase 4: Remove flag — delete the condition, keep only the new code
// Phase 5: Delete the flag from Redis/LaunchDarkly
```
Track flag age. Create a ticket when adding each flag for cleanup in 4-8 weeks.
---
## Flag Naming Convention
```
<area>-<feature>-<variant?>
Examples:
checkout-new-flow
auth-passkeys
payments-stripe-v2
dashboard-dark-mode
api-cursor-pagination
```
---
## Testing with Feature Flags
```typescript
// Unit tests: inject flag resolver
async function processOrder(order: Order, flags: FlagResolver) {
if (await flags.isEnabled('new-checkout', order.userId)) {
return newCheckout(order);
}
return legacyCheckout(order);
}
// Test both paths explicitly
it('uses new checkout when flag enabled', async () => {
const flags = { isEnabled: async () => true };
await expect(processOrder(order, flags)).resolves.toEqual(newResult);
});
it('uses legacy checkout when flag disabled', async () => {
const flags = { isEnabled: async () => false };
await expect(processOrder(order, flags)).resolves.toEqual(legacyResult);
});
```
---
## Checklist
- [ ] Every flag has a ticket for cleanup (set deadline when creating)
- [ ] Flags stored externally (Redis/LaunchDarkly) — not in code or env vars
- [ ] Percentage rollouts are deterministic (same user = same result)
- [ ] Flag evaluation has a default (what happens if Redis is down?)
- [ ] Both flag paths have tests (enabled AND disabled)
- [ ] Flag names follow convention (`<area>-<feature>`)
- [ ] Old flags removed within 4-8 weeks of full rolloutRelated Skills
zero-trust-patterns
Zero-Trust security patterns — mTLS between microservices (Istio/SPIFFE), SPIRE workload identity, OPA/Envoy authorization, NetworkPolicy default-deny-all, short-lived credentials, service mesh security, and Kubernetes RBAC hardening.
wireframing
Wireframing and prototyping workflow: fidelity levels (lo-fi sketch → mid-fi wireframe → hi-fi prototype), tool selection (Figma, Excalidraw, Balsamiq), user flow diagrams, wireframe annotation standards, information architecture (IA) mapping, and the handoff from wireframe to visual design. For developers who need to communicate UI structure before writing code.
webrtc-patterns
WebRTC patterns — peer connection setup, ICE/STUN/TURN configuration, signaling server design, SFU vs mesh topology, screen sharing, media track management, and reconnect/ICE restart handling.
webhook-patterns
Webhook patterns for receiving, verifying (HMAC), and idempotently processing third-party events. Covers Stripe, GitHub, and generic webhook patterns, delivery guarantees, retry handling, and testing.
web-performance
Web performance optimization: Core Web Vitals (LCP, CLS, INP), Lighthouse CI with budget configuration, bundle analysis (webpack-bundle-analyzer, vite-bundle-visualizer), hydration performance, network waterfall reading, image optimization (WebP/AVIF, srcset), and font performance.
wasm-performance
WebAssembly performance: wasm-opt binary optimization, size reduction (panic=abort, LTO, strip), profiling WASM in Chrome DevTools, memory management (linear memory, avoiding GC pressure), SIMD, and multi-threading with SharedArrayBuffer.
wasm-patterns
WebAssembly patterns: wasm-pack, wasm-bindgen (JS↔Wasm interop), WASI, Component Model, wasm-opt, Rust-to-WASM compilation, JS integration (web workers, streaming instantiation), and production deployment (CDN, Content-Type headers).
visual-testing
Visual Regression Testing: tool comparison (Chromatic/Percy/Playwright screenshots/BackstopJS), pixel-diff vs AI-based comparison, baseline management, flakiness strategies (masks, tolerances, waitForLoadState), CI integration with GitHub Actions, and Storybook integration.
visual-identity
Brand identity development: color palette construction (primary/secondary/semantic/neutral), logo concept brief writing, typeface pairings, brand voice definition, mood board direction, and Brand Guidelines document structure. Use when establishing or evolving a visual brand — not for implementing existing tokens.
ux-micro-patterns
UX micro-patterns for every product state: Empty States, Loading States (skeleton screens, spinners, optimistic UI), Error States, Success States, Confirmation Dialogs, Onboarding Flows, and Progressive Disclosure. These patterns apply to every feature — done wrong, they're the biggest source of user confusion.
typography-design
Typography as a creative discipline: typeface selection criteria, type pairing (serif + sans, display + body), modular scale systems, line-height and tracking ratios, hierarchy construction, and web/mobile rendering considerations. The decisions behind design tokens, not the tokens themselves.
typescript-testing
TypeScript testing patterns: Vitest for unit/integration, Playwright for E2E, MSW for API mocking, Testing Library for React components. Core TDD methodology for TypeScript/JavaScript projects.