skills.rest
marquesfelip
marquesfelipCOMMUNITY
Explore all skills by this author →
GitHub

frontend-performance

Diagnose Core Web Vitals and optimize frontend performance in React, Vue, or Angular apps.

Updated Mar 29, 2026
Search Tags:#performance#frontend#code-splitting#image-optimization#lcp#inp
One-click install
npx skills add https://github.com/marquesfelip/agents-and-skills --skill frontend-performance-marquesfelip
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-performance
Source: https://github.com/marquesfelip/agents-and-skills/tree/main/skills/frontend-performance
Command: npx skills add https://github.com/marquesfelip/agents-and-skills --skill frontend-performance-marquesfelip

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend performance challenges slow to load and interact; this skill provides structured guidance to diagnose and optimize rendering and loading performance for web apps.

Core Features & Use Cases

  • Diagnose Core Web Vitals (LCP, FID/INP, CLS) and provide actionable improvements.
  • Reduce JavaScript bundle size via code splitting and tree shaking and optimize images and fonts.
  • Improve TTFB through SSR/SSG or edge caching and render-blocking resource removal.
  • Use Case: A React app with large bundles can be fine-tuned for faster interactivity and better Lighthouse scores.

Quick Start

Analyze a frontend performance profile and implement a plan to reduce LCP and INP while preserving features.

Frequently Asked Questions about frontend-performance

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

FAQPage Schema
How do I improve Core Web Vitals like LCP and INP for my web application?▼

Improve Core Web Vitals by diagnosing LCP, INP, and CLS metrics, then applying actionable improvements like code splitting, image optimization, and render-blocking resource management. This structured approach reduces loading times and enhances interactivity for modern web frameworks.

What's the best way to reduce JavaScript bundle size in a React app?▼

Reduce JavaScript bundle size in a React app by implementing code splitting and tree shaking. This optimization technique decreases the amount of code loaded initially, resulting in faster interactivity and improved Lighthouse performance scores.

Does this frontend performance optimization guidance work with Vue and Angular?▼

Yes, this frontend performance optimization guidance works with Vue and Angular. The structured approach applies to modern web applications built with similar frameworks to reduce LCP, INP, and CLS across various routes and components.

How do I optimize images and fonts to prevent layout shifts?▼

Optimize images and fonts to prevent layout shifts by properly sizing media assets and preloading critical web fonts. Managing these render-blocking resources and establishing a performance budget minimizes CLS and stabilizes the visual rendering of web pages.

Related Skills

Explore More Software Engineering Skills→
oiagorodriguesoiagorodrigues

core-web-vitals

Identify Core Web Vitals metrics and apply optimization patterns for LCP, INP, and CLS.

Community
Advanced
cloudflarecloudflare
2.6k

web-perf

Audit web performance and diagnose Core Web Vitals issues using Chrome DevTools MCP.

Official
Advanced
rnavarychrnavarych
14

role-frontend:frontend-performance

Diagnoses and improves Core Web Vitals and reduces bundle sizes via code splitting.

Community
Advanced
ChegginCheggin
1

performance-benchmark

Measure and enforce web performance budgets with Lighthouse CI.

Community
Advanced