skills.rest
LucasMalessa
LucasMalessaCOMMUNITY
Explore all skills by this author →
GitHub

ring:dev-frontend-performance

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
One-click install
npx skills add https://github.com/LucasMalessa/TheRing --skill ring-dev-frontend-performance
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
V4-CompanyV4-Company
2

marsai:dev-frontend-e2e

Orchestrate Playwright E2E tests across Chromium, Firefox, and WebKit.

Official
Advanced
V4-CompanyV4-Company
2

marsai:dev-frontend-performance

Run frontend performance evaluations measuring Core Web Vitals, Lighthouse scores, and bundle sizes.

Official
Advanced
jangtrinhjangtrinh

web-perf

Analyze web performance gaps and optimize Core Web Vitals with Lighthouse.

Community
Intermediate
SergeiGolosSergeiGolos
1

performance-profiling

Audit web performance with Lighthouse and analyze bundle sizes.

Community
Intermediate