mcpField
A
adding-feature-flags

adding-feature-flags

github.com/revitalb-port开发077 次安装11 周前更新
代码仓库

关于 adding-feature-flags

adding-feature-flags 是一款指导开发者为应用添加功能标志的 Skill，适用于功能开关、渐进式发布和 A/B 测试。它介绍使用 PostHog 进行标志评估，也提供基于环境变量的本地实现方式。

主要功能

  1. 01指导添加功能标志
  2. 02介绍 PostHog 客户端标志评估
  3. 03说明服务端标志评估
  4. 04提供基于环境变量的本地方案
  5. 05涵盖发布清理与缓存建议

适用场景

  1. 01为面向用户的新功能设置渐进式发布
  2. 02按用户属性或比例启用功能
  3. 03无需第三方服务时使用本地开关

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/revitalb-port/skills-registry-demo --skill adding-feature-flags

安装后在 Claude Code 中输入/adding-feature-flags确认已加载。

详细介绍

添加功能标志

当用户要求添加功能标志、功能开关、渐进式发布或 A/B 测试时，请使用此技能。

选项 A：PostHog 功能标志（推荐）

  1. 安装 PostHog（如果尚未安装）：

    npm install posthog-js

  2. 在代码中使用功能标志：

    import { useFeatureFlagEnabled } from "posthog-js/react";

function MyComponent() {
  const showNewFeature = useFeatureFlagEnabled("new-checkout-flow");
  if (showNewFeature) return <NewCheckout />;
  return <OldCheckout />;
}

  3. 服务端评估——用于服务端组件或 API 路由：

    import { PostHog } from "posthog-node";

const posthog = new PostHog(process.env.POSTHOG_API_KEY!);
const isEnabled = await posthog.isFeatureEnabled("new-checkout-flow", userId);

  4. 在 PostHog 控制面板中创建标志——根据用户属性、百分比发布或用户群组设置定向规则。

选项 B：简单的本地功能标志

对于不需要第三方服务的项目：

  1. 创建标志配置——lib/feature-flags.ts：

    export const FLAGS = {
  NEW_CHECKOUT: process.env.NEXT_PUBLIC_FF_NEW_CHECKOUT === "true",
  DARK_MODE: process.env.NEXT_PUBLIC_FF_DARK_MODE === "true",
} as const;

  2. 在组件中使用：

    import { FLAGS } from "@/lib/feature-flags";

function App() {
  return FLAGS.NEW_CHECKOUT ? <NewCheckout /> : <OldCheckout />;
}

  3. 添加环境变量——将标志添加到 .env 和 .env.example：

    NEXT_PUBLIC_FF_NEW_CHECKOUT=false
NEXT_PUBLIC_FF_DARK_MODE=true

注意事项

  • 发布期间，所有面向用户的变更都应使用功能标志，而不只是实验功能。
  • 清理过期标志——功能全面发布后，移除标志及旧代码路径。
  • 对于服务端标志，请缓存评估结果，避免每次请求都调用 API。
  • 使用描述性名称命名标志：new-checkout-flow，而不是 flag-1。

评论

支持 Markdown