performance
Optimizes web apps for performance and user experience.
Install
mkdir -p .claude/skills/performance-aayush31-ai && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/15850" && unzip -o skill.zip -d .claude/skills/performance-aayush31-ai && rm skill.zipInstalls to .claude/skills/performance-aayush31-ai
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.
Expert in web performance optimization and Core Web Vitals. Use this skill when building any web application. Creates fast, efficient experiences through code splitting, image optimization, and strategic loading patterns.Key capabilities
- →Optimize LCP under 2.5s by prioritizing above-fold content
- →Keep FID under 100ms with code splitting and deferred JavaScript
- →Maintain CLS under 0.1 by setting image dimensions
- →Serve modern image formats (WebP, AVIF) with fallbacks
- →Use dynamic imports for heavy components and routes
How it works
This skill guides web application optimization by applying principles like Core Web Vitals mastery, image optimization, code splitting, asset optimization, and strategic loading patterns. It aims to create fast and efficient user experiences.
Inputs & outputs
When to use performance
- →Optimize lcp and cls
- →Implement code splitting
- →Lazy load assets
About this skill
This skill guides the creation of high-performance web applications optimized for Core Web Vitals and exceptional user experience.
Core Principles
Core Web Vitals Mastery: Optimize LCP (Largest Contentful Paint) under 2.5s by prioritizing above-fold content, preloading critical resources, and using Next.js Image. Keep FID (First Input Delay) under 100ms with code splitting and deferred JavaScript. Maintain CLS (Cumulative Layout Shift) under 0.1 by setting image dimensions and avoiding dynamic content insertion.
Image Optimization: Always use Next.js Image component with proper width/height. Serve modern formats (WebP, AVIF) with fallbacks. Implement lazy loading for below-fold images. Use placeholder blur for smoother loading. Size images appropriately—never serve 4K images for thumbnail displays.
Code Splitting & Lazy Loading: Use dynamic imports for heavy components and routes. Implement React.lazy with Suspense for code splitting. Defer non-critical JavaScript. Lazy load third-party scripts (analytics, chat widgets). Split vendor bundles strategically.
Asset Optimization: Minimize bundle size—analyze with tools like Bundle Analyzer. Tree-shake unused code. Use server components to reduce client JavaScript. Compress assets with gzip/brotli. Implement caching strategies with proper headers.
Loading Strategies: Prefetch critical routes with Next.js Link. Preload fonts and critical assets. Use loading skeletons for better perceived performance. Implement progressive enhancement—core functionality works without JavaScript. Stream server components for faster time-to-interactive.
Monitoring: Track real user metrics with Web Vitals library. Test with Lighthouse regularly. Monitor bundle sizes in CI/CD. Set performance budgets and enforce them.
Remember: Performance is user experience. Every 100ms delay decreases conversions. Optimize ruthlessly but measure everything.
When not to use it
- →The task does not involve web application development
- →The task is purely about backend performance optimization
- →The task is about database schema evolution without API surface impact
Limitations
- →The skill focuses on web performance optimization
- →The skill provides guidance for Core Web Vitals
- →The skill provides guidance for image optimization
How it compares
This workflow provides a structured approach to web performance optimization, focusing on specific metrics and techniques like Core Web Vitals, which is more targeted than general web development practices.
Compared to similar skills
performance side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| performance (this skill) | 0 | 4mo | No flags | Intermediate |
| nextjs-developer | 328 | 3mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| nextjs-app-router-patterns | 3 | 2mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
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.
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.
nextjs-app-router-patterns
wshobson
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
bundle-dynamic-imports
TheOrcDev
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
bundle-barrel-imports
TheOrcDev
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.