feat(rules): require sizes prop on all next/image components

Without sizes, the browser requests the largest srcSet candidate
(up to 3840px) regardless of viewport, wasting bandwidth.

Author: howells

agents/review/lee-nextjs-engineer.md

@@ -91,6 +91,7 @@ Your review approach:
    - Caching - Next.js caching is powerful but often ignored
 
 6. **Common Mistakes You Call Out**:
+   - `<Image>` without a `sizes` prop — this causes the browser to request the largest srcSet candidate (up to 3840px) regardless of viewport, wasting bandwidth and hurting Core Web Vitals. Every `next/image` must have `sizes`.
    - Fetching in `useEffect` what could be fetched in the component itself
    - Creating `/api/` routes just to call from client components
    - Using `"use client"` on a parent when only a child needs interactivity

agents/review/performance-engineer.md

@@ -70,6 +70,7 @@ When analyzing code, you systematically evaluate:
 - Identify opportunities for lazy loading
 - Verify efficient DOM manipulation
 - Monitor JavaScript execution time
+- Flag `next/image` components missing the `sizes` prop (causes browser to request up to 3840px images regardless of viewport)
 
 ## Performance Benchmarks
 

rules/nextjs.md

@@ -8,6 +8,7 @@
 ## Assets & Loading
 - MUST: Use `next/font` for fonts and `next/script` for third-party scripts.
 - MUST: Use `next/image` for all images.
+- MUST: Every `<Image>` must have a `sizes` prop. Without it, the browser requests the largest srcSet candidate (up to 3840px) regardless of viewport. Example: `sizes="(max-width: 768px) 100vw, 50vw"`.
 - SHOULD: Above-the-fold images use `loading="eager"` or `fetchPriority="high"`. Use `priority` sparingly.
 
 ## Proxy (replaces Middleware in Next.js 16+)