frontend-performance-reviewer

Measure Core Web Vitals and bundle size in React applications with Playwright MCP.

2|Updated Jan 11, 2026
One-click install
npx skills add https://github.com/jarrodmedrano/jarrod-claude-skills --skill frontend-performance-reviewer
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: frontend-performance-reviewer
Source: https://github.com/jarrodmedrano/jarrod-claude-skills/tree/main/.claude/skills/frontend-performance-reviewer
Command: npx skills add https://github.com/jarrodmedrano/jarrod-claude-skills --skill frontend-performance-reviewer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @modelcontextprotocol/server-playwright.

What problem does it solve?

This skill helps teams reliably detect real frontend performance bottlenecks in React applications by mandating measurement before any optimization, ensuring changes are data-driven rather than guesswork.

Core Features & Use Cases

  • Measurement-first workflow: captures Core Web Vitals (FCP, LCP, CLS, TTI), memory, network, and bundle size before suggesting fixes.
  • HARD BLOCK governance: blocks code changes if baseline measurements are unavailable or prerequisites are missing.
  • End-to-end scenarios: supports React/frontend apps during reviews, slow page loads, UI lag reports, and pre-deployment validation.
  • Explicit approval gate: blocks implementation without user consent.

Quick Start

Trigger a measurement pass on your React app with Playwright MCP. Ensure Playwright MCP is configured and your app is accessible (localhost or staging). Example: Run a baseline measurement for http://localhost:3000 to collect Core Web Vitals and bundle data.

Frequently Asked Questions about frontend-performance-reviewer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I measure React frontend performance before optimizing code?

Measure React frontend performance by running a baseline measurement pass using Playwright to capture Core Web Vitals, memory, network, and bundle size, ensuring changes are data-driven rather than guesswork.

What Core Web Vitals should I check for slow React page loads?

Check First Contentful Paint (FCP), Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Time to Interactive (TTI) to identify real frontend performance bottlenecks during slow React page loads.

Do I need Playwright MCP to review frontend performance?

Yes, you need Playwright MCP configured and your app accessible to review frontend performance, as the workflow enforces a hard block on code changes if baseline measurements or this prerequisite dependency are unavailable.

Can I automate UI interaction testing for React apps experiencing lag?

You can automate UI interaction testing for React apps experiencing lag by running live end-to-end measurement scenarios that validate production readiness and capture performance metrics before suggesting fixes.

Why does frontend performance optimization require explicit user approval?

Frontend performance optimization requires explicit user approval to enforce a governance gate that blocks code implementation without consent, ensuring all suggested fixes are reviewed after baseline measurements are collected.

When should I block code changes during a frontend code review?

Block code changes during a frontend code review when baseline measurements are unavailable, prerequisites are missing, or explicit user approval for implementation has not been granted.