Skill

role-frontend:frontend-performance

Frontend performance expertise including Core Web Vitals (LCP, INP, CLS), code splitting, tree shaking, image optimization (WebP, AVIF, lazy loading), font loading strategies, service workers, and bundle analysis with webpack-bundle-analyzer.

Install

npx claudepluginhub rnavarych/alpha-engineer --plugin role-frontend

Tool Access

This skill is limited to using the following tools:

ReadGrepGlobBash

Preview

- Diagnosing or improving Core Web Vitals scores (LCP, INP, CLS)

Supporting Assets

references/animation-monitoring.mdreferences/bundle-js-performance.mdreferences/core-web-vitals.mdreferences/image-font-optimization.mdreferences/network-rendering-strategies.md

SKILL.md

Similar Skills

skill-lookup

Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.

prompts.chat

157.6k

prompt-lookup

Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.

prompts.chat

157.6k

Agent Development

6 files

Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.

plugin-dev

83.2k

Stats

Parent Repo Stars9

Parent Repo Forks0

Last CommitMar 3, 2026

Actions

View Source View Plugin View on GitHub View README

When to use

Diagnosing or improving Core Web Vitals scores (LCP, INP, CLS)

Reducing JavaScript bundle size or fixing slow load times

Optimizing images, fonts, or network resource loading

Choosing between SSR, SSG, RSC, Islands rendering strategies

Implementing animations without janking the main thread

Setting up performance monitoring and budgets in CI

Core principles

Measure before optimizing — profile first, then fix the specific bottleneck

LCP image must never be lazy-loaded — fetchpriority="high" + loading="eager" always

Budget enforced in CI — size-limit or Lighthouse CI blocks regressions before they ship

Animate transform and opacity only — everything else triggers layout or paint

Server state before client state — SSR/SSG gives you LCP for free; hydrate selectively

Reference Files

references/core-web-vitals.md — LCP/INP/CLS targets, optimization techniques, web-vitals library, CrUX monitoring

references/image-font-optimization.md — AVIF/WebP format selection, responsive srcset, Next.js Image, BlurHash, font subsetting, font-display comparison

references/bundle-js-performance.md — code splitting, tree shaking, dynamic imports, Web Workers, React memoization, virtualization, performance budgets

references/network-rendering-strategies.md — resource hints, HTTP/2, Workbox service worker strategies, SSR/SSG/RSC/Islands comparison, third-party script facades

references/animation-monitoring.md — GPU-accelerated properties, layout thrashing, View Transitions API, Lighthouse CI config, anti-patterns table

Frontend Performance

When to use

Diagnosing or improving Core Web Vitals scores (LCP, INP, CLS)
Reducing JavaScript bundle size or fixing slow load times
Optimizing images, fonts, or network resource loading
Choosing between SSR, SSG, RSC, Islands rendering strategies
Implementing animations without janking the main thread
Setting up performance monitoring and budgets in CI

Core principles

Measure before optimizing — profile first, then fix the specific bottleneck
LCP image must never be lazy-loaded — fetchpriority="high" + loading="eager" always
Budget enforced in CI — size-limit or Lighthouse CI blocks regressions before they ship
Animate transform and opacity only — everything else triggers layout or paint
Server state before client state — SSR/SSG gives you LCP for free; hydrate selectively

Reference Files

references/core-web-vitals.md — LCP/INP/CLS targets, optimization techniques, web-vitals library, CrUX monitoring
references/image-font-optimization.md — AVIF/WebP format selection, responsive srcset, Next.js Image, BlurHash, font subsetting, font-display comparison
references/bundle-js-performance.md — code splitting, tree shaking, dynamic imports, Web Workers, React memoization, virtualization, performance budgets
references/network-rendering-strategies.md — resource hints, HTTP/2, Workbox service worker strategies, SSR/SSG/RSC/Islands comparison, third-party script facades
references/animation-monitoring.md — GPU-accelerated properties, layout thrashing, View Transitions API, Lighthouse CI config, anti-patterns table