Does this skill work with Next.js applications?

Yes, it specifically audits for Next.js best practices, including 'use client' usage ratios and the implementation of the next/image component.

What are the specific performance thresholds for passing?

To pass this gate, a page must achieve a Lighthouse score > 90, LCP < 2.5s, CLS < 0.1, and INP < 200ms, with bundle size increases kept under 10%.

What happens if a performance test fails?

If metrics fall below thresholds, the skill identifies the failures and can dispatch a fix request to a frontend engineer agent for automated optimization.

When in the development cycle should this be used?

This is Gate 6 of the development cycle. It should be triggered after E2E testing (Gate 5) is complete but before requesting a final code review.

Frontend Performance Testing Gate

Name: Frontend Performance Testing Gate
Author: LerianStudio

byLerianStudio

•

135

•

Security & Testing

Enforces strict performance standards by auditing Core Web Vitals, Lighthouse scores, and bundle sizes within the development workflow.

This skill acts as a mandatory quality gate (Gate 6) for frontend development, ensuring that code changes do not degrade the user experience. It automates the measurement of Core Web Vitals like LCP, CLS, and INP, enforces a minimum Lighthouse performance score of 90, and monitors bundle size regressions. By auditing React Server Component usage and identifying performance anti-patterns, it helps teams maintain fast, efficient, and SEO-friendly web applications before they reach the code review stage.

Key Features

01Automated Core Web Vitals monitoring (LCP, CLS, INP)

02React Server Component (RSC) vs. Client Component audit

03Bundle size regression analysis and budgeting

04Detection of performance anti-patterns like bare img tags

05Strict Lighthouse performance score enforcement (>90)

06135 GitHub stars

Use Cases

01Optimizing Core Web Vitals for SEO-critical landing pages

02Validating performance thresholds before submitting a pull request

03Preventing bundle size bloat during feature development

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lerianstudio/ring dev-frontend-performance

For use in Claude.ai and ChatGPT

Download Skill