integration-vue-3

Name: integration-vue-3
Author: posthog

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

リポジトリ

integration-vue-3 について

Vue 3 アプリに PostHog 分析機能を追加するためのスキルです。段階的な統合手順に沿って作業でき、サンプルコードとユーザー識別、エラー追跡の資料を利用できます。

主な機能

014段階の統合ワークフロー
02Vue 3 のサンプルとドキュメント
03環境変数によるキー設定
04ユーザー識別とエラー追跡
05既存コードの変更を最小限に抑制

活用シーン

01Vue 3 アプリへの PostHog 導入
02サンプルに沿った統合作業
03ログイン・登録時のユーザー識別
04重要なフローへのエラー追跡追加

インストール

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

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

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

同梱ファイル

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

vue-js.md

詳細

Vue 3 向け PostHog 統合

このスキルでは、Vue 3 アプリケーションに PostHog アナリティクスを追加できます。

ワークフロー

統合を完了するには、次の手順を順番に実行します。

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

リファレンスファイル

references/EXAMPLE.md - Vue 3 のサンプルプロジェクトコード
references/vue-js.md - Vue.js - ドキュメント
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 のコードを追加してください。既存のコードを置き換えたり、構成し直したりしないでください。
サンプルに合わせる：実装では、できるだけサンプルプロジェクトのパターンに従ってください。

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

特定のフレームワークガイドラインはありません。

ユーザーの識別

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

エラー追跡

特に重要なユーザーフローや API の境界付近など、関連するファイルに PostHog のエラー追跡を追加してください。

Markdown 対応

ログインしてコメント

基本情報

作者: posthog
リポジトリ: posthog/skills
カテゴリ: データ・データベース
インストール数: 94
GitHub スター: 76

問題を報告

おすすめの Skills

すべての Skills

hyperframes-core

github.com/heygen-com

930.6k

HyperFrames コンポジションコントラクト — レンダリング可能なプロジェクトを構築します。コンポジション構造、data-* タイミング属性、class="clip"、トラック、サブコンポジション、変数、フレームワーク所有のメディア再生、決定論的レンダリングルール、検証に使用します。Tailwind プロジェクトおよび STORYBOARD.md / SCRIPT.md プラン形式もカバーします。コンポジション HTML を作成する前にお読みください。

lark-base

open.feishu.cn

823.2k

Feishu Base を操作します。テーブル、フィールド、レコード、ビューの作成、統計、数式/lookup、フォーム、ダッシュボード、アプリモード（BaseApp/AppMode のページとコンポーネント）、Workspace ディレクトリ、ワークフロー、ロール権限、テンプレートセンター（Base テンプレートのカテゴリ/一覧/検索）に対応します。Base/多次元テーブル/bitable、BaseApp/AppMode、/base/ または /app/ リンクがある場合に使用します。BaseApp に lark-apps は使用しません。ファイルのインポート/エクスポートは lark-drive、認証/認可は lark-shared に振り分けます。

lark-sheets

open.feishu.cn

821.8k

Feishu スプレッドシート：スプレッドシートの作成と操作に対応します。ワークシートと行/列構造（追加/削除/結合/サイズ/非表示/固定/グループ化）、セルの読み書き（値/数式/スタイル/コメント/セル画像）、範囲のコピー/移動/並べ替え/入力、検索と置換、一括更新、グラフ、ピボットテーブル、条件付き書式、フィルターとフィルタービュー、ドロップダウンリスト、スパークライン、浮動画像などのオブジェクトの作成と管理に対応します。数式の検証、過去バージョンへの復元、ローカルの Excel/CSV と Feishu スプレッドシート間のインポート/エクスポートも可能です。スプレッドシートの作成/編集、集計と可視化、書式設定、数式計算（Excel 数式の移行を含む）、財務モデリング（DCF、三表、予算、Sensitivity など）に使用します。多次元テーブル（Base/bitable）には lark-base を使用してください。クラウドストレージ（Drive/クラウドストレージ）内のスプレッドシートファイルを名前やキーワードで検索する場合は、まず lark-drive の drive +search でリソースを特定してください。doubao.com の /sheets/ URL/token が提示された場合も、このスキルを直接使用し、ドメインが Feishu でないことを理由に WebFetch にフォールバックしないでください。振り分けはドメインではなく URL パスの形式と token に基づきます。

remotion-best-practices

github.com/remotion-dev

701.4k

Remotion を使ってプログラム的にビデオを構築するためのベストプラクティスとドメイン知識（React/TypeScript でのビデオ、MP4 にレンダリング）。Remotion コードを書いたり編集したりするときはいつでも使用してください—ビデオプロジェクトのスカッフォルディング、interpolate/spring と useCurrentFrame() でのアニメーション、シーンとトランジションのシーケンス処理、字幕、オーディオ、GIF/Lottie/3D、チャート、ビジュアルエフェクト、calculateMetadata による動的な期間、またはレンダリング。Remotion API に手を出す前に相談してください。そのコンポーネントとプロップは進化し続けているからです（例：@remotion/media）。