mcpField
A
adding-feature-flags

adding-feature-flags

github.com/spencerpauly开发868367 次安装12 周前更新
代码仓库

关于 adding-feature-flags

这项编码技能介绍使用 PostHog 或本地配置添加功能开关，涵盖客户端与服务端评估、定向规则和发布实践。

主要功能

  1. 01PostHog 客户端功能开关
  2. 02服务端评估开关
  3. 03仪表板定向规则
  4. 04基于环境变量的本地开关
  5. 05清理过期开关的指引

适用场景

  1. 01逐步发布新功能
  2. 02按用户属性或群组定向开关
  3. 03不依赖第三方服务运行开关
  4. 04在服务端路由中评估开关

安装

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

$npx skills add https://github.com/spencerpauly/awesome-cursor-skills --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