A skill for coding agents that adds the right sizes to every fill image in a Next.js app, derived from the layout and proved to change no pixels.
No one-line install. Follow the setup guide from Jan Springer.
Open setup guideThe problem A next/image that uses fill and has no sizes tells the browser the image is as wide as the viewport. The browser then downloads a file as wide as the screen. A photograph in a card one third of the page wide arrives at full-screen size, on every device. Next also builds only a 1x and 2x srcset without sizes, so there is nothing smaller to choose from. Writing sizes by guesswork is how it goes wrong. A value too small blurs the picture and one too large changes nothing. This skill measures first and proves afterwards. What it covers Setting sizes from the real rendered width at each breakpoint, including layouts where the width varies inside one range. Choosing loading, fetchPriority or preload instead of the deprecated priority in Next 16. When unoptimized is right, and why it quietly hides full-size photographs from an audit. Remote and local image patterns, including an optimiser check that is safe in client code. A proof method: bytes fetched, element geometry and a screenshot, before and after. Written for Next.js 16 and checked against 16.3.8. Every rule cites a prop section of the next/image docs, which recent versions ship inside node_modules/next/dist/docs. Where your installed docs differ, they win. The sizes, fill and unoptimized rules hold from Next 13; the priority to preload guidance is Next 16 only.
AI-driven UI component generation with a modern React/Tailwind component library.
React composition patterns that scale and avoid boolean prop proliferation.
React Native best practices optimized for AI agents with 16 rules across 7 sections.