skills.rest
gaebalai
gaebalaiCOMMUNITY
Explore all skills by this author →
Website𝕏@gaebalaiGitHub

fe-performance-review

Analyze frontend codebases for Core Web Vitals improvement opportunities.

2|Updated Feb 25, 2026
Search Tags:#code review#performance#frontend#optimization#javascript#core web vitals
One-click install
npx skills add https://github.com/gaebalai/claude-code-kit-ko --skill fe-performance-review
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: fe-performance-review
Source: https://github.com/gaebalai/claude-code-kit-ko/tree/main/.claude/skills/fe-performance-review
Command: npx skills add https://github.com/gaebalai/claude-code-kit-ko --skill fe-performance-review

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill identifies and resolves frontend performance bottlenecks, ensuring faster load times and a smoother user experience by analyzing Core Web Vitals and code structure.

Core Features & Use Cases

  • Core Web Vitals Analysis: Assesses LCP, CLS, and INP to pinpoint user-perceived performance issues.
  • Code Optimization: Detects JS bundle bloat, rendering-blocking resources, and layout shift causes.
  • Use Case: Analyze your React application's src/components directory to find and fix issues causing slow Largest Contentful Paint and excessive JavaScript bundle size.

Quick Start

Analyze the frontend performance of the 'src/app' directory, focusing on JavaScript bundle size.

Frequently Asked Questions about fe-performance-review

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

FAQPage Schema
How do I analyze Core Web Vitals like LCP, CLS, and INP in my frontend codebase?▼

This Skill analyzes Core Web Vitals by assessing your frontend codebase to pinpoint LCP, CLS, and INP issues, identifying rendering-blocking factors and layout shift causes.

How do I find and fix JavaScript bundle bloat in a React application?▼

Detect JavaScript bundle bloat by analyzing your React application's component directories to find excessive bundle sizes, rendering-blocking resources, and specific code improvements.

Does this frontend performance optimization tool support Vite and Next.js build environments?▼

Yes, frontend performance optimization supports analysis of various build tools including webpack, Vite, and Next.js to identify JavaScript bundle bloat and rendering-blocking factors.

What is the best way to improve Largest Contentful Paint without changing my entire architecture?▼

The best way to improve Largest Contentful Paint is analyzing your existing src/components directory to find specific rendering-blocking factors and applying targeted code improvements.

Why does my frontend codebase have high layout shift and how do I resolve it?▼

High layout shift occurs when frontend code causes unexpected visual movement; this Skill assesses CLS to pinpoint layout shift causes and provides specific code improvements to resolve them.

Related Skills

Explore More Software Engineering Skills→
ProfoundLogicProfoundLogic

codermake

Compile IBM i RPG, CL, DDS, and SQL source into programs and modules.

Official
Intermediate
ReefBytes-OwnerReefBytes-Owner
1

performance-check

Diagnose frontend performance issues and generate structured reports.

Community
Advanced
DaFumDaFum
1

perf-budget-enforcer

Enforce performance budgets for bundle size, load time, and FPS in CI builds.

Community
Intermediate
michaeldubumichaeldubu

perf-analyzer

Parse and analyze CUDA, CPU, and memory benchmark outputs across CSV, JSON, and text formats.

Community
Advanced