frontend-observability
A framework-agnostic field-side observability system: one typed event taxonomy, best-effort non-blocking provider fan-out, real-user Web Vitals, error reporting, and consent gating.
Source: Stareezy
At a glance
- Best for
- Adding typed product analytics with a canonical event taxonomy
- Works with
- Cursor · OpenAI Codex · Claude Code
- Outcome
- Wiring a best-effort provider fan-out (Firebase, GA4, PostHog, etc.)
- Source
- stareezy-1/frontend-architecture-skill
01 / Understand the skill
About frontend-observability
A portable, framework-agnostic field-side observability system for any React or React Native app. Establishes one typed event taxonomy (canonical event-name constants, never inline strings), a best-effort non-blocking provider fan-out so a failing or absent analytics provider can never throw into the app or block other providers, a single track() entry point exposed through a context hook, real-user Core Web Vitals (RUM) reporting that complements lab Lighthouse budgets, error reporting at deliberate boundaries, and consent/privacy gating so nothing fires before opt-in. Provider-agnostic (Firebase Analytics, GA4, Microsoft Clarity, PostHog, OpenPanel, Sentry, Vercel/Cloudflare analytics) and works the same on web and React Native via one adapter shape. Use this skill when adding analytics or product tracking, instrumenting user actions, reporting Web Vitals from real users, wiring Firebase Analytics on web or React Native, wiring error reporting, gating telemetry on consent, or designing an event schema. Pairs with the frontend-lighthouse skill (lab budgets ↔ field reality). Works with React + Vite, Next.js, Remix, and Expo / React Native.
A portable, framework-agnostic field-side observability system for any React or React Native app. Establishes one typed event taxonomy (canonical event-name constants, never inline strings), a best-effort non-blocking provider fan-out so a failing or absent analytics provider can never throw into the app or block…
Read full description
A portable, framework-agnostic field-side observability system for any React or React Native app. Establishes one typed event taxonomy (canonical event-name constants, never inline strings), a best-effort non-blocking provider fan-out so a failing or absent analytics provider can never throw into the app or block other providers, a single track() entry point exposed through a context hook, real-user Core Web Vitals (RUM) reporting that complements lab Lighthouse budgets, error reporting at deliberate boundaries, and consent/privacy gating so nothing fires before opt-in. Provider-agnostic (Firebase Analytics, GA4, Microsoft Clarity, PostHog, OpenPanel, Sentry, Vercel/Cloudflare analytics) and works the same on web and React Native via one adapter shape. Use this skill when adding analytics or product tracking, instrumenting user actions, reporting Web Vitals from real users, wiring Firebase Analytics on web or React Native, wiring error reporting, gating telemetry on consent, or designing an event schema. Pairs with the frontend-lighthouse skill (lab budgets ↔ field reality). Works with React + Vite, Next.js, Remix, and Expo / React Native.
02 / Confirm the fit
Use frontend-observability when you need to
- Adding typed product analytics with a canonical event taxonomy
- Wiring a best-effort provider fan-out (Firebase, GA4, PostHog, etc.)
- Reporting real-user Core Web Vitals to complement lab budgets
- Gating all telemetry behind consent at the fan-out boundary
03 / See the workflow
How frontend-observability works
- 01Install: npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-observability
- 02Try: Add typed analytics with a consent-gated fan-out and Firebase adapter to my app.
- 03Get: An analytics service with a typed event catalog, guarded adapters, and Web Vitals reporting.
Check before installing
Compatible platforms
Cursor · OpenAI Codex · Claude Code
Best fit
Adding typed product analytics with a canonical event taxonomy
Review the source instructions if the required output differs from the formats described above.
Install and use
Compatible with Cursor and OpenAI Codex and Claude Code · Published by Stareezy
Ready to add frontend-observability?
Use the published instructions below, then provide the required input and describe the result you need.
General instructions · Cursor · OpenAI Codex · Claude Code
npx skills add https://github.com/stareezy-1/frontend-architecture-skill --skill frontend-observability
Review the source repository and license before installing third-party skills.
Continue exploring
Similar skills
Authoritative reference for the Claude API and Anthropic SDKs: model IDs, pricing, thinking/effort params, streaming, tool use, caching, managed agents, and model migration.
Read, edit, create, and fix Excel/CSV files — formulas, formatting, charts, and clean financial models with zero formula errors.
Generate distinctive, production-grade frontend UI that avoids generic AI aesthetics — pages, components, dashboards, and landing pages.
Build high-quality MCP (Model Context Protocol) servers in Python (FastMCP) or Node/TypeScript that let LLMs use external services through well-designed tools.