mcpField
O
omnibus-instrument-integration

omnibus-instrument-integration

github.com/posthog開発76100 回インストール今日更新
リポジトリ

omnibus-instrument-integration について

アプリケーションへの PostHog SDK の追加や設定レビューを支援するスキルです。プロジェクトの技術スタックを判別し、多様なフレームワークと言語に対応した導入、初期化、ユーザー識別、設定、検証を案内します。

主な機能

  1. 01フレームワークとパッケージ管理ツールの判別
  2. 02フレームワーク別の設定資料
  3. 03SDK の導入と初期化の案内
  4. 04ユーザー識別と環境変数への対応
  5. 05検証と後片付けの手順

活用シーン

  1. 01新規アプリへの PostHog 導入
  2. 02PostHog 設定に関するプルリクエストのレビュー
  3. 03フロントエンドとバックエンドの PostHog 設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/posthog/skills --skill omnibus-instrument-integration

インストール後、Claude Code で/omnibus-instrument-integrationを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

references/
android.md
angular.md
astro.md
django.md
EXAMPLE-android.md
EXAMPLE-angular.md
EXAMPLE-astro-hybrid.md
EXAMPLE-astro-ssr.md
EXAMPLE-astro-static.md
EXAMPLE-astro-view-transitions.md
EXAMPLE-django.md
EXAMPLE-expo.md
EXAMPLE-fastapi.md
EXAMPLE-flask.md
EXAMPLE-javascript-node.md
EXAMPLE-javascript-web.md
EXAMPLE-laravel.md
EXAMPLE-next-app-router.md
EXAMPLE-next-pages-router.md
EXAMPLE-nuxt-3.6.md
EXAMPLE-nuxt-4.md
EXAMPLE-python.md
EXAMPLE-react-native.md
EXAMPLE-react-react-router-6.md
EXAMPLE-react-react-router-7-data.md
EXAMPLE-react-react-router-7-declarative.md
EXAMPLE-react-react-router-7-framework.md
EXAMPLE-react-tanstack-router-code-based.md
EXAMPLE-react-tanstack-router-file-based.md
EXAMPLE-react-vite.md

詳細

PostHog SDK の統合

このスキルを使用して、アプリケーションに PostHog SDK を追加します。PostHog を初めてセットアップするときや、PostHog の初期化が必要な PR をレビューするときに使用してください。SDK のインストール、プロバイダーのセットアップ、基本的な設定を扱います。あらゆるフレームワークや言語に対応しています。

対応フレームワーク：Next.js、React、React Router、Vue、Nuxt、TanStack Start、SvelteKit、Astro、Angular、Django、Flask、FastAPI、Laravel、Ruby on Rails、Android、Swift、React Native、Expo、Node.js、vanilla JavaScript。

手順

以下の手順を順番どおりに実行してください。

STEP 1：コードベースを分析し、プラットフォームを検出します。

  • 依存関係ファイル（package.json、requirements.txt、Gemfile、composer.json、go.mod など）を確認し、フレームワークと言語を特定します。
  • ロックファイル（pnpm-lock.yaml、package-lock.json、yarn.lock、bun.lockb）を確認し、パッケージマネージャーを特定します。
  • PostHog のセットアップがすでに存在するか確認します。PostHog がすでにインストールされ、初期化されている場合は、そのコードを変更しないでください。ユーザーに知らせ、検証に進みます。

STEP 2：統合方法を調査します。 2.1. 検出したフレームワークに一致する以下のリファレンスファイルを見つけてください。このファイルは、SDK の初期化、プロバイダーのセットアップ、設定パターンに関する信頼できる情報源です。今すぐ読み込んでください。 2.2. 一致するリファレンスがない場合は、一般知識とウェブ検索を利用してください。検索では posthog.com/docs を主な情報源として使用してください。

STEP 3：PostHog SDK をインストールします。

  • 検出したプラットフォーム用の PostHog SDK パッケージを追加します。package.json を手動で編集せず、パッケージマネージャーのインストールコマンドを使用してください。
  • パッケージは必ずバックグラウンドタスクとしてインストールしてください。完了を待たずに、インストールを開始したらすぐにほかの作業を進めてください。

STEP 4：PostHog を初期化します。

  • フレームワークのリファレンスに従って、初期化する場所と方法を決定してください。フレームワークによって大きく異なります（例：Next.js 15.3+ の instrumentation-client.ts、Django の AppConfig.ready()、Flask の create_app()）。
  • フレームワークで必要な場合は、PostHog プロバイダー／ラッパーコンポーネントをセットアップしてください。

STEP 5：ユーザーを識別します。

  • ログインおよびサインアップのイベント時に、クライアント側で PostHog の identify() 呼び出しを追加してください。
  • フロントエンドとバックエンドの両方が存在する場合は、クライアント側のセッション ID と distinct ID を X-POSTHOG-DISTINCT-ID および X-POSTHOG-SESSION-ID ヘッダーでサーバー側のコードに渡してください。

STEP 6：環境変数を設定します。

  • PostHog API キーとホストを環境変数（.env やフレームワーク固有の環境変数ファイルなど）に保存してください。
  • 値をハードコードせず、コードではこれらの環境変数を参照してください。

STEP 7：検証してクリーンアップします。

  • プロジェクトにエラーがないか確認してください。package.json に型チェックまたはビルドのスクリプトがあるか確認します。
  • 作成したコンポーネントが実際に使用されていることを確認してください。
  • package.json にあるリンターや Prettier のようなスクリプトを実行してください。

リファレンスファイル

  • references/EXAMPLE-next-app-router.md - next-app-router のサンプルプロジェクトコード
  • references/EXAMPLE-next-pages-router.md - next-pages-router のサンプルプロジェクトコード
  • references/EXAMPLE-react-react-router-6.md - react-react-router-6 のサンプルプロジェクトコード
  • references/EXAMPLE-react-react-router-7-framework.md - react-react-router-7-framework のサンプルプロジェクトコード
  • references/EXAMPLE-react-react-router-7-data.md - react-react-router-7-data のサンプルプロジェクトコード
  • references/EXAMPLE-react-react-router-7-declarative.md - react-react-router-7-declarative のサンプルプロジェクトコード
  • references/EXAMPLE-react-vite.md - react-vite のサンプルプロジェクトコード
  • references/EXAMPLE-nuxt-3.6.md - nuxt-3.6 のサンプルプロジェクトコード
  • references/EXAMPLE-nuxt-4.md - nuxt-4 のサンプルプロジェクトコード
  • references/EXAMPLE-vue-3.md - vue-3 のサンプルプロジェクトコード
  • references/EXAMPLE-react-tanstack-router-file-based.md - react-tanstack-router-file-based のサンプルプロジェクトコード
  • references/EXAMPLE-react-tanstack-router-code-based.md - react-tanstack-router-code-based のサンプルプロジェクトコード
  • references/EXAMPLE-tanstack-start.md - tanstack-start のサンプルプロジェクトコード
  • references/EXAMPLE-sveltekit.md - sveltekit のサンプルプロジェクトコード
  • references/EXAMPLE-astro-static.md - astro-static のサンプルプロジェクトコード
  • references/EXAMPLE-astro-view-transitions.md - astro-view-transitions のサンプルプロジェクトコード
  • references/EXAMPLE-astro-ssr.md - astro-ssr のサンプルプロジェクトコード
  • references/EXAMPLE-astro-hybrid.md - astro-hybrid のサンプルプロジェクトコード
  • references/EXAMPLE-angular.md - angular のサンプルプロジェクトコード
  • references/EXAMPLE-javascript-node.md - javascript-node のサンプルプロジェクトコード
  • references/EXAMPLE-javascript-web.md - javascript-web のサンプルプロジェクトコード
  • references/EXAMPLE-django.md - django のサンプルプロジェクトコード
  • references/EXAMPLE-flask.md - flask のサンプルプロジェクトコード
  • references/EXAMPLE-fastapi.md - fastapi のサンプルプロジェクトコード
  • references/EXAMPLE-python.md - python のサンプルプロジェクトコード
  • references/EXAMPLE-laravel.md - laravel のサンプルプロジェクトコード
  • references/EXAMPLE-ruby-on-rails.md - ruby-on-rails のサンプルプロジェクトコード
  • references/EXAMPLE-ruby.md - ruby のサンプルプロジェクトコード
  • references/EXAMPLE-android.md - android のサンプルプロジェクトコード
  • references/EXAMPLE-swift.md - swift のサンプルプロジェクトコード
  • references/EXAMPLE-react-native.md - react-native のサンプルプロジェクトコード
  • references/EXAMPLE-expo.md - expo のサンプルプロジェクトコード
  • references/next-js.md - Next.js - ドキュメント
  • references/react.md - React - ドキュメント
  • references/react-router-v6.md - React router v6 - ドキュメント
  • references/react-router-v7-framework-mode.md - React router v7 framework mode（remix v3） - ドキュメント
  • references/react-router-v7-data-mode.md - React router v7 data mode - ドキュメント
  • references/react-router-v7-declarative-mode.md - React router v7 declarative mode - ドキュメント
  • references/nuxt-js-3-6.md - Nuxt.js（v3.0 から v3.6） - ドキュメント
  • references/nuxt-js.md - Nuxt.js - ドキュメント
  • references/vue-js.md - Vue.js - ドキュメント
  • references/tanstack-start.md - Tanstack start - ドキュメント
  • references/svelte.md - Svelte - ドキュメント
  • references/astro.md - Astro - ドキュメント
  • references/angular.md - Angular - ドキュメント
  • references/js.md - JavaScript web - ドキュメント
  • references/posthog-js.md - PostHog JavaScript web SDK
  • references/node.md - Node.js - ドキュメント
  • references/posthog-node.md - PostHog Node.js SDK
  • references/django.md - Django - ドキュメント
  • references/flask.md - Flask - ドキュメント
  • references/python.md - Python - ドキュメント
  • references/posthog-python.md - PostHog Python SDK
  • references/laravel.md - Laravel - ドキュメント
  • references/ruby-on-rails.md - Ruby on rails - ドキュメント
  • references/ruby.md - Ruby - ドキュメント
  • references/android.md - Android - ドキュメント
  • references/ios.md - Ios - ドキュメント
  • references/react-native.md - React native - ドキュメント
  • references/identify-users.md - ユーザーの識別 - ドキュメント 各フレームワークのリファレンスには、SDK 固有のインストール、初期化、使用方法が記載されています。ユーザーのスタックに合ったものを選んでください。

主な原則

  • 環境変数：PostHog のキーには必ず環境変数を使用してください。ハードコードしないでください。
  • 変更は最小限に：既存の連携に PostHog のコードを追加してください。既存のコードを置き換えたり、再構成したりしないでください。
  • サンプルに合わせる：実装は、できるだけサンプルプロジェクトのパターンに沿ってください。
  • アナリティクスの契約：イベント名、プロパティ名、フィーチャーフラグのキーは、アナリティクスの契約の一部として扱ってください。プロジェクト内に既存の名前やパターンがあれば再利用してください。新たに導入する場合は、明確で説明的な名前にし、既存の規則と一貫性を持たせてください。

コメント

Markdown 対応