web-vitals-monitor

Web Vitals Monitor - Auto-activating skill for Frontend Development. Triggers on: web vitals monitor, web vitals monitor Part of the Frontend Development skill category.

1.00x

Quality

Does it follow best practices?

Impact

100%

1.00x

Average score across 3 eval scenarios

Securityby

Passed

No known issues

Optimize this skill with Tessl

npx tessl skill review --optimize ./planned-skills/generated/05-frontend-dev/web-vitals-monitor/SKILL.md

Evaluation results

100%

Add Performance Monitoring to React E-Commerce App

React web vitals integration

Criteria

Without context

With context

Uses web-vitals package

100%

Imports from web-vitals

100%

Captures LCP

100%

Captures CLS

100%

Captures FID or INP

100%

Captures FCP

100%

Captures TTFB

100%

Sends to analytics endpoint

100%

Production-ready reporter

100%

Wired into React entry point

100%

JSON payload format

100%

Metric name included in payload

100%

Build a Web Vitals Scoring and Alerting Utility

Core Web Vitals threshold validation

Criteria

Without context

With context

LCP thresholds correct

100%

CLS thresholds correct

100%

FID thresholds correct

100%

FCP thresholds correct

100%

TTFB thresholds correct

100%

Three-tier rating output

100%

All Core Web Vitals covered

100%

Unit tests with boundary values

100%

Production-ready module

100%

Thresholds documented

100%

Demo script runnable

100%

Instrument a Vue.js Marketing Site with Real-User Performance Monitoring

Vue.js web vitals monitoring

Criteria

Without context

With context

Uses web-vitals package

100%

Imports web-vitals functions

100%

Captures LCP

100%

Captures CLS

100%

Captures FID or INP

100%

Captures FCP

100%

Captures TTFB

100%

Vue 3 plugin pattern

100%

Configurable endpoint URL

100%

Sends via HTTP POST

100%

Production-ready plugin

100%

Plugin installed in main

100%

Repository: jeremylongshore/claude-code-plugins-plus-skills
Commit: c8a915c

Evaluated: about 1 month ago
Agent: Claude Code
Model: Claude Sonnet 4.6

Table of Contents

Add Performance Monitoring to React E-Commerce App Build a Web Vitals Scoring and Alerting Utility Instrument a Vue.js Marketing Site with Real-User Performance Monitoring

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.