mcpField
I
integration-sveltekit

integration-sveltekit

github.com/posthogデータ・データベース7696 回インストール今日更新
リポジトリ

integration-sveltekit について

SvelteKitアプリにPostHog分析を導入するためのスキルです。段階的な手順に沿って設定し、ユーザー識別やエラー追跡も案内します。

主な機能

  1. 014段階の導入ワークフロー
  2. 02SvelteKitの設定ガイド
  3. 03環境変数によるキー管理
  4. 04ユーザー識別の案内
  5. 05エラー追跡の案内
  6. 06Svelteコンポーネントの検証

活用シーン

  1. 01SvelteKitアプリへのPostHog導入
  2. 02ログインと登録時のユーザー識別
  3. 03重要な処理へのエラー追跡追加

MCP 対応

Svelte MCPサーバーのツールでドキュメントを確認し、コンポーネントを検証するよう案内します。

インストール

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

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

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

同梱ファイル

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

references/
basic-integration-1.0-begin.md
basic-integration-1.1-edit.md
basic-integration-1.2-revise.md
basic-integration-1.3-conclude.md
EXAMPLE.md
identify-users.md
svelte.md

詳細

SvelteKit 向け PostHog インテグレーション

このスキルでは、SvelteKit アプリケーションに PostHog アナリティクスを追加する方法を説明します。

ワークフロー

インテグレーションを完了するには、次の手順を順番に実行してください。

  1. basic-integration-1.0-begin.md - PostHog のセットアップ - 開始 ← ここから開始
  2. basic-integration-1.1-edit.md - PostHog のセットアップ - 編集
  3. basic-integration-1.2-revise.md - PostHog のセットアップ - 修正
  4. basic-integration-1.3-conclude.md - PostHog のセットアップ - 完了

参考ファイル

  • references/EXAMPLE.md - SvelteKit のサンプルプロジェクトのコード
  • references/svelte.md - Svelte - ドキュメント
  • references/identify-users.md - ユーザーの識別 - ドキュメント
  • references/basic-integration-1.0-begin.md - PostHog のセットアップ - 開始
  • references/basic-integration-1.1-edit.md - PostHog のセットアップ - 編集
  • references/basic-integration-1.2-revise.md - PostHog のセットアップ - 修正
  • references/basic-integration-1.3-conclude.md - PostHog のセットアップ - 完了

サンプルプロジェクトは、目標とする実装パターンを示しています。API の詳細はドキュメントを参照してください。

主な原則

  • 環境変数：PostHog のキーには、必ず環境変数を使用してください。ハードコードしないでください。
  • 変更は最小限に：既存のインテグレーションに PostHog のコードを追加してください。既存のコードを置き換えたり、構成を変更したりしないでください。
  • サンプルに合わせる：実装は、できる限りサンプルプロジェクトのパターンに沿ってください。

フレームワークのガイドライン

  • svelte.config.js で paths.relative を false に設定してください。これは SSR で PostHog のセッションリプレイを正しく動作させるために必要ですが、見落としやすい設定です。
  • Svelte のドキュメントを確認するには Svelte MCP サーバーのツール（list-sections、get-documentation）を使い、コンポーネントを検証するには（svelte-autofixer）を使ってください。完了前に、新規作成または変更した .svelte ファイルには必ず svelte-autofixer を実行してください。

ユーザーの識別

ログインおよびサインアップのイベント中にユーザーを識別してください。このフレームワークで適切な識別パターンを確認するには、サンプルコードとドキュメントを参照してください。フロントエンドとバックエンドの両方のコードがある場合は、クライアント側のセッション ID と distinct ID を X-POSTHOG-DISTINCT-ID および X-POSTHOG-SESSION-ID ヘッダーで渡し、相関関係を維持してください。

エラートラッキング

関連するファイル、特に重要なユーザーフローや API の境界部分に PostHog のエラートラッキングを追加してください。

コメント

Markdown 対応