mcpField
F
feature-flags-react

feature-flags-react

github.com/posthog开发76112 次安装今天更新
代码仓库

关于 feature-flags-react

用于在 React 应用中添加 PostHog 功能标志的技能，提供专用 Hook 建议以处理标志状态和载荷，并说明事件采集与 effect 的使用方式。

主要功能

  1. 01React 专用 PostHog 标志配置
  2. 02处理标志状态与载荷的 Hook
  3. 03通过环境变量配置密钥
  4. 04尽量少改现有代码
  5. 05分析事件与 effect 使用指南

适用场景

  1. 01为 React 应用添加标志
  2. 02处理标志加载状态和载荷
  3. 03在用户操作时采集分析事件

MCP 相关

若已连接 PostHog MCP 服务，该技能可调用其工具创建、列出、更新或删除功能标志。

安装

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

$npx skills add https://github.com/posthog/skills --skill feature-flags-react

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
adding-feature-flag-code.md
best-practices.md
react.md

详细介绍

React 的 PostHog 功能标志

此技能可帮助你将 PostHog 功能标志添加到 React 应用中。

参考文件

  • references/react.md - React 功能标志安装文档
  • references/adding-feature-flag-code.md - 添加功能标志代码文档
  • references/best-practices.md - 功能标志最佳实践文档

请查阅文档，了解 API 详情和特定框架的模式。

核心原则

  • 环境变量：始终使用环境变量存储 PostHog 密钥。切勿将密钥硬编码。
  • 尽量少改动：在现有逻辑旁添加功能标志代码。不要替换或重构现有代码。
  • 优先使用布尔标志：除非用户明确要求使用多变量标志，否则默认检查布尔标志。
  • 尽可能在服务端处理：优先在服务端评估标志，以避免 UI 闪烁。

PostHog MCP 工具

检查是否已连接 PostHog MCP 服务。如果已连接，请查找与功能标志管理相关的工具（创建、列出、更新和删除标志）。使用这些工具直接在 PostHog 中管理标志，而不是要求用户在控制面板中手动操作。

框架指南

  • 对于功能标志，请使用 useFeatureFlagEnabled() 或 useFeatureFlagPayload() 钩子——它们会自动处理加载状态和外部同步
  • 在用户操作发生处的事件处理程序中添加分析事件捕获，而不是在响应状态变化的 useEffect 中添加
  • 不要使用 useEffect 进行数据转换；应在渲染期间计算派生值
  • 不要使用 useEffect 响应用户事件；应将相关逻辑放在事件处理程序本身中
  • 不要使用 useEffect 串联状态更新；应在事件处理程序中一并计算所有相关更新
  • 不要使用 useEffect 通知父组件；应在事件处理程序中调用 setState 的同时调用父组件回调
  • 若要在 prop 变化时重置组件状态，请将该 prop 作为组件的 key 传入，而不是使用 useEffect
  • useEffect 仅用于与外部系统（非 React 小部件、浏览器 API、网络订阅）同步

评论

支持 Markdown