skills.rest
rnavarych
rnavarychCOMMUNITY
Explore all skills by this author →
GitHub

role-frontend:frontend-performance

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

14|3|Updated Feb 22, 2026
Search Tags:#performance#frontend#optimization#bundle size#rendering#core web vitals
One-click install
npx skills add https://github.com/rnavarych/alpha-engineer --skill role-frontend-frontend-performance
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: role-frontend:frontend-performance
Source: https://github.com/rnavarych/alpha-engineer/tree/main/plugins/roles/role-frontend/skills/frontend-performance
Command: npx skills add https://github.com/rnavarych/alpha-engineer --skill role-frontend-frontend-performance

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow frontend performance by optimizing loading times, rendering, and interactivity, directly improving user experience and Core Web Vitals.

Core Features & Use Cases

  • Core Web Vitals Optimization: Improve LCP, INP, and CLS scores.
  • Bundle Size Reduction: Implement code splitting, tree shaking, and dynamic imports.
  • Image & Font Optimization: Optimize formats, responsive loading, and font strategies.
  • Rendering Strategies: Advise on SSR, SSG, RSC, and Islands architecture.
  • Use Case: A website's LCP is too high, causing a poor user experience. This Skill can analyze the LCP element, suggest preloading and optimal image formats, and guide the implementation to bring the score within target limits.

Quick Start

Analyze the current frontend performance and identify the top three areas for optimization.

Frequently Asked Questions about role-frontend:frontend-performance

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

FAQPage Schema
How do I optimize Core Web Vitals like LCP, INP, and CLS to improve frontend performance?▼

Optimizing Core Web Vitals involves analyzing LCP, INP, and CLS scores to identify bottlenecks, then applying preloading, image format adjustments, and main thread optimizations to bring metrics within target limits.

What is the best way to reduce bundle size using code splitting and tree shaking?▼

The best way to reduce bundle size is by implementing code splitting, tree shaking, and dynamic imports, which remove unused code and load JavaScript payloads asynchronously to speed up rendering.

How do rendering patterns like SSR, SSG, and RSC affect frontend performance?▼

Rendering patterns like SSR, SSG, RSC, and Islands architecture affect performance by changing when and where HTML generates, directly influencing loading times and main thread interactivity.

How can I optimize image and font loading strategies for faster page rendering?▼

Optimizing image and font loading requires choosing optimal formats, implementing responsive loading, and applying font loading strategies to prevent layout shifts and reduce payload weight.

What are the limitations of main thread optimization for frontend interactivity?▼

Main thread optimization limitations arise when heavy JavaScript execution blocks interactivity, requiring performance budgeting and rendering pattern shifts to prevent long tasks from degrading INP.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
jovermierjovermier
2

nextjs-performance

Optimize Next.js apps for Core Web Vitals using next/image, next/font, and next/dynamic.

Community
Advanced
GenuinehGenuineh

frontend-framework-nextjs

Guide React and Next.js development with rendering strategies and App Router architecture.

Community
Intermediate