Communitygithub.com

YepAPI/skills

LaunchDarkly / Flagsmith / Vercel 功能開關模式:分階段發布、百分比分配、A/B 測試切換。

skills 是什麼?

此技能專注於實作功能開關(Feature Flags),涵蓋從企業級到開源方案的完整模式與最佳實踐。它教導開發人員如何使用布林開關(開/關)、百分比分配(例如 10% 的使用者)以及使用者目標定位(特定 ID 或區段)來進行漸進式推出與 A/B 測試。技能涵蓋 LaunchDarkly(企業用)、Flagsmith(開源)及 Vercel Flags / `@vercel/flags`(適用於 Next.js)等多種平台,並強調預設在伺服器端評估開關,僅將結果傳遞給客戶端,以保護目標定位邏輯。此外,它還規範了開關的命名慣例(kebab-case,例如 `enable-new-checkout`)、要求開關在全面上線後必須清理(避免技術債),以及提供本地開發時透過環境變數覆蓋開關設定的方法。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/YepAPI/skills/tree/HEAD/skills/feature-flags

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

功能開關

規則

  • 使用功能開關進行分階段發布 — 將程式碼置於開關之後,逐步啟用
  • 開關類型:布林(開/關)、百分比(10% 的使用者)、使用者目標定位(特定 ID / 區段)
  • LaunchDarkly 適用於企業、Flagsmith 用於開源、Vercel Flags 或 @vercel/flags 適用於 Next.js
  • 預設在伺服器端評估開關 — 僅將開關值傳遞給客戶端,絕不傳遞評估邏輯
  • 開關命名慣例:enable-new-checkout、show-pricing-v2 — 描述性、kebab-case
  • 全面上線後清除開關 — 過時的開關是技術債;設定到期日
  • 百分比發布:對使用者 ID 進行哈希以實現一致分桶 — 同一使用者始終看到相同變體
  • 新功能預設開關為關閉 — 若開關服務不可用,應安全地失敗
  • 使用開關進行 A/B 測試:定義變體、追蹤轉換事件、衡量統計顯著性
  • 在本地開發時,將開關覆蓋值儲存於環境變數中

模式

// Vercel Flags / Next.js 模式
import { flag } from "@vercel/flags/next";

export const showNewCheckout = flag({
  key: "show-new-checkout",
  decide: () => false, // 預設關閉
});

// 在伺服器元件中
const enabled = await showNewCheckout();
// LaunchDarkly 模式
import * as ld from "@launchdarkly/node-server-sdk";
const client = ld.init(process.env.LAUNCHDARKLY_SDK_KEY!);

const showFeature = await client.variation("new-checkout", user, false);

避免

  • 未使用開關就發布功能 — 每個新功能都應可切換
  • 巢狀開關依賴 — 保持開關邏輯扁平且獨立
  • 在 100% 上線後仍將開關留在程式碼中 — 排定在 2 週內清理
  • 客戶端評估開關暴露目標定位規則 — 在伺服器端評估,傳送結果

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

YepAPI/skills

WCAG 2.1 AA — semantic HTML, keyboard navigation, screen readers.

YepAPI/skills

Experiment setup, variant splitting, statistical significance, and feature flag integration.

YepAPI/skills

CRUD generators, data tables, user management, role-based access, and bulk operations.

YepAPI/skills

Monitor what ChatGPT and Gemini say about your brand using YepAPI.

YepAPI/skills

Queue workers with BullMQ/Inngest/Trigger.dev, job retries, dead letter queues, concurrency.

YepAPI/skills

Commander.js, interactive prompts with Clack, spinners, colors, config files, exit codes, and npm publishing.

YepAPI/skills

cmdk integration, Cmd+K trigger, fuzzy search, grouped actions, keyboard navigation, and dynamic action registration.

YepAPI/skills

Content planning with trend and sentiment data from YepAPI.

YepAPI/skills

Content calendar, keyword-driven planning, and content briefs.

YepAPI/skills

Theme switching with CSS variables, system preference detection, next-themes, and persistence.

YepAPI/skills

Threaded comments, @mentions, reactions, moderation queue, optimistic UI, and cursor pagination.

YepAPI/skills

Competitive analysis between domains using YepAPI.

YepAPI/skills

Layout grids, KPI cards, data tables with sorting/filtering, sidebar navigation, and responsive breakpoints.

YepAPI/skills

Data encryption — TLS everywhere, AES-256-GCM for PII, bcrypt passwords, encrypted backups.

YepAPI/skills

Chart patterns with Recharts/Nivo/D3, responsive containers, color scales, and accessibility.

YepAPI/skills

Drizzle schema definition, push vs migrate, type-safe queries, relations, transactions, and prepared statements.

YepAPI/skills

Upload handling, resize/compress, CDN delivery, blur placeholders, and next/image patterns.

YepAPI/skills

Local business and Google Maps research using YepAPI.

YepAPI/skills

Cursor-based pagination, IntersectionObserver, virtualized lists with @tanstack/react-virtual, and scroll position restoration.

YepAPI/skills

Chat UI components, streaming responses with AI SDK, context window management, and RAG patterns.

相關技能