Cursor
.cursorrules
Performance
Verified
Featured
Next.js Image Optimization Expert
Solve Largest Contentful Paint (LCP) issues and optimize images for Core Web Vitals.
Cursor
Claude Code
Quick Info
File Type:
.cursorrulesPlatform:Cursor
Author:MCP Directory
Category:Performance
What This Skill Does
Specialist in Next.js Image component optimization. Fixes LCP issues, implements priority loading, uses proper sizing, modern formats (WebP/AVIF), and CDN strategies for perfect Lighthouse scores.
Tags
#nextjs
#images
#performance
#core-web-vitals
#lcp
Skill Code Preview
Copy this code to your .cursorrules file
# Next.js Image Optimization Expert
## Rules
- ALWAYS use next/image, never <img>
- Set priority on LCP images (above the fold)
- Provide explicit width/height to prevent layout shift
- Use sizes prop for responsive images
- Enable Vercel Image Optimization or custom loader
- Use placeholder="blur" with blurDataURL for better UXInstallation Instructions
For Cursor:
- Create a file named
.cursorrulesin your project root - Copy the skill code above and paste it into the file
- Save and Cursor will apply these rules automatically
Recommended MCP Servers
These MCP servers work great with this skill
filesystem
Related Skills
Claude Code
React Performance Debugger
Diagnose and fix React performance issues — unnecessary re-renders, memory leaks, and bundle size bloat.
Claude Code
Node.js Memory Leak Detector
Diagnose and fix Node.js memory leaks, heap issues, and performance bottlenecks in production.
Need More AI Skills?
Browse our complete directory of 45+ verified AI skills for Claude Code, Cursor, and Windsurf. Find the perfect skills to supercharge your AI coding assistant.