
getsentry / webvitals.com
✓ Official★ 12A skill package that teaches your agent 14 capabilities — every one documented and browsable below, no GitHub required · by sentry.
Each skill below is one capability this package teaches your agent. Install the whole package, or open a skill to install just that one.
This skill should be used when the user asks to "create AGENTS.md", "update AGENTS.md", "maintain agent docs", "set up CLAUDE.md", or needs to keep agent…
1 file — installable on its own
ai-sdk — an installable skill for AI agents, published by getsentry/webvitals.com.
5 files — installable on its own
Simplifies and refines code for clarity, consistency, and maintainability while preserving all functionality. Use when asked to "simplify code", "clean up…
1 file — installable on its own
Create commit messages following Sentry conventions. Use when committing code changes, writing commit messages, or formatting git history. Follows conventional…
1 file — installable on its own
Create pull requests following Sentry conventions. Use when opening PRs, writing PR descriptions, or preparing changes for review. Follows Sentry's code review…
1 file — installable on its own
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts,…
2 files — installable on its own
When the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental…
1 file — installable on its own
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization,…
20 files — installable on its own
When the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages…
3 files — installable on its own
Find and fix issues from Sentry using MCP. Use when asked to fix Sentry errors, debug production issues, investigate exceptions, or resolve bugs reported in…
1 file — installable on its own
Create new agent skills following the Agent Skills specification. Use when asked to "create a skill", "add a new skill", "write a skill", "make a skill",…
4 files — installable on its own
React composition patterns that scale. Use when refactoring components with
11 files — installable on its own
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js…
50 files — installable on its own
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…
1 file — installable on its own
WebVitals.com
From Score to Solution — AI-powered web performance analysis that transforms Core Web Vitals into actionable insights.
What it does
Enter a URL, get real-world performance data from Chrome UX Report (CrUX), AI-powered analysis from Claude, and technology detection — all streamed in real time.
- Real user metrics (LCP, FCP, INP, CLS, TTFB) with Sentry-style scoring
- Technology detection (framework, hosting, CDN)
- AI-generated recommendations tailored to your detected stack
- Per-metric educational pages with interactive animations
Tech Stack
- Next.js 16 (App Router, Turbopack) + React 19 + TypeScript 5 (strict)
- Anthropic AI SDK (
@ai-sdk/anthropic) — Claude for streaming analysis - Sentry (
@sentry/nextjs) — error monitoring, tracing, session replay, AI monitoring - TailwindCSS 4 + shadcn/ui + Motion (animation)
- Biome 2 — formatting and linting
Development
pnpm install
pnpm dev # Start dev server (Turbopack)
pnpm build # Production build
pnpm check-types # Type checking
pnpm lint # Biome lintRequires ANTHROPIC_API_KEY, GOOGLE_API_KEY, and optionally Sentry env vars. See .env.example.
Project Structure
app/
api/chat/ # AI streaming endpoint (2-step tool orchestration)
api/follow-up-suggestions/ # Follow-up generation
[metric]/ # LCP, FCP, INP, CLS, TTFB pages
ai/tools/ # AI tool definitions
components/ # UI components, animations, visualizations
hooks/ # Custom React hooks
lib/ # Utilities
types/ # TypeScript definitionsLicense
Apache License 2.0 — see LICENSE.
Install the whole package (14 skills):
npx skills add https://github.com/getsentry/webvitals.comOr install a single skill:
npx skills add https://github.com/getsentry/webvitals.com --skill <name>Pick the skill name from the Skills tab — each entry there installs independently.