analytics-monitoring

Consolidate analytics, error monitoring, and performance tracking for Next.js portfolios.

6|Updated Jan 29, 2026
One-click install
npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill analytics-monitoring
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: analytics-monitoring
Source: https://github.com/JaivishChauhan/vibecoding-starter/tree/main/.agent/skills/analytics-monitoring
Command: npx skills add https://github.com/JaivishChauhan/vibecoding-starter --skill analytics-monitoring

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the lack of unified analytics, error monitoring, and performance visibility for Next.js portfolios.

Core Features & Use Cases

  • Unified event tracking: A single interface to log page views, custom events, and performance metrics across Vercel Analytics, Google Analytics 4, and Sentry.
  • Real-time insights: Capture user interactions, error telemetry, and core web vitals to accelerate issue resolution and optimization.
  • Consent-aware analytics: Respect user consent by gating data collection and enabling privacy-aware configurations.
  • Use Case: Imagine a portfolio with multiple projects and sections; track project views, contact form submissions, and resume downloads to measure engagement and drive improvements.

Quick Start

Install the required analytics libraries, integrate providers in your app, and start using the unified tracker to log events. Then wire up your UI components to publish events via the tracker, ensuring consent checks are in place.

Frequently Asked Questions about analytics-monitoring

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

FAQPage Schema
How do I set up unified event tracking across Vercel Analytics, GA4, and Sentry in a Next.js portfolio?

Unified event tracking consolidates page views, custom events, and metrics across providers using a single type-safe tracker interface. You integrate the providers in your Next.js app and wire UI components to publish events through this unified tracker.

What is the best way to track core web vitals and errors for a production Next.js site?

Tracking core web vitals and errors requires real-time performance and reliability monitoring. This skill captures user interactions, error telemetry, and web vitals data across Vercel Analytics, GA4, and Sentry to accelerate issue resolution.

Does this analytics monitoring approach support consent-aware data collection?

Consent-aware analytics is supported by gating data collection and applying privacy-aware configurations. You can respect user consent by enabling checks that conditionally initialize tracking providers based on user preferences.

Can I track custom user interactions like resume downloads and contact form submissions?

Custom event tracking allows you to log specific user interactions like resume downloads and contact form submissions. You define type-safe events and wire your UI components to publish them via the unified tracker.

How do I configure client and server analytics integrations for a Next.js portfolio?

Client and server configuration requires installing analytics libraries and integrating providers across your Next.js app. This skill satisfies setup requirements with type-safe event definitions and a unified tracker for both environments.

Why do I need multiple analytics integrations instead of just Google Analytics?

Multiple integrations provide comprehensive visibility into user behavior, reliability, and performance. Combining Vercel Analytics, GA4, and Sentry delivers real-time insights that a single provider cannot cover across web vitals and error telemetry.