skills.rest
williamzujkowski
williamzujkowskiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

Frontend Performance Optimizer

Analyze and optimize frontend performance using Core Web Vitals and bundle analysis.

6|Updated Oct 25, 2025
Search Tags:#performance#caching#frontend#lazy-loading#bundle-analysis#image-optimization#core-web-vitals
One-click install
npx skills add https://github.com/williamzujkowski/cognitive-toolworks --skill frontend-performance-optimizer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Performance Optimizer
Source: https://github.com/williamzujkowski/cognitive-toolworks/tree/main/skills/frontend-performance-optimizer
Command: npx skills add https://github.com/williamzujkowski/cognitive-toolworks --skill frontend-performance-optimizer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Performance Optimizer analyzes and optimizes frontend performance for web applications, helping teams meet Core Web Vitals targets and deliver faster, more stable experiences.

Core Features & Use Cases

  • Core Web Vitals measurement and optimization (LCP, FID, CLS)
  • JavaScript bundle size analysis and code splitting
  • Image optimization and modern format recommendations
  • Lazy loading strategy implementation
  • Browser caching and CDN configuration
  • Resource prioritization and preloading
  • Performance budget definition and tracking
  • Framework-specific guidance (React, Vue, Angular)
  • CI-friendly outputs and sample code snippets
  • Guidance for caching, fonts, and CSS optimization

Quick Start

Provide a URL or codebase path to generate a performance optimization plan with actionable recommendations.

Frequently Asked Questions about Frontend Performance Optimizer

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

FAQPage Schema
How do I improve Core Web Vitals for a React or Vue application?▼

To improve Core Web Vitals for React or Vue, analyze your bundle size, implement lazy loading, and optimize images. This skill provides framework-specific guidance to measure and optimize LCP, FID, and CLS metrics.

What is the best way to reduce JavaScript bundle size in a frontend web app?▼

The best way to reduce JavaScript bundle size is through code splitting and bundle analysis. This skill analyzes your codebase to identify optimization opportunities and delivers sample code snippets for implementation.

Can I set up performance budgets in my CI pipeline for frontend optimization?▼

Yes, you can set up performance budgets in CI pipelines. This skill generates CI-ready budget definitions and tracking outputs, allowing you to enforce performance standards during development, staging, and production.

How do I configure browser caching and CDN strategies for static assets?▼

Configure browser caching and CDN strategies by applying resource prioritization and preloading rules. This skill outputs actionable caching configuration guidance and modern image format recommendations.

Does this frontend performance optimizer work with vanilla JavaScript?▼

Yes, this frontend performance optimizer works with vanilla JavaScript, as well as React, Vue, and Angular. It provides measurable metrics and prioritized recommendations regardless of your chosen framework.

Related Skills

Explore More Software Engineering Skills→
akiyoshiakiyoshi

benchmark

Measure web performance metrics and generate JSON and Markdown reports.

Community
Advanced
DaFumDaFum
1

perf-budget-enforcer

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

Community
Intermediate
toqoztoqoz

web-image-compression

Optimize and convert image assets for web delivery using Nix-based command-line tools.

Community
Intermediate
jholhewresjholhewres
3

bundler-analyze

Analyze JavaScript bundle sizes for Vite and Webpack projects.

Community
Basic