nextjs-image-usagelisted

## What this skill does - Ensures all images use Next.js 16 Image component (not img tag) - Configures remote domains in next.config.ts for external images - Handles responsive images with proper sizing and priority - Migrates from old Next.js versions to Next.js 16 Image API - Implements image optimization for performance - Configures image domains and patterns for security - Uses proper placeholder and blur strategies - Handles local and remote image sources correctly ## LLM Code Detection and Conversion When an LLM proposes using `<img>` tags in Next.js 16 code, **automatically convert** them to the Next.js `<Image />` component equivalent. ### Detection Patterns The LLM may propose `<img>` tags in these scenarios: ```html <!-- Pattern 1: Basic img tag --> <img src="/image.jpg" alt="Description" /> <!-- Pattern 2: With width/height --> <img src="/image.jpg" alt="Description" width="800" height="600" /> <!-- Pattern 3: With class --> <img src="/image.jpg" alt="Description" class="rounded-lg shadow-md" /> <!-- Pattern 4: Remote URL --> <img src="https://cdn.example.com/image.jpg" alt="Description" /> <!-- Pattern 5: In JSX --> <img src={imageUrl} alt={altText} /> ``` ### Conversion Rules Always convert `<img>` to `<Image />` following these rules: | `<img>` Attribute | Next.js 16 `<Image />` Equivalent | Notes | |------------------|-----------------------------------|---------| | `src="/path.jpg"` | `src="/path.jpg"` | Same (local images in public/) | | `src="ht