accessibility-patterns
WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization
Gradual rollout strategies, kill switches, A/B testing integration, flag lifecycle management, and technical debt prevention.
Claude Code
$ npx -y skills add vibeeval/vibecosystem --skill feature-flag-patterns --agent claude-code
Codex
$ npx skills add vibeeval/vibecosystem --skill feature-flag-patterns -a codex -y
Cursor
$ npx skills add vibeeval/vibecosystem --skill feature-flag-patterns -a cursor -y
Gemini CLI
$ npx skills add vibeeval/vibecosystem --skill feature-flag-patterns -a gemini-cli -y
GitHub Copilot
$ npx skills add vibeeval/vibecosystem --skill feature-flag-patterns -a github-copilot -y
OpenCode
$ npx skills add vibeeval/vibecosystem --skill feature-flag-patterns -a opencode -y
Windsurf
$ npx skills add vibeeval/vibecosystem --skill feature-flag-patterns -a windsurf -y
name: feature-flag-patterns description: Gradual rollout strategies, kill switches, A/B testing integration, flag lifecycle management, and technical debt prevention.
Feature flag strategies for safe deployments, experimentation, and operational control.
interface FeatureFlag {
key: string
type: 'boolean' | 'percentage' | 'variant' | 'segment'
enabled: boolean
description: string
owner: string // Team/person responsible
createdAt: Date
expiresAt?: Date // Auto-cleanup reminder
tags: string[] // 'release', 'experiment', 'ops', 'permission'
}
// Flag categories by lifecycle
enum FlagCategory {
RELEASE = 'release', // Temporary: ship behind flag, remove after rollout
EXPERIMENT = 'experiment', // Temporary: A/B test, remove after analysis
OPS = 'ops', // Long-lived: kill switches, circuit breakers
PERMISSION = 'permission', // Long-lived: premium features, entitlements
}
// Flag configuration
const FLAGS: Record<string, FeatureFlag> = {
'new-checkout-flow': {
key: 'new-checkout-flow',
type: 'percentage',
enabled: true,
description: 'Redesigned checkout with fewer steps',
owner: 'checkout-team',
createdAt: new Date('2025-01-15'),
expiresAt: new Date('2025-04-15'), // 3 month max
tags: ['release'],
},
'emergency-read-only': {
key: 'emergency-read-only',
type: 'boolean',
enabled: false,
description: 'Kill switch: disable all write operations',
owner: 'platform-team',
createdAt: new Date('2024-06-01'),
tags: ['ops'],
},
}class FeatureFlagService {
constructor(private store: FlagStore) {}
// Percentage-based rollout using consistent hashing
isEnabled(flagKey: string, userId: string): boolean {
const flag = this.store.getFlag(flagKey)
if (!flag || !flag.enabled) return false
switch (flag.type) {
case 'boolean':
return flag.enabled
case 'percentage': {
// Consistent: same user always gets same result for same flag
const hash = this.consistentHash(flagKey, userId)
return hash < (flag.percentage ?? 0)
}
case 'segment':
return this.isInSegment(userId, flag.segments ?? [])
case 'variant':
return true // Use getVariant() instead
}
}
// Deterministic hash: user always gets same bucket for same flag
private consistentHash(flagKey: string, userId: string): number {
const input = `${flagKey}:${userId}`
let hash = 0
for (let i = 0; i < input.length; i++) {
const char = input.charCodeAt(i)
hash = ((hash << 5) - hash) + char
hash = hash & hash // Convert to 32-bit integer
}
return Math.abs(hash) % 100 // 0-99
}
// Multi-variant for A/B/C testing
getVariant(flagKey: string, userId: string): string {
const flag = this.store.getFlag(flagKey)
if (!flag?.enabled || !flag.variants) return 'control'
const hash = this.consistentHash(flagKey, userId)
let cumulative = 0
for (const variant of flag.variants) {
cumulative += variant.weight
if (hash < cumulative) return variant.name
}
return 'control'
}
// Segment-based targeting
private isInSegment(userId: string, segments: Segment[]): boolean {
const user = this.store.getUser(userId)
return segments.some(segment => {
switch (segment.type) {
case 'user_list': return segment.userIds.includes(userId)
case 'attribute': return user?.[segment.attribute] === segment.value
case 'percentage': return this.consistentHash(segment.id, userId) < segment.value
}
})
}
}// Operational flags: immediately disable features under load
class KillSwitch {
private cache = new Map<string, { value: boolean; expiry: number }>()
private pollInterval: NodeJS.Timeout
constructor(private store: FlagStore, pollMs: number = 5000) {
// Poll every 5s for kill switch changes (fast response)
this.pollInterval = setInterval(() => this.refresh(), pollMs)
}
isKilled(switchKey: string): boolean {
const cached = this.cache.get(switchKey)
if (cached && cached.expiry > Date.now()) {
return cached.value
}
// Fallback: if cache miss, assume NOT killed (fail open)
return false
}
private async refresh(): Promise<void> {
try {
const switches = await this.store.getKillSwitches()
for (const [key, value] of Object.entries(switches)) {
this.cache.set(key, { value, expiry: Date.now() + 10_000 })
}
} catch {
// On error, extend existing cache TTL (don't flip switches on failure)
}
}
destroy(): void {
clearInterval(this.pollInterval)
}
}
// Usage in request handler
async function handleCheckout(req: Request, res: Response) {
if (killSwitch.isKilled('checkout-disabled')) {
return res.status(503).json({
error: 'Checkout temporarily unavailable',
retryAfter: 300,
})
}
// ... normal checkout logic
}// Track experiment exposure and outcomes
interface ExperimentEvent {
experimentKey: string
variant: string
userId: string
timestamp: Date
eventType: 'exposure' | 'conversion'
metadata?: Record<string, unknown>
}
class ExperimentTracker {
constructor(private analytics: AnalyticsClient) {}
trackExposure(flagKey: string, variant: string, userId: string): void {
this.analytics.track({
experimentKey: flagKey,
variant,
userId,
timestamp: new Date(),
eventType: 'exposure',
})
}
trackConversion(flagKey: string, userId: string, value?: number): void {
this.analytics.track({
experimentKey: flagKey,
variant: featureFlags.getVariant(flagKey, userId),
userId,
timestamp: new Date(),
eventType: 'conversion',
metaA focused runtime for Claude Code. A bounded worker for Codex. Catalog (in repo): Default core: vibecosystem packages agents, skills and hooks for software work.
WCAG 2.2 AA compliance, ARIA patterns, keyboard navigation, screen reader optimization
axe-core integration, WCAG 2.2 AA checklist, keyboard navigation testing, screen reader testing, and ARIA pattern validation.
Steam-style achievement system with XP, levels, streaks, and skill trees. Gamifies the development workflow. 25 achievements…
Framework for measuring and tracking agent response quality over time. Detects regressions before they reach production. Use when…
Agent ve skill dosyalarinin yapisal dogrulamasi. Frontmatter kontrol, naming convention, zorunlu bolum kontrolu, tutarlilik…
You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…
Ask which skill or flow fits your situation. A router over the skills in this repo.