frontend-performance-reviewer
CommunityMeasure-first performance with Playwright.
Authorjarrodmedrano
Version1.0.0
Installs0
System Documentation
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.
Dependency Matrix
Required Modules
@modelcontextprotocol/server-playwright
Components
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: frontend-performance-reviewer Download link: https://github.com/jarrodmedrano/jarrod-claude-skills/archive/main.zip#frontend-performance-reviewer Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.