ring:dev-frontend-performance

Name: ring:dev-frontend-performance
Availability: InStock
Author: LucasMalessa

Coordinate QA analysts to measure Core Web Vitals and Lighthouse scores for frontend tasks.

Updated Mar 21, 2026

Search Tags:#automation #performance #frontend #lighthouse #bundling #core-web-vitals

Ready to run

npx skills add https://github.com/LucasMalessa/TheRing --skill ring-dev-frontend-performance

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: ring:dev-frontend-performance
Source: https://github.com/LucasMalessa/TheRing/tree/main/dev-team/skills/dev-frontend-performance
Command: npx skills add https://github.com/LucasMalessa/TheRing --skill ring-dev-frontend-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend teams struggle to consistently meet performance thresholds across the development cycle, risking UX regressions and slow deployments.

Core Features & Use Cases

Gate-driven testing: coordinates measurement of Core Web Vitals, Lighthouse performance, and bundle budgets for frontend tasks.
Automated analysis: tracks client component usage, bundle size changes, and server/client component balance during Gate 6.
Use Case: After implementing a UI feature, run Gate 6 to validate LCP, CLS, INP, and ensure frontend performance thresholds are met before code review.

Quick Start

Provide unit_id and the affected implementation_files, then dispatch the Frontend QA Analyst in performance mode to execute the tests.

Frequently Asked Questions about ring:dev-frontend-performance

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

FAQPage Schema

How do I automate Core Web Vitals testing for LCP, CLS, and INP before deployment?▼

Automating Core Web Vitals testing involves measuring LCP, CLS, and INP metrics during Gate 6. This ensures frontend performance thresholds are validated after E2E testing and before code review.

What is the best way to track bundle size changes and analyze frontend performance regressions?▼

Tracking bundle size changes requires analyzing bundle budgets and auditing client component usage. By auditing tree-shakeable imports and server/client component balance, you identify performance regressions before deployment.

When should I run Lighthouse audits in my development workflow?▼

Run Lighthouse audits after E2E testing during Gate 6. This ensures Lighthouse performance scores and frontend thresholds are validated before code review, preventing UX regressions from reaching production.

Can I check server and client component balance to ensure tree-shakeable imports?▼

Yes, you can check server and client component balance by auditing client component usage and analyzing tree-shakeable imports. This identifies inefficient component usage and prevents bundle size regressions.

Do I need to provide implementation files to measure frontend performance thresholds?▼

Yes, you need to provide the unit_id and affected implementation_files. This allows the QA analyst to execute performance tests and validate Core Web Vitals and Lighthouse scores.