Skills
.Work. You
Rest

skill-frontend-instrumentation-otel

Official

Instrument frontends with OpenTelemetry

Software Engineering#monitoring#frontend#tracing#instrumentation#vite#grafana#opentelemetry
Authorwhitebeardit
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill streamlines the process of adding detailed performance and usage telemetry to frontend applications, enabling better monitoring and debugging.

Core Features & Use Cases

  • OpenTelemetry Instrumentation: Integrates OpenTelemetry for tracing, metrics, and error tracking in Vite 3 + TypeScript/Vue applications.
  • Real User Monitoring (RUM): Captures essential metrics like Web Vitals, page views, and user interactions.
  • Use Case: When developing a new feature, use this Skill to ensure all user interactions, page loads, and potential errors are automatically captured and sent to Grafana, Tempo, and Mimir for analysis.

Quick Start

Use the skill-frontend-instrumentation-otel skill to instrument a new page with OpenTelemetry.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: skill-frontend-instrumentation-otel
Download link: https://github.com/whitebeardit/.cursor/archive/main.zip#skill-frontend-instrumentation-otel

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.