Implementa la direzione artistica per le immagini Next.js utilizzando getImageProps(). Da utilizzare quando si mostrano immagini diverse per dimensioni del viewport diverse, ad esempio caroselli di home page con risorse per dispositivi mobili e desktop, ritagli/composizioni diversi o quando le immagini per dispositivi mobili e desktop differiscono completamente.
Installa rapidamente la skill AI nextjs-image-art-direction nel tuo ambiente di sviluppo tramite riga di comando
Fonte: flpbalada/my-opencode-config.
Art direction means showing completely different images based on viewport size — not just resizing the same image. Common use cases include homepage carousels with different assets for mobile vs desktop, switching from landscape (desktop) to portrait (mobile), or showing cropped vs full compositions.
| Art Direction | Different image content/composition | with multiple elements | | Responsive Images | Same image, different sizes | sizes prop with srcset |
The getImageProps() function (stable since Next.js 14.1.0) generates the necessary props without calling React useState(), making it ideal for art direction.
Implementa la direzione artistica per le immagini Next.js utilizzando getImageProps(). Da utilizzare quando si mostrano immagini diverse per dimensioni del viewport diverse, ad esempio caroselli di home page con risorse per dispositivi mobili e desktop, ritagli/composizioni diversi o quando le immagini per dispositivi mobili e desktop differiscono completamente. Fonte: flpbalada/my-opencode-config.
Campi e comandi stabili per citazioni AI/ricerca.
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-directionImplementa la direzione artistica per le immagini Next.js utilizzando getImageProps(). Da utilizzare quando si mostrano immagini diverse per dimensioni del viewport diverse, ad esempio caroselli di home page con risorse per dispositivi mobili e desktop, ritagli/composizioni diversi o quando le immagini per dispositivi mobili e desktop differiscono completamente. Fonte: flpbalada/my-opencode-config.
Apri il tuo terminale o strumento da riga di comando (Terminal, iTerm, Windows Terminal, ecc.) Copia ed esegui questo comando: npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction Dopo l'installazione, la skill verrà configurata automaticamente nel tuo ambiente AI di coding e sarà pronta all'uso in Claude Code, Cursor o OpenClaw
https://github.com/flpbalada/my-opencode-config