Web Observability Plugin

Teaches Claude how to instrument web apps correctly — what to measure, what context to attach, and what mistakes to avoid.

The Problem

Most web teams instrument poorly:

• Too little — Can't debug production issues
• Too much — Noise, cost, performance impact
• Wrong context — Errors without enough data to act on

This plugin teaches Claude to capture both user intent (what they tried to do) and system state (browser conditions, errors, performance) so you can answer "Why did this fail, and for whom?"

Installation

claude plugin marketplace add caleb-davis-plugins/web-observability
claude plugin install web-observability

Usage

Commands

/instrument
/audit src/features/checkout

Natural Prompts

"How should I instrument this checkout flow?"
"What's wrong with my Core Web Vitals?"
"Set up session replay with Sentry"
"Review this code for observability anti-patterns"
"Track this user journey from signup to first purchase"

Commands

Agents

codebase-analyzer

Explores web codebases to understand architecture and identify instrumentation opportunities.

Focus Areas:

• Framework and meta-framework detection (React, Next.js, Vue, Nuxt, etc.)
• Existing telemetry SDK inventory
• Routing, state management, data fetching patterns
• Key user flows and entry points

Output:

• Framework summary with version
• Architecture pattern identification
• Existing SDK coverage assessment
• Gap analysis with priority ranking

instrumentation-reviewer

Reviews code changes for observability issues before they ship.

Focus Areas:

• Anti-patterns (PII leaks, high cardinality, blocking main thread)
• Missing context (no user ID, no route, no session)
• Naming consistency
• Vendor best practices

Output:

• Issues by severity with file:line references
• Specific fixes with code examples
• Vendor guideline references

Skills

11 skills that activate automatically based on context:

Frameworks Supported

Platforms Supported

When to Use

Use this plugin for:

• Adding observability to a new or existing web app
• Setting up error tracking, performance monitoring, or session replay
• Improving Core Web Vitals (LCP, INP, CLS)
• Choosing between vendors (Sentry, Datadog, LogRocket, etc.)
• Reviewing instrumentation code for anti-patterns

Don't use for:

• Mobile app observability (use mobile-observability plugin)
• Backend/server observability
• General logging questions unrelated to web frontend

Architecture: Context Engineering

This plugin follows Anthropic's best practices for token-efficient context loading:

JIT Reference Loading

References are loaded only when needed, not upfront:

Single Source of Truth

Slim Definitions

Directory Structure

web-observability/
├── commands/       # /instrument, /audit (thin orchestrators)
├── agents/         # codebase-analyzer, instrumentation-reviewer
├── skills/         # 11 instrumentation skills (principles only)
├── hooks/          # Single consolidated anti-pattern hook
├── templates/      # Production-ready code templates
└── references/     # JIT-loaded guides (frameworks, platforms, patterns)

Philosophy

1. Start with Core Web Vitals — LCP, INP, CLS are Google's ranking factors
2. Context over volume — One error with full context beats 100 without
3. User intent + system state — Link what users tried to do with browser conditions
4. Avoid anti-patterns early — PII leaks and high cardinality are expensive to fix later
5. Don't block the main thread — Telemetry that hurts INP defeats the purpose

Author

Caleb Davis

License

MIT — see LICENSE