integration-astro-static

Name: integration-astro-static
Author: posthog

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

リポジトリ

integration-astro-static について

静的な Astro アプリに PostHog 分析機能を追加するためのスキルです。段階的な手順とサンプルに加え、スクリプト、環境変数、再利用可能な初期化に関する Astro 固有の指針を示します。

主な機能

014段階の統合ワークフロー
02Astro のサンプルとドキュメント
03PostHog スクリプトのインライン指定
04PUBLIC_ 環境変数の設定指針
05再利用可能なコンポーネント初期化
06ユーザー識別とエラー追跡

活用シーン

01静的 Astro アプリへの PostHog 導入
02クライアント用プロジェクトトークンの設定
03レイアウトを使った初期化の共通化
04ユーザー識別とエラー追跡

インストール

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

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

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

同梱ファイル

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

references/

astro.md

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

詳細

Astro（静的サイト）向け PostHog インテグレーション

このスキルでは、Astro（静的サイト）アプリケーションに 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 - Astro（静的サイト）のサンプルプロジェクトコード
references/astro.md - Astro - ドキュメント
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 のコードを追加してください。既存のコードを置き換えたり、構成し直したりしないでください。
サンプルに合わせる：実装は、できる限りサンプルプロジェクトのパターンに沿ってください。

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

Astro による処理や TypeScript エラーを防ぐため、PostHog のスクリプトタグには必ず is:inline ディレクティブを使用してください
Astro では、クライアント側の環境変数に PUBLIC_ プレフィックスを使用してください（例：PUBLIC_POSTHOG_PROJECT_TOKEN）
ページ間で初期化処理を再利用できるように、src/components/ に posthog.astro コンポーネントを作成してください
PostHog コンポーネントを Layout にインポートし、すべてのページをその Layout でラップしてください

ユーザーの識別

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

エラー追跡

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

Markdown 対応

ログインしてコメント

基本情報

作者: posthog
リポジトリ: posthog/skills
カテゴリ: データ・データベース
インストール数: 95
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）。