skills.rest
avel123111
avel123111COMMUNITY
Explore all skills by this author →
GitHub

integration-react-vite

Integrates PostHog analytics, user identification, and error tracking into React Vite applications.

Updated May 26, 2026
Search Tags:#analytics#react#vite#event tracking#error tracking#posthog#user identification
One-click install
npx skills add https://github.com/avel123111/triplanio --skill integration-react-vite-avel123111
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: integration-react-vite
Source: https://github.com/avel123111/triplanio/tree/main/.claude/skills/integration-react-vite
Command: npx skills add https://github.com/avel123111/triplanio --skill integration-react-vite-avel123111

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires posthog-js, @posthog/react, and includes references (resource) components.

What problem does it solve? Adding product analytics to a React (Vite) app requires many manual decisions: which events to track, where to place capture calls, how to identify users, and how to validate the setup. This Skill automates the full PostHog integration workflow from planning to a live dashboard. ## Core Features & Use Cases - Event tracking plan: Analyzes the project, selects 10-15 high-value files, and writes a .posthog-events.json plan covering conversion, churn, and server-side events. - Guided implementation: Adds posthog.capture(), posthog.identify(), and error tracking following PostHog best practices, using environment variables and minimal, non-destructive edits. - Validation and reporting: Runs lint/build checks on edited files, creates a PostHog dashboard with funnel and trend insights, and produces a posthog-setup-report.md plus a shareable notebook. - Use Case: You have a React 18 + Vite app with no analytics. Run this Skill to get a complete PostHog instrumentation with identified users, key business events, and a ready-made analytics dashboard. ## Quick Start Ask the agent to integrate PostHog analytics into this React Vite project and follow the guided setup workflow.

Frequently Asked Questions about integration-react-vite

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add PostHog analytics to a React Vite app?▼

Install posthog-js and @posthog/react, initialize posthog in main.jsx with VITE_-prefixed environment variables, and wrap the app in PostHogProvider. This Skill automates the full setup including event capture, identify calls, and a dashboard.

How to track custom events with posthog-js in React?▼

Use the usePostHog hook from @posthog/react and call posthog.capture() inside event handlers where user actions occur, not in useEffect. Never send PII in capture event properties; PII belongs in posthog.identify() person properties.

Does PostHog work with Vite environment variables?▼

Yes. Vite exposes variables prefixed with VITE_ to the frontend, so store the project token as VITE_POSTHOG_PROJECT_TOKEN and host as VITE_POSTHOG_HOST in .env.local. Never hardcode PostHog keys in source code.

How do I identify users in PostHog after login?▼

Call posthog.identify(userId, { email, name, role }) on login and on page refresh for already-logged-in users, and call posthog.reset() on logout. For apps with a backend, pass X-POSTHOG-DISTINCT-ID and X-POSTHOG-SESSION-ID headers to correlate server events.

Why is posthog undefined when calling capture in React?▼

This happens when posthog methods are called before initialization, such as during the initial render. Use the usePostHog hook with optional chaining (posthog?.capture()) instead of importing posthog directly outside the provider setup.

Related Skills

Explore More Software Engineering Skills→
PostHogPostHog
58

error-tracking-react-native

Enable PostHog-powered exception capture for React Native apps.

Official
Advanced
petekppetekp
5

posthog-analytics

Analyze PostHog MCP data to surface product insights and recommendations.

Community
Advanced
telum-aitelum-ai
2

posthog-integration

Integrate PostHog for event tracking, feature flags, and funnel analysis.

Official
Intermediate
EvezArtEvezArt
3

analytics-dashboard

Automate analytics provider setup and dashboard generation for web applications.

Community
Intermediate