Guides optimization of web performance to meet Core Web Vitals targets.
Install
mkdir -p .claude/skills/performance-optimization-hack23 && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/10503" && unzip -o skill.zip -d .claude/skills/performance-optimization-hack23 && rm skill.zipInstalls to .claude/skills/performance-optimization-hack23
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Core Web Vitals optimization, bundle size reduction, caching strategies, and performance tuning expertiseKey capabilities
- →Enforce Core Web Vitals targets
- →Optimize bundle size below 100KB
- →Implement image optimization and lazy loading
- →Configure HTTP caching headers
- →Apply code splitting and tree shaking
How it works
The skill applies a two-iteration improvement process focused on measuring performance via Lighthouse and implementing specific optimization strategies like lazy loading and caching.
Inputs & outputs
When to use performance-optimization
- →Improve LCP score
- →Reduce bundle size
- →Optimize images
About this skill
Performance Optimization Skill
🔴 AI FIRST Quality Principle
Apply the AI FIRST principle: never accept first-pass quality. Minimum 2 iterations. Read all output, improve every section. No shortcuts.
Purpose
Expert knowledge in optimizing web performance focusing on Core Web Vitals, bundle size reduction, and efficient caching strategies.
Core Principles
- Measure First - Use Lighthouse/PageSpeed Insights
- Core Web Vitals - LCP < 2.5s, FID < 100ms, CLS < 0.1
- Progressive Enhancement - Core functionality works everywhere
- Lazy Loading - Load content as needed
- Caching Strategy - Maximize cache hits
Enforces
- Core Web Vitals targets:
- LCP (Largest Contentful Paint) < 2.5s
- FID (First Input Delay) < 100ms
- CLS (Cumulative Layout Shift) < 0.1
- Bundle size optimization (< 100KB initial)
- Image optimization (WebP, lazy loading)
- HTTP caching headers
- CDN optimization
- Code splitting and tree shaking
Optimization Strategies
- Lazy load images and charts
- Defer non-critical JavaScript
- Use browser caching (Cache-Control, ETag)
- Minify HTML/CSS/JavaScript
- Optimize images (compression, modern formats)
- Implement service workers for offline
When to Use
- Performance tuning
- Bundle size reduction
- Load time optimization
- Core Web Vitals improvement
- Caching strategy design
References
Version: 1.0 | Last Updated: 2026-02-06 | Category: Development & Operations
When not to use it
- →When the project is in early prototyping stages where performance is not yet a priority
Limitations
- →Requires minimum of two iterations for quality assurance
How it compares
It mandates a minimum of two iterations for all output to ensure quality, moving beyond simple one-pass suggestions.
Compared to similar skills
performance-optimization side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| performance-optimization (this skill) | 0 | 4mo | No flags | Advanced |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| angular | 100 | 4mo | Review | Advanced |
| flutter-expert | 73 | 4mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by Hack23
View all by Hack23 →You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
angular
sickn33
Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern patterns.
flutter-expert
sickn33
Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
web-games
davila7
Web browser game development principles. Framework selection, WebGPU, optimization, PWA.
rendering-animate-svg
TheOrcDev
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with pixel art animations.