Implémentez la direction artistique pour les images Next.js à l'aide de getImageProps(). À utiliser pour afficher différentes images pour différentes tailles de fenêtre, telles que des carrousels de page d'accueil avec des ressources mobiles et des ressources de bureau, un recadrage/composition différent, ou lorsque les images mobiles et de bureau diffèrent complètement.
Installez rapidement le skill IA nextjs-image-art-direction dans votre environnement de développement via la ligne de commande
Source : 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.
Implémentez la direction artistique pour les images Next.js à l'aide de getImageProps(). À utiliser pour afficher différentes images pour différentes tailles de fenêtre, telles que des carrousels de page d'accueil avec des ressources mobiles et des ressources de bureau, un recadrage/composition différent, ou lorsque les images mobiles et de bureau diffèrent complètement. Source : flpbalada/my-opencode-config.
Champs et commandes stables pour les citations IA/recherche.
npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-directionImplémentez la direction artistique pour les images Next.js à l'aide de getImageProps(). À utiliser pour afficher différentes images pour différentes tailles de fenêtre, telles que des carrousels de page d'accueil avec des ressources mobiles et des ressources de bureau, un recadrage/composition différent, ou lorsque les images mobiles et de bureau diffèrent complètement. Source : flpbalada/my-opencode-config.
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/flpbalada/my-opencode-config --skill nextjs-image-art-direction Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code, Cursor ou OpenClaw
https://github.com/flpbalada/my-opencode-config