Integration Sveltekit — Agent Skill by PostHog

From the author

PostHog integration for SvelteKit applications

— the description by PostHog

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

This skill provides a comprehensive, step-by-step procedure for adding PostHog analytics to SvelteKit projects. It covers client-side initialization, server-side tracking, user identification, and error tracking. The workflow emphasizes best practices such as using environment variables, implementing reverse proxies to bypass ad blockers, and maintaining consistency with provided example patterns.

What it does

Guides users through a multi-step integration process for PostHog in SvelteKit.
Provides patterns for both client-side and server-side event tracking.
Includes instructions for user identification and error tracking implementation.
Details the configuration of reverse proxies to improve data reliability.
Requires the use of environment variables for secure credential management.
Mandates validation of Svelte components using provided tooling.

When to use it

When you need to add analytics to a new or existing SvelteKit application.
When you want to track user behavior across both client and server environments.
When you need to implement robust error tracking within a SvelteKit project.
When you are setting up session replay and require specific SvelteKit configuration adjustments.

Advantages

Ensures a consistent and reliable integration pattern.
Promotes secure handling of API keys via environment variables.
Addresses common SvelteKit-specific pitfalls like SSR compatibility.
Facilitates accurate user correlation between frontend and backend.

Usage examples

“How do I start integrating PostHog into my SvelteKit app?”: The agent initiates the workflow, starting with the 'PostHog Setup - Begin' phase to analyze your project structure and create an event tracking plan.
“How should I handle server-side tracking in SvelteKit?”: The agent directs you to use the singleton pattern in 'src/lib/server/posthog.ts' as shown in the reference example.

Install

Download the skill as a ZIP:
https://mp-staging.autogineer.com/agent-skills/posthog/integration-sveltekit/download

Unzip it into the cross-client skills folder of your project:

mkdir -p .agents/skills && unzip integration-sveltekit.zip -d .agents/skills

Documentation by PostHog

PostHog integration for SvelteKit

This skill helps you add PostHog analytics to SvelteKit applications.

Workflow

Follow these steps in order to complete the integration:

basic-integration-1.0-begin.md - PostHog Setup - Begin ← Start here
basic-integration-1.1-edit.md - PostHog Setup - Edit
basic-integration-1.2-revise.md - PostHog Setup - Revise
basic-integration-1.3-conclude.md - PostHog Setup - Conclusion

Reference files

references/EXAMPLE.md - SvelteKit example project code
references/svelte.md - Svelte - docs
references/identify-users.md - Identify users - docs
references/basic-integration-1.0-begin.md - PostHog setup - begin
references/basic-integration-1.1-edit.md - PostHog setup - edit
references/basic-integration-1.2-revise.md - PostHog setup - revise
references/basic-integration-1.3-conclude.md - PostHog setup - conclusion

The example project shows the target implementation pattern. Consult the documentation for API details.

Key principles

Environment variables: Always use environment variables for PostHog keys. Never hardcode them.
Minimal changes: Add PostHog code alongside existing integrations. Don't replace or restructure existing code.
Match the example: Your implementation should follow the example project's patterns as closely as possible.

Framework guidelines

Set paths.relative to false in svelte.config.js — this is required for PostHog session replay to work correctly with SSR and is easy to miss
Use the Svelte MCP server tools to check Svelte documentation (list-sections, get-documentation) and validate components (svelte-autofixer) — always run svelte-autofixer on new or modified .svelte files before finishing

Identifying users

Identify users during login and signup events. Refer to the example code and documentation for the correct identify pattern for this framework. If both frontend and backend code exist, pass the client-side session and distinct ID using X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to maintain correlation.

Error tracking

Add PostHog error tracking to relevant files, particularly around critical user flows and API boundaries.

Files

ATTRIBUTION.mdAdded by AutoGineer963 B
LICENSELicence file added by AutoGineer1.0 KiB
SKILL.md2.3 KiB
references/EXAMPLE.md18.4 KiB
references/basic-integration-1.0-begin.md2.1 KiB
references/basic-integration-1.1-edit.md2.5 KiB
references/basic-integration-1.2-revise.md937 B
references/basic-integration-1.3-conclude.md1.6 KiB
references/identify-users.md8.1 KiB
references/svelte.md7.2 KiB

references/basic-integration-1.2-revise.md

title: PostHog Setup - Revise description: Review and fix any errors in the PostHog integration implementation

Check the project for errors. Read the package.json file for any type checking or build scripts that may provide input about what to fix. Remember that you can find the source code for any dependency in the node_modules directory. Do not spawn subagents.

Ensure that any components created were actually used.

Once all other tasks are complete, run any linter or prettier-like scripts found in the package.json, but ONLY on the files you have edited or created during this session. Do not run formatting or linting across the entire project's codebase.

Status

Status to report in this phase:

Finding and correcting errors
Report details of any errors you fix
Linting, building and prettying

Upon completion, continue with: basic-integration-1.3-conclude.md

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs an MCP server

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Claude API
AnthropicOfficial
Comprehensive reference for integrating Anthropic's Claude API, SDKs, and Managed Agents into your applications.
Data and AIClaude CodeClaude appsOpenAI Codex+14 more
Apache-2.0Medium riskHas scriptsGitHub stars of the source repository188.6k
Transformers
K-Dense· Community
Integrate Hugging Face Transformers for model loading, inference, and fine-tuning across NLP, vision, and audio tasks.
Data and AIClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskGitHub stars of the source repository56.4k
Open Notebook
K-Dense· Community
Integrate with the self-hosted Open Notebook platform to automate research ingestion, context-aware chat, and AI-driven analysis.
Data and AIClaude CodeClaude appsOpenAI Codex+14 more
MITLow riskHas scriptsGitHub stars of the source repository56.4k
Vision Sft
Seth Hobson· Community
A structured workflow for supervised fine-tuning of vision-language models, focusing on adapter configuration and silent failure prevention.
Data and AIClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k
LLM Evaluation
Seth Hobson· Community
A comprehensive framework for evaluating LLM application performance using automated metrics, human feedback, and LLM-as-a-judge techniques.
Data and AIClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k
Lora Qlora Recipes
Seth Hobson· Community
Provides configuration recipes and best-practice hyperparameters for LoRA and QLoRA supervised fine-tuning.
Data and AIClaude CodeClaude appsOpenAI Codex+14 more
MITGitHub stars of the source repository42.3k

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download integration-sveltekit.zip